/* Body styling */
body {
  background-image: url('../assets/images/resources/star_rain.gif');
  font-family: "Lucida Console", Courier, monospace;
  font-stretch: condensed;
  color: white;
  background-color: black;
}

.leftPanel{
  width: min-content;
  max-width: 15vw;
  margin: 0px;
  text-align: right;
}

#homeButton{
  background-color: #22bf2d;
  margin-right: 12px;
  font-weight: bold;
  color: #b2ff00;
}

#homeButton:hover{
  background-color: #cba1ff;
}

.clickable{
  cursor: pointer;
  text-decoration: underline;
}

.clickable:hover{
  color: #42FF00;
}

.navigator{
  z-index: 5;
}

/* Scrollbox styling */
.scrollbox {
  width: 88%;
  height: 60px;
  right: 200px;
  top: 20px;
  position: absolute;
  color: #42FF00;
  z-index: -1;
}


/* Initially hide the second image */
.folder img:nth-child(2) {
  display: none;
}

/* Keep the hover effect */
.folder:hover img:nth-child(1) {
  display: none;
}
.folder:hover img:nth-child(2) {
  display: inline-block;
}

/* When a folder is clicked, apply the open class */
.folder.open img:nth-child(1) {
  display: none;
}
.folder.open img:nth-child(2) {
  display: inline-block;
}


.change img:nth-child(2){display:none;}
.change:hover img:first-child{display:none;}
.change:hover img:nth-child(2){display:inline-block;}

.change:hover{
  cursor: pointer;
  text-decoration: underline;
}

.item{
  display: inline-block;
}

/* Social media link background colors */
.itchio { background-color: coral; }
.instagram { background-color: hotpink; }
.artstation { background-color: blue; }
.github { background-color: black; }
.soundcloud { background-color: orange; }
.youtube { background-color: red; }
.bluesky{ background-color: #00ccff;}
.bilibili{ background-color: #2978ff;}
.linkedin{ background-color: #0077b5;}
.tiktok{ background-color: #1c1e1e;}

/* Social media link states */
a:link, .social-link:link {
  color: paleturquoise
}

a:visited, .social-link:visited {
  color: whitesmoke;
}

a:hover, .social-link:hover {
  color: greenyellow;
}

/* General styling for social media links */
.social-link {
  margin: 10px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

.social-links {
  padding: 0;
  margin: 0px;
}

.social-links li {
  display: inline-block;
  margin: 10px;
}