@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.noto-sans {
      font-family: "Noto Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-variation-settings: "wdth" 100;
    }
  
    body {
      background-image: url('https://rockseize.neocities.org/image/NRJjSF0.gif');
      font-size: 15px;
      cursor: url('https://rockseize.neocities.org/image/wingcurse.png'), auto;
    }

    #main {
      width: 750px;
      margin: 3rem auto 1.5rem auto;
      margin-left: 0;
      margin-top: 0;
      background-color: white;
      border: mediumslateblue 2px dashed;
      height: auto;
      padding: 25px;
      outline: 4px solid white;
      border-radius: 0;  
      display: block;
      gap: 30px;
    }
    
    #mobileHeader {
      display: none;
      width: 100%;
    }
    
    #top {
      gap: 15px;
      display: flex;
      height: 250px;
      margin-bottom: 30px;
      }
       
    .navbar {
      width: 75px;
      }   
      
    .select {
      color: #8fa3ff;
      position: relative;
      width: 100%;
      height: 40px;
      margin-top: 5px;
      margin-left: 0;
      margin-bottom: 12px;
      padding-left: 5px;
      border-style: solid;
      border-width: 1px;
      box-sizing: border-box
      background-color: white;
      transition-duration: 0.3s;
      }
      
    .select p {
      margin-bottom: 0; 
      margin-top: 10px;
      }
      
    .about p {
      font-family: "Noto Sans", sans-serif;
      font-size: 12px;
      margin: 0;
      overflow: scroll;
      padding-right: 5px;
      }
      
    #surf {
      color: #ccc;
      font-size: 10px;
      text-align: left;
      width: 230px;
      }
    
    .select:hover{
      width: 90%;
      font-size: 16.5px;
      color: #2b2d75;
      font-style: italic;
      animation: hoverboard 0.3s;
      }  
      
    @keyframes hoverboard {
      from {
        width: 100%; 
        font-size: 15px;
           }
      to {
        width: 90%; 
        font-size: 16.5px; 
        font-style: italic;
         }
      }
      
    .title {
      width: 650px;
      height: 125px;
      background-image: url('https://rockseize.neocities.org/image/headerclair2.png');
      margin-bottom: 5px;
      }  
        
    .about {
      height: 130px;  
      display: flex;
      border-style: solid;
      border-width: 1px;
      border-color: #69b6ff;
      width: 650px;
      }
    
    #bottom, .lower {
      display: flex;
      font-family: "Noto Sans", sans-serif;
      }
      
    .webrings {
      margin-bottom: 10px;
      margin-right: 5px;
      padding: 5px;
      display: flex;
      height: 180px;
      border-style: solid;
      border-width: 1px;
      border-color: #69b6ff;
      }

    
    .buttons, .textbutton {
      border-style: solid;
      border-color: #3e82c2;
      border-width: 1px;
      margin: 5px;
      height: 400px;
      overflow: auto;
      }  
      
    .buttons {
      width: 180px; 
      margin-left: 0;
    }
      
    .textbutton {
      max-width: 250px;
     }
      
    .stamps {
      height: 400px;
      width: 115px;  
      padding-left: 5px;
      border-style: solid;
      border-color: #3e82c2;
      margin: 5px;
      overflow: hidden;
      border-width: 1px;
      }
      
    a:-webkit-any-link {
      text-decoration: none;
      }
      
      #ckwr .webring-image {
        content: url("https://evehibi.nekoweb.org/ckwr/c/sorbetshark.png");
      }
      
      @media (max-width: 800px) {
        #mobileHeader {
          display: block;
        }
        #main {
          display: flex;
          flex-direction: column;
          width: 85%;
        }
        .topleft, .navbar {
          display: flex;
        }
        .topright {
          flex: 80%;
        }
        #top, #bottom {
          display: flex;
          flex-direction: column;
          width: 100%;
        }
        
        #top {
          margin-bottom: 0;
        }
        .lower {
          display: flex;
          flex-direction: column;
          width: 100%;
        }
        
        
        .title, .stamps {
          display: none;
        }
        
        .about, .webrings, .buttons, .textbutton {
          max-width: 100%;
          width: 100%;
        }
        
        .navbar a {
          margin: 10px;
        }
      }