/* This css page is for css that affects the entire site, or at least most of it. things like backgrounds and fonts. */

/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind+Guntur:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karma:wght@300;400;500;600;700&display=swap');



/* GENERAL */

body {
  background:url(https://cdna.artstation.com/p/marketplace/presentation_assets/002/537/074/large/file.jpg?1679216789)!important;
  box-shadow:inset 120em 0em rgba(39, 27, 71, 0.7);
  height:auto;
}

a {
  text-decoration:none!important;
}

.main {
  padding-top:40px;
}


/* SIDEBAR */

#sidebar {
  width:75px;
  height:400px;
  margin-top:60px;
  padding:20px 0px;
  align-items:center;
  background:#060515;
  border-radius:25px;
  border:3px solid #1b1332;
  position: -webkit-sticky;
  position:sticky;
  top:5%;
}

.nav-item {
  border-radius:100%;
  width:50px;
  height:50px;
  padding-top:12px;
  margin-bottom:10px;
  background:#1b1332;
  color:#d2d9ea;
  
  transition:0.5s ease-in-out;
}

.nav-item span.hide {
  opacity:0;
  font-size:80%;
  transition-delay:1.5s;
  padding-top:5px;
  transition:1s ease-in-out;
}

.nav-item:hover {
  background:#26366f;
  color:#d2d9ea;
  border-radius:10px;
  width:110px;
  padding-top:8px;
  padding-left:5px;
  padding-right:5px;
  transform:scale(1.1);
}

.nav-item:hover .hide {
    opacity:1!important;
}



/* HEADER */

.header {
  background:url(../header_eiv.png);
    background-size:cover;
  height:300px;
  width:280px!important;
  margin-bottom:-20px;
  z-index:2;
}


/* -- eiv tail animation -- */

@keyframes eiv-wag {
  0% {
    transform:rotate(0deg);
  }
  
  50% {
    transform:rotate(20deg);
  }
  
  100% {
    transform:rotate(0deg);
  }
}

.eiv-tail {
  background:url(../eiv_tail.png);
  background-size:contain;
  height:100px;
  width:83px;
  position:absolute;
  left:-18px;
  top:220px;
  animation-duration: 3s;
  animation-name: eiv-wag;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
}


#logo {
  background:url(../logo.png);
  background-size:cover;
  height:120px;
  width:150px;
  margin-top:-12px;
  transition:1s ease-in-out;
}

#logo:hover {
  transform:scale(1.1);
}

#headerbg {
  border-radius:30px 5px 5px 5px;
  height:90px;
  background:linear-gradient(to right, #060515 0%, #1b1332 50%, rgba(0,0,0,0) 100%);
  border:0;
  z-index:3;
}

#footerbg {
  border-radius:5px 5px 30px 5px;
  height:90px;
  background:linear-gradient(to right, rgba(0,0,0,0) 0%, #1b1332 50%, #060515 100%);
  border:0;
  z-index:3;
  margin-top:30px;
}


/* MUSIC PLAYER */

.buttondiv {
  cursor: pointer;
  position: fixed;
  height: 35px;
  top: 15px;
  width: 45px;
  right: 5px;
  color: white;
  z-index: 1;
}

.autoplayer button {
  background: #060515;
  border-radius:100%;
  margin-top:6px;
  cursor: pointer;
  color: white;
  border: none;
  padding: 2px 5px 1px 5px;
  font-size: 18px;
  position: fixed;
  height: 45px;
  top: 10px;
  width: 45px;
  right: 5px;
  order:2;
}

.autoplayer a {
  background:linear-gradient(to right, #060515 0%, #1b1332 100%);
  width:250px;
  border-radius:20px;
  color: white;
  text-decoration: none;
  cursor:help;
  padding: 5px 20px;
  position: fixed;
  font-size: 16px;
  top: 10px;
  z-index: 1;
  right: 50px;
  margin-right:10px;
  color: white;
  order:1;
  font-weight:300;
  color:#e8c072;
  font-family:'PT Sans', cursive;
}

.autoplayer span {
  font-weight:600;
  font-family:'PT Sans', cursive;
  letter-spacing:1px;
  color:#d97345;
}



/* MOBILE RESPONSIVENESS */

@media only screen and (max-width: 600px) {
  
  #sidebar {
    display:flex;
    flex-direction:row;
    width:400px;
    height:75px;
    padding-top:20px;
    justify-content:center;
    position:static;
  }
  
  #sidebar .nav-item {
    margin:0px 3px;
  }
  
  #logo {
    display:none;
  }
    
  .autoplayer {
    display:none;
  }
  
}