@import url('https://fonts.googleapis.com/css2?family=Varela&display=swap');

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

html {
 overflow: hidden;
 height: 100%;
} /* for overscroll */

body {
   background-image: url("chbg.jpg");
   background-size: cover;
   background-attachment: fixed;
   background-color: #9AE0E4;
   
   animation: fadein ease .5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
   
   font-family: 'Varela', serif;
   color: saddlebrown;
   
   height: 100%; /**/
   overflow: auto; /* for overscroll */
}

img {
 object-fit: contain; 
 max-width: 90%;
}

aside {
 text-align: center; 
}

p { text-align: center; }

#wrapper { 
  display: flex;
  flex-direction: column;
  margin: 3em 5em 3em 55%;
  gap: 1.5em;
}

.sec {
  background-image: url("chtexture.png");
  background-color: #E9C6A3;
  border-radius: .5em;
  
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  
  padding: 2em;
}

.toggle { display: none; }

.nav {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: .3em;
}
.navic { width: 2.5em; }
.charic { width: 3.5em; border-radius: 10em; }

.grid {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: .5em;
}

.grow { transition: transform .15s; }
.grow:hover { transform: scale(1.2); }

@media only screen and (max-width: 600px) {
  
 #wrapper { margin: 1em; }
  
}