body {
  height: 100vh;   
  z-index: -9999;
}

footer {  
  position: fixed;
  overflow: hidden;
}

/* MENU */ 
.menu-button-container {      
  display: flex;    
}
  
.menu { 
  background-color:  rgba(0, 0, 0,1);      
  position:absolute;   
  height: 100vh;
  top: 0;
  margin-top: 0px;    
  right: 0;        
  flex-direction: column;
  width: 100%;    
  /*justify-content: center;*/
  align-items: center;
  overflow:hidden;
} 
 
#menu-toggle ~ .menu {
  width: 25%;
  height: 0; 
  right: 0;
  padding-top: 0px; 
  margin-right: 0px;                 
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

#menu-toggle:checked ~ .menu {
  height: 100vh;
  padding-top: 80px; 
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
} 

#menu-toggle ~ .menu li {      
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

#menu-toggle:checked ~ .menu li {
    border: 0px solid #ffffff;
    height: 1em;
    padding: 0.5em;    
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu > li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;      
    color: white;    
}

.menu li a {
    font-weight: 200;   
    font-size: 14px;
}
  
.menu > li:not(:last-child) {
  border-bottom: 1px solid #444;
}

@media (max-width: 700px) {
 
    .menu-button-container {      
      display: flex;    
    }
    
    .menu { 
      /* background-color:  rgba( 255, 0, 162, 0.8);       */
      position:absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      margin-top: 0px;    
      left: 0;        
      flex-direction: column;      
      /*justify-content: center;*/
      align-items: center;
      overflow:hidden;
    }    
  
    #menu-toggle ~ .menu {
      height: 0; 
      width: 70%;
      padding-top: 0px;                  
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
  
    #menu-toggle:checked ~ .menu {
      height: 100vh;
      padding-top: 80px; 
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    } 
  
    #menu-toggle ~ .menu li {      
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
  
    #menu-toggle:checked ~ .menu li {
      border: 0px solid #ffffff;
      height: 1.2em;
      padding: 0.5em;    
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
  
    .menu > li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;      
      color: white;   
    }
    
    .menu > li:not(:last-child) {
      border-bottom: 1px solid #444;
    }
}

/* ----GALLERY---- */

section {  
  width: 100%;
  height: 100vh;   
  display: flex;  
  align-items: center;
  justify-content: center;
}

canvas {
  filter: blur(1px);
}

.home-text {
  width: 70vw;
  height: 90vh;
}

.home-title {
  width: 70%;
  height: 24%;
  margin-top: 60px;
}

.home-title h2 {
  font-weight: 100;
  font-size: 40px;
  font-style: normal;
  letter-spacing: 20px;
}

.home-paragraph {
  width: 100%;
  height: 70%;
}

.home-paragraph p {
  /* background-color: rgba(0, 0, 0, 0.7); */
  padding: 6px;  
}

.gallery_central { 
  width: 80vw;  
  margin-top: 10px; 
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));  
  grid-gap: 20px;
  padding-bottom: 20px;
}

.gallery_item { 
  display: flex;
  flex-direction: column;
  align-items: center;  
}

.main-gallery {
  width: 90%;
  height: 370px; 
  display: flex;       
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;  
  margin-top: 0px;      
}
    
.main-gallery img {     
  width:auto;   
  max-height: 360px; 
  transition: ease-in-out 0.2s;  
}
    
.thumbnail-gallery {
  width: 100%;  
  height: 60px; 
  display: flex;
  align-items: center;
  justify-content: space-around;    
}
          
.thumbnail-gallery img {   
  width:auto;
  height: 58px;   
  cursor: pointer;
  opacity: 1;
  transition: ease-in-out 0.2s;
}

.thumbnail-gallery img:hover {
  -webkit-filter: invert (1);
  filter: invert(1);
}
  
.thumbnail-gallery img.active {
  opacity: 1;  
}

.title-gallery {
  width: 108%;
  height: 26px;      
  margin-bottom: 0px; 
  display: flex;
  flex-direction: column;
  justify-content: center;     
}

.title-gallery p {
  font-size: 14px;
  line-height: 16px;  
  font-weight: 200;
  padding-left: 20px; 
}

.scrolling {   
  height: 30px;
  bottom: 60px;
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;  
  z-index: 9999;
} 
.scrolling img {
  filter: invert(1);
  width: auto;
  height: 20px;
}
/*--- 1024 ---*/
@media (max-width: 1024px) {
  
  section {    
    width: 100%;
    height: auto;
  }

  .home-text {
    display: flex;
    flex-direction: column;
  }
  
  .thumbnail-gallery {
    width: 60%;
  }

}

@media (max-width: 724px) {

  header {
    width: 100%;
  }  

  /* #nostalghiaG , #embryoG , #algoreign_01G , #escapeG , #formesG  {  
    width: 100%;
    height: auto;     
  } */

   #tarot, #nostalghia, #hyper, #embryo , #exstasi, #algoreign_01 , #escapes , #formes, #mybo  {  
    width: 100%;
    height: 100vh;  
    display: flex;   
    justify-content: center;
    justify-items: center;    
  }

  .home-text { 
    width: 90%;
    height: 70vh;
    flex-direction: column;
  }

  .home-title {
    margin-top: -10px;      
    width: 100%;
    height: 10%;
  }

  .home-title h2 { 
    font-size: 20px;
    font-style: normal; 
    font-weight: 100;
  }

  .home-paragraph { 
    width: 100%;
    height: 60%;
  }

  .home-paragraph p {
    font-size: 18px;
    line-height: 22px;
  }

  .gallery_central { 
    width: 100vw;  
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));  
    grid-gap: 20px;
    padding-bottom: 20px;
    margin-top: 40px;     
  }

  .gallery_item {
    width: 90vw;
    margin-left: 16px;         
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
  }

  .main-gallery {     
    width: 100%;
    height: auto; 
    display: flex;       
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;        
  }
      
  .main-gallery img {         
    width:auto;   
    max-height: 250px;
    padding: 10px; 
    transition: ease-in-out 0.2s;  
  }
      
  .thumbnail-gallery {   
    width: 90%;  
    height: 76px; 
    display: flex;
    align-items: center;
    justify-content: space-around;    
  }
            
  .thumbnail-gallery img {   
    width:auto;
    height: 44px;   
    cursor: pointer;
    opacity: 1;
    transition: ease-in-out 0.2s;
  }

  .thumbnail-gallery img:hover {
    -webkit-filter: invert (1);
    filter: invert(1);
  }
    
  .thumbnail-gallery img.active {
    opacity: 1;  
  }

  .title-gallery { 
    width: 100%;
    height: 20px;      
    margin-bottom: 0px; 
    display: flex;
    flex-direction: column;
    justify-content: center;     
  }

  .title-gallery p {
    font-size: 14px;
    line-height: 16px;  
    font-weight: 200;
    padding-left: 20px; 
  }

  .scrolling {
    display: none;
  }
}