body {
    width: 100%;
    margin: 0;
}

:root {
	--hide-on: none;
}

.hide-on-all {
	display: var(--hide-on) !important;
}



.page, .screen {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.head-line {
    margin: auto;
}






:root{
  --glass-tint: 255 255 255;
  --glass-alpha: .12;
  --glass-blur: 28px;
  --glass-saturate: 180%;
  --glass-brightness: 115%;
  --glass-border: 1px;
  /* --glass-shadow: 0 18px 40px rgba(0,0,0,.25); */

  --ultra-thin: .08;
  --thin: .12;
  --regular: .16;

  --radius: 20px;
  --pad: 24px;
}

.glass{
    position: relative;
    /* width: min(92vw, 720px); */
    border-radius: var(--radius);
    padding: var(--pad);
    background:
      linear-gradient( to bottom right,
        rgba(255,255,255,.22), rgba(255,255,255,.04) 35%, rgba(255,255,255,0) 60% ),
      rgba(var(--glass-tint) / var(--glass-alpha));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));

    border: var(--glass-border) solid rgba(255,255,255,.25);
    box-shadow: var(--glass-shadow);
    overflow: clip;
  }

  .glass::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  }

  .glass::after{
    content:"";
    position:absolute; inset:0 0 55% 0;
    border-top-left-radius: inherit; border-top-right-radius: inherit;
    background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
    pointer-events:none;
    mix-blend-mode: screen;
  }

  .ultra-thin{ --glass-alpha: var(--ultra-thin); }
  .thin      { --glass-alpha: var(--thin); }
  .regular   { --glass-alpha: var(--regular); }


  @media (prefers-reduced-transparency: reduce){
    .glass{
      backdrop-filter: none; -webkit-backdrop-filter: none;
      background: rgba(var(--glass-tint) / .9);
      border-color: rgba(255,255,255,.75);
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .glass::after{ display:none; }
  }

  @supports not (backdrop-filter: blur(10px)){
    .glass{
      background: rgba(var(--glass-tint) / .85);
      box-shadow: 0 10px 28px rgba(0,0,0,.25);
    }
    .glass::after{ opacity:.15; }
  }



  .glass2{
    position: relative;
    border-radius: var(--radius);
    border: var(--glass-border) solid rgba(255,255,255,.25);
    box-shadow: var(--glass-shadow);
    overflow: clip;
  }
  
  .glass2::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    z-index: 0;
    background:
      linear-gradient(to bottom right,
        rgba(255,255,255,.22),
        rgba(255,255,255,.04) 35%,
        rgba(255,255,255,0) 60%),
      rgba(var(--glass-tint) / var(--glass-alpha));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  
    -webkit-mask-image: linear-gradient(to bottom, black 0% 20%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0% 20%, transparent 100%);
    pointer-events: none;
  }
  
  .glass2::after{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 0 0 1px rgba(255,255,255,.12);
    background:
      linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
      
  }
  
  .glass2 > *{
    position: relative;
    z-index: 1;
  }


  
.phone {
  border-radius: 40px;
}

.phone-island {
  margin: 20px auto;
  background: rgba(255,255,255,0.4);
  width: 85px;
  height: 20px;
  border-radius: 20px;
}