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

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

body {
    background-color: rgb(201, 202, 189);
    color: rgb(0, 0, 0);
    font-size: medium;
}

a:link {    
  text-decoration: underline;
  color: rgb(214, 120, 16);

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


a:hover{cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important} 
body,html{cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1113.cur),auto}


/*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, 167, 23);
}

/*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
} 

.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(255, 167, 23);
}

/* hamburger & go home */

#side-menu{
   position: fixed;
   top:20px; left:20px;
   height: 50px;
   width: 50px;
   line-height: 50px;
   text-align: center;
   background-color: rgb(255, 167, 23);
   color:rgb(0, 0, 0);
   cursor:url(https://cur.cursors-4u.net/games/gam-12/gam1109.cur),auto!important;
   font-size: 25px;
   z-index: 1200;
   display: none;
}

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

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

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

/*gallery*/

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

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

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

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

.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;
}

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


/* media quaries */

@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;
  }
}