:root{
   --box-shadow:0 5px 10px rgba(0,0,0,.1);
   --dark-bg:rgba(0,0,0,.7);
}

@font-face {
    font-family: 'ToonatorFont';
    src: url('../../fonts/toonator-webfont.eot');
    src: url('../../fonts/toonator-webfont.eot') format('eot'),
         url('../../fonts/toonator-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
   font-family: 'Ubuntu-Medium';
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
}

body {
    background-color: rgb(82, 82, 82);
    color: rgb(170, 255, 73);
    font-size: medium;
}

a:link {    
  text-decoration: underline;
  color: rgb(0, 255, 106);

}
a:visited {
  color: rgb(112, 214, 16);
}
a:hover {
  color: rgb(57, 68, 37);
}





/*side-bar*/

.side-bar {
  background-image: url(../images/assets/bgcrature1.png);
  background-repeat: repeat-y;
  background-position: right;
  position: fixed;
  top: 0; left: 0;
  width: 200px;
  background-color: rgb(255, 167, 23);
  padding: 20px;
  height: 100vh;
  z-index: 1100;
  overflow-y: auto;
  scrollbar-color: rgb(169, 74, 14) transparent;
  transition: all .2s ease-in-out;
}

.sb-text{
    background-color: rgb(255, 234, 200);
    padding: 20px;
    border-radius: 20px;
}

.sb-box{
  color: rgb(127, 132, 127);
  background-color: rgb(198, 228, 63);
  border-radius: 5px;
  padding: 1px;
  padding-left: 10px;
}

.side-bar a{
  color: rgb(201, 202, 189);
  background-color: black;
  padding: 4px;
  text-decoration: none;
}

.side-bar a:hover{
  color: rgb(90, 207, 100);
}


/*buttons*/

.button {
    margin-bottom: 3px;
}


button:hover{
    background-color: rgb(0, 0, 0);
    color: rgb(255, 167, 23);
    cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important
} 

.mnstrs{
  background-color: brown;
  color: aliceblue;
}

.warren{
  background-color: rgb(25, 157, 102);
  color: rgb(247, 228, 160);
}
.sleepy{
  background-color: rgb(255, 107, 152);
  color: rgb(50, 69, 174);
}
.folkwrld{
  background-color: rgb(24, 27, 104);
  color: rgb(255, 251, 40);
}

.is-checked {
  background-color: rgb(0, 0, 0);
  color: rgb(226, 211, 186);
}

/* hamburger & nav & go home */

#side-menu{
   position: fixed;
   top:20px; left:20px;
   height: 50px;
   width: 50px;
   line-height: 50px;
   text-align: center;
   background-color: rgb(209, 255, 207);
   color:rgb(0, 0, 0);
   
   font-size: 25px;
   z-index: 1200;
   display: none;
}

#nav{
  position: static;
  text-align: center;
  z-index: 900;
  color: rgb(0, 0, 0);
}

#home{
    position: fixed;
    top:20px; right:20px;
    background-color: rgb(201, 202, 189);
    z-index: 900;
}

#home a,#nav a{
    color: rgb(102, 125, 83);
}

#home a:hover,#nav a:hover {
  color: rgb(214, 120, 16);
}

/*gallery*/

.gallery{
  padding:20px;
   padding-left: 230px;
   max-width: 1500px;
}

.gallery .grid-item {
  margin: 5px;
  max-width: 300px;
  
}

.gallery .grid-item img{
  max-width: 300px;
  border: 2px solid rgb(0, 0, 0);
}

.gallery .grid img:hover{
  filter: brightness(85%);
   transform: scale(.99);
   transition: all .2s ease-in-out;
   cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important
}

.gallery .grid-item p{
    margin-top: 0px;
    font-size: 12px;
    text-align: left;
    background-color: rgb(255, 255, 255);
    padding: 2px;
}


/* lightbox */
.image-popup{
   position: fixed;
   top:0; left:0;
   z-index: 1200;
   background-color: var(--dark-bg);
   height: 100vh;
   width: 100%;
   display: none;
   align-items: center;
   justify-content: center;
   padding:100px 20px;
   overflow-y: scroll;
   opacity: 1;
    animation: fade 0.2s linear;
}

.image-popup img{
   max-width: 90vw;
   max-height: 90vh;
   cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important;
}

/* comics */

.comic-containera{
   max-width: 1500px;
}

.comic-display{
  background-color: rgb(227, 227, 227);
  padding: 5px;
  height: 200px;
}

.comic-display p{
  color: rgb(102, 125, 83);
}

.comic-display a{
  color: black;
  font-family: 'ToonatorFont';
  font-size: larger;
  font-weight: bold;
}

.comic-display img{
  float: left;
  margin: 10px;
}


.comic-containerb{
  padding:20px;
   max-width: 1500px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: stretch;
}

/*.comic-container{
  padding:20px;
   max-width: 1500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: start;
}*/


.comic-box{
  border: solid black 4px;
  width: 200px;
  text-align: left;
  padding: 5px;
  background-color: rgb(227, 227, 227);
  margin-bottom: 10px;
}

.comic-box p{
  color: rgb(102, 125, 83);
}

.comic-box img{
  display: flex;
  justify-self: center;
}

.comic-box img:hover{
  transform: rotate(1deg) scale(.98);
   transition: all .3s ease-in-out;
   cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important
}

.comic-box:hover{
  filter: brightness(80%) saturate(30%);
   transition: all .3s ease-in-out;
}



.comic-container .grid-item{
  max-width: min-content;
  border: solid black 4px;
  padding: 0px;
  margin-bottom: 10px;
  background-color: rgb(227, 227, 227);
}

.comic-container .grid-item img:hover{
   filter: brightness(80%) saturate(80%);
   transition: all .2s ease-in-out;
   cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important
}

.comic-container .grid-item img{
    height: 200px;
    max-width: 63vw;
 }

 .comic-container .grid-item p{
  margin: 6px;
  color: rgb(127, 132, 127);
 }


/* Videos */

.video-box{
  max-width: 600px;
  background-color: rgb(227, 227, 227);
  border-radius: 8px;
  margin: 10px;
  padding: 20px ;
  color: rgb(127, 132, 127);
}

.video-box h2{
  padding-bottom: 0px;
  margin-bottom: 0px;
  color: rgb(0, 0, 0);
}

.video-box .date{
  margin-top: 4px;
}

 .video-box iframe{
  max-width: 60vw;
  border:solid 4px black ;
 }

 
.vidsection{
  padding-right: 30px;
  display: inline-block;
  max-width: 640px;
}
.galleryb{
  display: inline-block;
  max-width: 580px;
  position: absolute;
  top: 50px;
}



/* Back to top btn */

#TopBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border:solid 3px rgb(201, 202, 189);
  outline: none;
  background-color: rgb(127, 132, 127);
  cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important;
  padding: 7px;
  border-radius: 5px;
}

#TopBtn:hover {
  background-color: rgb(169, 74, 14);
}



@keyframes fade {
  0% { opacity: 0 }
  100% { opacity: 1 }
}


/* media quaries */

@media(max-width:1459px){
  .galleryb{
    display: block;
    position: static;
  }
}


@media(max-width:700px){
  #side-menu{
    display: inline-block;
  }

  #side-menu.fa-times{
    left:300px
  }

  .side-bar {
    left: -350px;
  }

  .side-bar.active{
    box-shadow: 0 0 0 100vw var(--dark-bg);
    left: 0;
  }

  .gallery{
    padding-left: 20px;
  }

  .comic-container{
    padding-left: 20px;
  }

 .video-box iframe{
  max-width: 75vw;
 }


 .vidsection{
  max-width: fit-content;
 }

}