body,html {
  margin:0;
  padding:0;
}

body{
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Merriweather';
  background-image: url("ui/background_transparent.png"), linear-gradient(0deg, #c0b2ad 0%, rgb(230, 195, 168) 40%, #ebddc6 100%);
}

/* GENERAL */
b{color:#c4882e;text-shadow: 0 0 3px #9f915096;}
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; }

/* NAVIGATION BUTTONS */
.screen-button{
  position: fixed;
  bottom: 2vh;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  opacity: 0%; animation: fadeInAnimation ease 1s;animation-delay: 3.75s;animation-iteration-count: 1;animation-fill-mode: forwards;
}

.screen-button img{
  width: 30px;
  scale: 1;
  transition: 0.3s;
  filter: brightness(80%) saturate(140%);
  -webkit-filter: drop-shadow(0px 0px 5px white);
  filter: drop-shadow(0px 0px 5px white);
}

.screen-button img:hover{
  scale: 1.2;
  cursor: pointer;
}

#top-button{right: 10vh;}
#bottom-button{right: 6vh;}
#menu-button{right: 2vh;}

#top-button img{
  width: 30px;
  transform: rotate(180deg);
}

.menupopup {
  display: none;
}

#menu{
  top: 5vh;
  padding-bottom: 5vh;
}

#logo img{
  width: 17.5vw;
}

#logo img:hover{
  scale: 1;
  cursor: default;
}

/* LOADING */

#loading-screen{
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #a88456;
  z-index: 90;
  animation: fadeOutAnimation ease 1s;animation-delay: 2.25s;animation-iteration-count: 1;animation-fill-mode: forwards;
}

#loading-logo{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  top: 35%;
  z-index: 100;
  animation: fadeOutAnimation ease 0.5s;animation-delay: 25s;animation-iteration-count: 1;animation-fill-mode: forwards;
}

#loading-logo img{
  width: 100%;
}

#loading-gear{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -44vh;
  width: 100%;
  z-index: -5;
  animation: fadeOutAnimation ease 0.5s;animation-delay: 25s;animation-iteration-count: 1;animation-fill-mode: forwards;
  animation: rotation 12s infinite linear;
}

#loading-gear img{
  width: 100%;
}

/* MODAL */

/* Close button */

.close {
  position: absolute;
  top: 1em;
  right: 1em;
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

.close img{
  width: 50px;
}

.close:hover, .close:focus {
  cursor: pointer;
}

/* Hide the slides by default */
.imgpopup {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: fixed;
  top: 45%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  -webkit-user-select: none; user-select: none;
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

.prev img, .next img{
  max-width: 50px;
}

/* Position the "next button" to the right */
.next {
  right: 20vw;
  transform: rotate(-90deg);
}

.prev {
  left: 20vw;
  transform: rotate(90deg);
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  padding-top: 2vh;
  max-width: 1200px;
  text-align: center;
  font-size: 1em;
  color:white;
  z-index: 5;
}

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(43, 42, 42, 0.952);
  -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  z-index: 5;
}

.modal-content img{
  margin-left: auto; margin-right: auto;
  padding: 10px;
}

.slides{
  margin-bottom: 1em;
  opacity: 0.5;
  animation: fadeInAnimation ease 1s;animation-delay: 0s;animation-iteration-count: 1;animation-fill-mode: forwards;
}

.solo-img, .double-img{ /* For setting the gear background */
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(ui/background_gear.png);
  background-position-y: 70%;
  height: 70vh;
  margin-bottom: 2em;
}

.modal-img{
  height: 70vh;
  display: block;
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.modal-img1{
  display: inline-block;
  position: relative;
  height: 70vh;
  margin-bottom: 1em;
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.modal-img2{
  display: inline-block;
  position: relative;
  height: 70vh;
  margin-bottom: 1em;
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.chibi-img{
  display: block;
  position: relative;
  width: 20vh;
  -webkit-filter: drop-shadow(-5px -5px 5px rgba(0, 0, 0, 0.25)); filter: drop-shadow(-5px -5px 5px rgba(0, 0, 0, 0.25));
}

.chibi-img img{
  width: 100%;
}

.solo-img .chibi-img{
  top: -35vh;
  left: 10vw;
}

.double-img .chibi-img{
  top: -35vh;
  left: 0vw;
}

.modal-title{
    color: #d1cfcc;
    background: linear-gradient(180deg, #9E7642 0%, #a88456 49%);
    width: 100%;
    padding-top:0.5em;
    padding-bottom:0.5em;
    border-top-left-radius: 5px;
    font-weight:100;
    font-size: 1.5em;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.chara-title{
    color: white;
    font-weight: 1000;
    display: inline-block;
}

.comment{
    padding: 0.8em;
    font-size: 1em;
    font-style: italic;
}

.comment a{
  color: #498099;
}

.modal-textbox{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0.5em;
    background-color: #25365aa9;
    background-image: url(ui/overlay.png);
    border-style: double;
    border-width: 4px;
    border-color: #A88456;
    width: 80%;
    color: white;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

/* ARTIST LINKS */

.button{
  font-size: 1em;
  font-variant: small-caps;
  color: white;
  text-shadow: 0 0 5px #00000096;
  height: 100px;
  width: fit-content;
  padding: 8px;
  margin-left: 5px;
  margin-right: 5px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.button a:link, a:visited, a:hover, a:active{
  color: white;
  text-decoration: none;
}

.soclink-box{
  text-align: center;
}

.soclink{
  margin: 0.2em;
  border: double #a88456 4px;
  border-radius: 10px;
  background-color: #a88556;
  background-image: url(ui/overlay.png), linear-gradient(180deg, rgba(129, 93, 43, 0.63) 0%, #a88556b7 49%);;
  color: white;
  font-size: 0.7em;
  padding: 0.8em;
  min-width: 10em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
  display: inline-block;
}

.soclink:hover{
  background-color: #7D1D22;
}

.instagram::before{content:url("ui/icon_insta.png");}
.twitter::before{content:url("ui/icon_twitter.png");}
.tumblr::before{content:url("ui/icon_tumblr.png");}
.website::before{content:url("ui/icon_link.png")}

#menu-links .soclink {
  width: 12em;
  font-size: 1em;
  padding: 1em;
}

#link-links .soclink {
  width: 12em;
  font-size: 1em;
  padding: 1em;
  background-color: #7D1D22;
}

#link-links .soclink:hover {
  background-color: #86484b;
}

.artist-list .soclink{
  margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px;
  border: none;
  background: none;
  color: white;
  font-size: 0.7em;
  padding: 0.8em;
  width: auto;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
  display: inline-block;
  padding-top: 0px; padding-bottom: 0px;
}

#artists-parent{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.artist{
  background-color: #4980994b;
  border-style: solid;
  border-width: 1px;
  border-color: #a88456;
  color: #d1ac7c;;
  padding: 1em;
  margin: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* CONTENT BOXES */

.content{
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#main-content{
  text-align: center;
  width: fit-content;
  margin-bottom: 50vh;
}

#chibi-content{
  text-align: center;
  width: 75%;
  margin-bottom: 10vh;
}

/* MAIN ART */

.chara-container {
  display: grid;
  grid-template-columns: repeat(15, 5vw);
  grid-template-rows: repeat(7, 4.8em);
  margin-left: auto;
  margin-right: auto;
}

.chara-item, .chara-item2 {
  position: relative;
  cursor: pointer;
}

.chara-blank {
  position: relative;
}

.chara-item img, .chara-item2 img {
  width: 11.5vw;
  pointer-events: auto;
  position: absolute;
  z-index: 2;
  -webkit-transform: scale(1); transform: scale(1);
  -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
}

.chara-item:hover img, .chara-item2:hover img{
  -webkit-transform: scale(1.1); transform: scale(1.1);
  -webkit-filter: drop-shadow(0px 0px 5px #ec9718); filter: drop-shadow(0px 0px 5px #ec9718);
}

.chara-container > div:nth-child(-n+15) {grid-row: 1; animation: fadeInAnimation ease 1s; animation-delay: 2s; animation-iteration-count: 1; animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+16):nth-child(-n+30) {grid-row: 2;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 2.25s;animation-iteration-count: 1;animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+31):nth-child(-n+45) {grid-row: 3;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 2.5s;animation-iteration-count: 1;animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+46):nth-child(-n+60) {grid-row: 4;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 2.75s;animation-iteration-count: 1;animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+61):nth-child(-n+75) {grid-row: 5;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 3s;animation-iteration-count: 1;animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+76):nth-child(-n+90) {grid-row: 6;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 3.25s;animation-iteration-count: 1;animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+91):nth-child(-n+105) {grid-row: 7;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 3.5s;animation-iteration-count: 1;animation-fill-mode: forwards;}
.chara-container > div:nth-child(n+106):nth-child(-n+120) {grid-row: 8;opacity: 0%;animation: fadeInAnimation ease 1s;animation-delay: 3.75s;animation-iteration-count: 1;animation-fill-mode: forwards;}

/* CHIBI */

.chibi-item {
  display: inline;
}

.chibi-item img{
  width: 8vw;
  -webkit-transform: scale(1); transform: scale(1);
  -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25)); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
}

.chibi-item img:hover{
  -webkit-transform: scale(1.1); transform: scale(1.1);
  -webkit-filter: drop-shadow(0px 0px 5px #ec9718); filter: drop-shadow(0px 0px 5px #ec9718);
  cursor: pointer;
}

/* CATS */
#wagahai {
  background-color: #4980994b;
  border-style: solid;
  border-width: 1px;
  border-color: #a88456;
  color: #d1ac7c;;
  padding: 1em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#congrats {
  display: none;
}

.secret-kitty{
  scale: 1;
  transition: 0.3s ease-in-out;
}

.secret-kitty:hover{
  scale: 1.2;
  cursor: pointer;
}

.secret-kitty img{
  width: 50px;
}

.cats {
  position: absolute;
  top: 1em;
  left: 1em;
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

.cat-icon {
  display: none;
  padding: none;
  margin: none;
}

.cats img{
  width: 30px;
  padding: none;
  margin: none;
}

.cats:hover, .cats:focus {
  cursor: pointer;
}

.modal-cat {
  display: none;
}

.mobile-only{
display: none;
}

@media (min-width: 1340px) {
  .modal-content {
    width: 60vw;
  }

  .slides{
    overflow-y: hidden;
  }

  .chara-item img, .chara-item2 img {
    left: -5vw;
    }

    .modal-img1{
      left: 70px;
    }
    
    .modal-img2{
      left: -70px;
    }

    /* INDIVIDUAL SPACING: DESKTOP */
    #lazyemma710{top: -20px}
    #eightfivesix{scale: 1.1;top: -8px}
    #dewilacie{top: -40px;}
    #hoshidensha{left: 45px;}
    #m{left: -10px; top: 10px;}
    #dragonofshades{top:-20px;left:-30px}
    #fuzzylily1{left: 20px;top: -25px;}
    #shu{left: 20px}
    #ace{left: 40px;}
    #snivy{top: 35px;}
    #fenne{top:10px;left: 30px;scale: 1.15;}
    #mina{left: -5px;}
    #shifting-fixations{top: 20px;left:-20px;}
    #ajihaew{scale: 1.1; top: -40px;}
    #spilledte{top: -10px;}
    #qopphy{left: 20px;}
    #ryth{scale: 1.1;}
    #cocoreaux{left: -20px;}
    #agi{left: 20px;top: -15px;}
    #valuabledoodles{top: -10px;}
    #black{left: -10px;}
    #lucidmoone{scale: 1.05;}
    #handsome_kakigori{top: 10px;scale: 1.1;}
    #masa{top: 30px;}
}

@media (min-width: 810px) and (max-width: 1340px)  {
  #loading-screen{
    background-color: white;
  }

  #logo img{
    display: none;
  }

  #loading-gear{
    display: none;
  }
  
  .modal-content {
    width: 80vw;
  }
  
  .modal-textbox{
    width: 95%;
  }

  .next {
    right: 5vw;
    transform: rotate(-90deg);
  }
  
  .prev {
    left: 5vw;
    transform: rotate(90deg);
  }

      .solo-img .chibi-img{
        top: -35vh;
        left: 20vw;
      }
      
      .double-img .chibi-img{
        top: -115vh;
        left: 20vw;
      }

      .chara-item img, .chara-item2 img {
        left: -5vw;
        }

      /* INDIVIDUAL SPACING: DESKTOP */
      #lazyemma710{top: -20px}
      #eightfivesix{scale: 1.1;top: -8px}
      #dewilacie{top: -40px;}
      #hoshidensha{left: 45px;}
      #m{left: -20px;}
      #dragonofshades{top:-20px;left:-40px}
      #fuzzylily1{left: 20px;top: -25px;}
      #shu{left: 20px}
      #snivy{top: 35px;}
      #fenne{top:10px;left: 30px;scale: 1.15;}
      #mina{left: -5px;}
      #shifting-fixations{top: 20px;left:-20px;}
      #spilledte{top: -10px;}
      #qopphy{left: 20px;}
      #ryth{scale: 1.1;}
      #cocoreaux{left: -20px;}
      #agi{left: 20px;top: -15px;}
      #valuabledoodles{top: -10px;}
      #lucidmoone{scale: 1.05;}
      #handsome_kakigori{top: 10px;scale: 1.1;}
      #masa{top: 30px;}
}



@media (max-width: 810px) {

  .desktop-only{display: none;}
  .mobile-only{display: block;}

  #loading-screen{
    background-color: white;
  }

  #logo img{
    display: none;
  }

  #loading-gear{
    display: none;
  }
  
  #menu{
    top: 0vh;
  }

  #menu-links .soclink {
    width: 75%;
  }

  #link-links .soclink {
    width: 80%;
  }

  #artists-parent{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

  .artist-list .soclink{
    display: inline-block;
  }

  .artist{
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }

  .next {
    right: 1vw;
    transform: rotate(-90deg);
  }
  
  .prev {
    left: 1vw;
    transform: rotate(90deg);
  }

  .prev img, .next img{
    max-width: 30px;
  }

  .modal-content {
    width: 98vw;
  }
  
  .modal-textbox{
    width: 95%;
  }

  .solo-img, .double-img{ /* For setting the gear background */
    background-size: 100%;
    background-position-y: 20%;
  }

  .double-img{
    margin-bottom: 80vh;
  }

  .solo-img .chibi-img{
    top: -35vh;
    left: 20vw;
  }
  
  .double-img .chibi-img{
    top: -115vh;
    left: 20vw;
  }

  .chara-container {
    grid-template-columns: repeat(7, 12vw);
    grid-template-rows: repeat(15, 15vh);
}

  .chara-item img, .chara-item2 img {
    width: 45vw; /*move shit to the left later*/
    left: -16vw;
  }

  .chara-container > div:nth-child(-n+7) {grid-row: 1;}
  .chara-container > div:nth-child(n+8):nth-child(-n+14) {grid-row: 2;}
  .chara-container > div:nth-child(n+15):nth-child(-n+21) {grid-row: 3;}
  .chara-container > div:nth-child(n+22):nth-child(-n+28) {grid-row: 4;}
  .chara-container > div:nth-child(n+29):nth-child(-n+35) {grid-row: 5;}
  .chara-container > div:nth-child(n+36):nth-child(-n+42) {grid-row: 6;}
  .chara-container > div:nth-child(n+43):nth-child(-n+49) {grid-row: 7;}
  .chara-container > div:nth-child(n+50):nth-child(-n+56) {grid-row: 8;}
  .chara-container > div:nth-child(n+57):nth-child(-n+63) {grid-row: 9;}
  .chara-container > div:nth-child(n+64):nth-child(-n+70) {grid-row: 10;}
  .chara-container > div:nth-child(n+71):nth-child(-n+77) {grid-row: 11;}
  .chara-container > div:nth-child(n+78):nth-child(-n+84) {grid-row: 12;}
  .chara-container > div:nth-child(n+85):nth-child(-n+91) {grid-row: 13;}
  .chara-container > div:nth-child(n+92):nth-child(-n+98) {grid-row: 14;}
  .chara-container > div:nth-child(n+99):nth-child(-n+105) {grid-row: 15;}
  .chara-container > div:nth-child(n+106):nth-child(-n+112) {grid-row: 16;}
  
  #chibi-content{
    width: 95%;
  }
  .chibi-item img{
    width: 27vw;
  }
  
  .cats{
    width: 20px;
  }
  .cats img{
    width: 20px;
  }

    /* INDIVIDUAL SPACING: MOBILE */
    #wanyuu{left:10px;}
    #lazyemma710{top: -20px}
    #eightfivesix{scale: 1.1;top: -8px}
    #dewilacie{top: -40px;}
    #hoshidensha{left: 45px;}
    #m{left: -20px;}
    #dragonofshades{top:-20px;}
    #fuzzylily1{left: 20px;top: -25px;}
    #shu{left: 30px}
    #snivy{top: 35px;}
    #fenne{top:10px;left: 30px;scale: 1.15;}
    #mina{left: -5px;}
    #shifting-fixations{top: 20px;left:-20px;}
    #ajihaew{scale: 1.1;top: -20px;}
    #spilledte{top: -20px;}
    #qopphy{left: 20px;}
    #ryth{scale: 1.1;}
    #cocoreaux{left: 0px;}
    #agi{left: 20px;}
    #valuabledoodles{top: -10px;}
    #lucidmoone{scale: 1.05;left:20px;}
    #handsome_kakigori{top: 20px;left:-10px;scale: 1.1;}
    #masa{left:10px;top: 30px;}  
}

/* HOVER */
#lazyemma710 img:hover{content: url("art/lazyemma710-2.webp");}
#glittergoats img:hover{content: url("art/glittergoats-2.webp");}
#heavendraven img:hover{content: url("art/heavendraven-2.webp")}
#rai img:hover{content: url("art/rai-2.webp");}
#erin img:hover{content: url("art/03rin-2.webp");}
#kovv img:hover{content: url("art/kovv-2.webp");}
#cocoreaux img:hover{content: url("art/cocoreaux-2.webp");}
#ruti img:hover{content: url("art/ruti-2.webp");}
#black img:hover{content: url("art/black-2.webp");}
#spiderfriend img:hover{content: url("art/spiderfriend-2.webp");}

/* ANIMATIONS */
@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}

@keyframes fadeOutAnimation {
  0% {
      opacity: 1;
  }
  95%{
    opacity: 0;
  }
  100% {
    opacity: 0;
      z-index: -100;
   }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}