@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 {
    background-color: #abcfd5;
    height: 100%;
    
  }


  .RoelXDS {
    position :fixed ;
    width: 48vh;
    left: 0vh;
    

  }
  
  .top-rectangle {
    width: 100vw;
    height: 8vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1c1c1c42;
    border-radius: 0 0 0vh 4vh; /* Optional: rounded bottom corners */
    z-index: 1;
    box-shadow: 0 1vh 2vh 1vh rgba(139, 139, 135, 0.29);
    backdrop-filter: blur(0.5vh);
    overflow: visible;
     
  }

 

  .menu-icon {
      
    position: fixed;        /* stays in place when scrolling */
    top: 0.7vh;
    left: 2vh;
    display: inline-flex;       /* lets us center text nicely */
    justify-content: center;
    align-items: center;
    width: 19vh;                  /* adjust size */
    height: 7vh;                  
    border-radius: 2vh 2vh 2vh 2vh;           /* optional, for rounded square */       
    cursor: pointer;
    transition: background 0.3s; /* smooth background transition on hover */
    filter: brightness(1.1);
    opacity: 1;
    
  }

  .Miiverse {
    position: fixed;
    height: 14.7vh;
    width: 16.5vh;
    filter: saturate(1.6);
    top: 0.8vh;
    right: 2vh;

  }
  
 .topbar {

    position: fixed;
    width:100% ;
    height:16vh ;
 }

 .cloud1 {
    margin-top: -70vh;
    margin-left: 5vh;
    width: 100vh;

 }
  .cloud2 {
    margin-top: -160vh;
    margin-left: 23vh;
    width: 120vh;    

 }

   .spud {
    margin-top: 20vh;
    margin-left: 58vh;
    width: 40vh;   

 }