@font-face {
  font-family: 'FOT-RodinNTLG Pro DB'; /* Name of the font */
  src: url('./FOT-RodinNTLG Pro DB.otf') format('opentype');
  }
  @font-face {
  font-family: 'RobotoCondensed-Regular'; /* Name of the font */
  src: url('./RobotoCondensed-Regular.ttf') format('truetype');
  }
  @font-face {
  font-family: 'Smile'; /* Name of the font */
  src: url('./Smile.ttf') format('truetype');
  }
  
  ::-webkit-scrollbar {
    display: none;
  }
  
  html, body {
    --bg-color: #f2fdff; /* your background color */
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* optional, stops horizontal scroll */
  
  }
  body::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    pointer-events: none;
    z-index: 6;
  
    backdrop-filter: blur(0.13vh);
    -webkit-backdrop-filter: blur(0.13vh);
  
    /* use a gradient as a mask */
    -webkit-mask-image: linear-gradient(to top, var, #eee7fc00);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to top, #eee7fc, #eee7fc00);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
  /* Ensure the parent container of .title has position: relative; */
  .title {
    font-family: 'FOT-RodinNTLG Pro DB', sans-serif;
    font-size: 3vh;
    position: fixed;
    top: 1vh;
    margin-left: 10.1vh;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
    z-index: 2;
    opacity: 0.9;
    letter-spacing: -0.45vh;
    filter: brightness(1.2);
      
  }
  
  .top-rectangle {
    width: 100vw;
    height: 8vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1c1c1c42; /* Soft pink */
    border-radius: 0 0 0vh 4vh; /* Optional: rounded bottom corners */
    z-index: 1;
    box-shadow: 0 1vh 2vh 1vh rgba(0, 0, 0, 0.29);
    backdrop-filter: blur(0.5vh);
    overflow: visible;
     
  }

  ul {
    list-style: none;
    position: static;
    right: 3vw;
    font-family: 'FOT-RodinNTLG Pro DB', sans-serif;
    padding: 0vh;
    

      
  }
  ul li {
    display: inline-block;
    position: static;
  
      
  }
  ul li a {
    display: block;
    padding: 1vh 1vh;
    text-decoration: none;
    text-align: center;
    font-size: 3vh;
    position: static;
    color: var(--bg-color);
    filter: brightness(1.1);
    width: 50vw;
      
      
   
  }
  ul li ul.dropdown {
    position: fixed;
    top: 13vh; /* Adjust if needed to match your nav bar height */
    z-index: 4;
    display: none;
    background-color: #1c1c1c69;      box-shadow: 0 2vh 4vh rgba(0, 0, 0, 0.335);
    right: 50%;
    transform: translateX(50%);

  
  }
  
  ul li ul.dropdown li {
    display: block;
    width: 100%;
      
  
  }
  
  
  ul li.active ul.dropdown {
    display: block;
    border-radius: 4vh;
    margin-top: 1vh;
  }
  



  .menu-icon {
      
    position: fixed;        /* stays in place when scrolling */
    top: 0vh;
    right: -3vh;
    display: inline-flex;       /* lets us center text nicely */
    justify-content: center;
    align-items: center;
    width: 19vh;                  /* adjust size */
    height: 5vh;                  
    border-radius: 1vh 1vh 1vh 1vh;           /* optional, for rounded square */
    font-size: 4vh;          
    cursor: pointer;
    transition: background 0.3s; /* smooth background transition on hover */
    color: var(--bg-color);
    filter: brightness(1.1);
    opacity: 0.75;
      
  }
  .menu-icon:hover {
    background: rgba(255, 255, 255, 0.1); /* subtle hover background */
      
  }
  
  .welcome {
    position: relative;           /* instead of absolute */
    margin: 20vh 0vh 2vh 100%; 
    right: 21vh;  /* pushes it below navbar */
    width: 22vh;                  /* whatever width you want */
    height: 10vh;
    background-color: rgba(83, 82, 82, 0.07);
    border-radius: 3vh 0 0 3vh;
    box-shadow: 0 2vh 4vh rgba(28, 28, 28, 0.26);
  
    top: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
  
    font-family: "RobotoCondensed-Regular", sans-serif;
    font-size: 5vh;
    text-align: center;
    opacity: 0.70;
  }
  
  .smiley {
    position: relative;          /* instead of absolute */
    margin-right: 2vh ;            /* spacing below welcome */
    width: 13vh;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 7vh;
    font-family: "Smile", sans-serif;
    top: -51vh;
  
    background-color: rgba(83, 82, 82, 0.07);
    border-radius: 0 3vh 3vh 0;
    box-shadow: 0 2vh 4vh rgba(28, 28, 28, 0.26);
    opacity: 0.7;
  }
  .textContent {
    position: relative;
    margin-left: 3.2vw;
    margin-right: 3.2vw;
    opacity: 0.7;
  
    
  }

  .secondary {
    font-family: 'FOT-RodinNTLG Pro DB', sans-serif;
    font-size: 1.5vh;
    line-height: 2vh;
    margin-top: -15vh;
    box-sizing: 1vh;

  }
  .Spud{
    filter: brightness(1.2);
    filter: saturate(1.6);
    rotate: 18deg;
    margin-top: 10vh;
    margin-left: 16vw;
    height: 16vh;
    opacity: 0.9;
  }


  .line{
    width: 100%;
    height: 0.2vh;
    opacity: 0.2;
    
    
  }

  .line2{
    
    width: 60%;
    height: 0.2vh;
    opacity: 0.2;
  
  }
    
  .kuno{
    margin-left: 4vh;
    height: 37vh;
    opacity: 0.9;
    rotate: -24deg;
    margin-top: -19vh;
    filter: saturate(1.1);
    filter: brightness(1.2);
    

  }
  .heart{
    height: 13vh;
    margin-left: 65%;
    rotate: 20deg;
    margin-top:15%;
  }

  .line3{
    
    width: 60%;
    height: 0.2vh;
    opacity: 0.2;
    margin-top: 0vh;
  
  }

  .dots{

    opacity: 0;
    line-height: 0vh;

  }