:root{
      --bg:#0f1724;
      --card:#0b1220aa;
      --accent:#8ef3a7;
      --muted:#9aa7b2;
      --glass: rgba(255,255,255,0.03);
      --glow: 0 8px 30px rgba(142,243,167,0.12);
      --mono: "Courier New", Courier, monospace;
    }
    html,body{height:100%}
    body{
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background-image: url('/img/website_bg_01.jpg');
      background-size: cover;
      background-position: center;
      color:#e6eef6;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    
    .card{
      padding-left:min(2em, 5%);
      padding-right:min(2em, 5%);
      width:min(800px,85%);
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:18px;
      box-shadow:var(--glow);
      backdrop-filter: blur(10px) saturate(0%);
      border:2px solid rgba(183, 183, 183, 0.969);
      text-align:center;
      margin-top:auto;
      margin-bottom: auto;
      display: block;
    }
    h1{
      margin:0 0 .6rem 0;
      margin-bottom: 20px;
      font-size:2.9rem;
      letter-spacing: -0.6px;
    }
    .small{
      padding: 1em;
      font-size:min(3em,80%);
      color:rgba(230,238,246,0.6);
    }
    .btn{
      display:inline-block;
      margin-inline: 0.01.em;
      color:#e6eef6;
      text-decoration:none;
      /*border:2px solid rgba(255,255,255,0.06)*/
      /*background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));*/
      cursor:default;
      font-size:3rem;
      padding-inline:1.5rem;
      padding-block: 0.8rem;
      align-items: middle;
      text-align: center;
    }

    hr.rounded {
  
      border-radius: 10%;
      border-width: 1rem,0.5rem;
  
    }

    .yt_box {
      overflow: hidden;
      width: 100%;
      position: relative;
      padding-bottom: 56.25%;
      border:0.1em solid rgba(213, 207, 207, 0.374);
      border-radius: 1em;
      margin-bottom: 20px;
      background-color: #e6eef6;

    }

    iframe {

    aspect-ratio: 16/9;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  

    .topline {
      font-size:1em;
      font: size 0.9em;
      color: var(--muted);
      padding: 10px 0 20px 0;
      display: block;
      overflow: visible;
    }


    @media (max-width:420px){
      h1{font-size:1.4rem}
      .card{ margin: auto auto auto auto; align-items: center; height: auto; } 
      .topline { font-size: 1em;}
      .btn{ font-size: 1.8rem; padding-inline: 1rem; padding-block: 0.6rem; }
    }