body {
            image-rendering: crisp-edges;
  background: url("images/back1.png") fixed repeat center;  
      font-family: 'LilstarliteFont', sans-serif;
      letter-spacing: -0.06em;
  font-size: 180%;
        }
         .container {
          max-width: 680px;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
      aspect-ratio: 680 / 914;

        }

        .main-box {        
          margin-top: 6%;
        background-image: url('images/main1.png');
  background-repeat: no-repeat;
  background-size: contain;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 height:100%;
  width: 100%;  
    position: absolute;
}
  
  

    .box {    
top: 1%;
  height: 69.2%;
  width: 93%;
  position: relative;
overflow: clip;
  left: 2.75%;
       }
        .home { 
            display: block;
            top: 1%; 
            height: 5%; 
            width: 32%; 
            position: relative; 
            left: 2%; 
        } 

        .home:hover {
            background-image: url('images/home.gif'); 
                background-repeat: no-repeat;
                background-position: center bottom;
         
         

         
         
            
        }
        
        
                .iconcontainer{
top: 0%;
  height: 16%;
  width: 100%;
  position: relative;
  display: flex;
    align-items: center;  
}

.icon{
  margin: 1.5%;
  height: 87%;
  aspect-ratio: 1 / 1;
}
.icon:hover {
  filter: saturate(140%) brightness(80%) hue-rotate(10deg);
  transform: scale(1.02);
}
.char {
  display: none; 
  width: 100%;
  height: 100%;
}


.char.active {
  display: flex; 
}



h2 {
  margin-top: 1%;
  margin-bottom: 1%;
}

p {
  margin-top: 1%;
  margin-bottom: 1%;
}

@media (max-width: 500px) {
  body {
    font-size: 80%;
  }
  .navbutton {
    font-size:100%;
  }
}
@font-face {
  font-family: 'LilstarliteFont';
  src: url('fonts/LilstarliteFont.otf') format('opentype');
}