/* CUSTOM CSS!!! */

/* MAKES LIST META STUFF ON THE SAME LINE! */
/* TODO: FIND A BETTER HOME FOR THIS */
.post-meta {
  display: inline-block;
}

.post-date,
.post-tags {
  display: inline-block;
}

/* Animated logo!!! */
.header__logo::after {
	/* TODO: FIX */
		background: repeating-linear-gradient(135deg, $accent, $accent, 8px, transparent 0, transparent 16px);
		background-size: 200% 200%; /* Double the width for smooth shifting */
	  animation: logo-animation 70s linear infinite;
}
@keyframes logo-animation {
	  0% {
		      background-position: 98.5% 0; /* Start position */
    /*clip-path: inset(0 90% 0 0); /* Hide the right side */
  }
  100% {
    /*clip-path: inset(0 0 0 0); /* Reveal the entire gradient */
	    background-position: 0 98.5%; /* End position (shifted) */
  }
}
@keyframes load-animation {
	  0% {
    clip-path: inset(0 90% 0 0); /* Hide the right side */
  }
  100% {
    clip-path: inset(0 0 0 0); /* Reveal the entire gradient */
  }
}


/* Bouncy buttns!!!! */
/*
@keyframes border-pulse {
  0% {
    border-color: $accent; 
	transform: scale(1);
  }
  50% {
    border-color: #FF3030; 
	transform: scale(1.02);
  }
  100% {
    border-color: $accent;
	transform: scale(1);
  }
}
.button:hover {
  animation: border-pulse 1s infinite;
}
*/


/* BACKGROUND VIGNETTE!!! */
/*
body {
  background-color: $background;
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 85%;
  background: linear-gradient(to left, transparent, black);
  z-index: -1; 
  opacity: 0.5; 
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85%;
  right: 0;
  background: linear-gradient(to right, transparent, black);
  z-index: -1; 
  opacity: 0.5;
}
*/



/* Animated gradient background!!! */
/*
body {
  background: linear-gradient(45deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
  background-size: 200% 200%;
  animation: pastel-rainbow 10s ease infinite;
  animation-direction: alternate;
}

@keyframes pastel-rainbow {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  100% {
    background-position: 0% 0%;
  }
}
*/



/* Box sections for text!!! */
.boxed-text {
  padding: 12px;
  border: 2px solid #666;
  display: inline-block; 
}

/* MILDER BOX!!!!! */
.faint-boxed-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px; 
  border: 2px dotted #555;
  display: inline-block; 
}



/* Blinking text!!! */
.blinking-text {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}


/* Alert text!!! */
.alert-text {
  animation: alert 1s ease infinite;
}
@keyframes alert {
  0% {
    color: white;
  }
  50% {
    color: red;
  }
  100% {
    color: white; 
  }
}



/* Aesthetic/Vaporwave text!!! */
.aesthetic-text {
  animation: color-change 4s infinite linear;
}

@keyframes color-change {
  0% {
    color: #ff00c1;
  }
  20% {
    color: #9600ff;
  }
  50% {
    color: #10b8ff;
  }
  80% {
    color: #00fff9;
  }
  100% {
    color: #ff00c1;
  }
}


/* Rainbow text!!! */
.gay-text {
  animation: rainbow 2s linear infinite;
}
@keyframes rainbow {
  0% {
    color: red;
  }
  14% {
    color: orange;
  }
  28% {
    color: yellow;
  }
  42% {
    color: lime;
  }
  57% {
    color: aqua;
  }
  71% {
    color: indigo;
  }
  85% {
    color: violet;
  }
  100% {
    color: red; 
  }
}

/* Hacker effect!!! */
@keyframes glitch {
   0% {
    clip-path: inset(0% 0% 100% 0%);
  }
  25% {
    clip-path: inset(20% 0% 60% 0%);
  }
  50% {
    clip-path: inset(30% 0% 30% 0%);
  }
  75% {
    clip-path: inset(60% 0% 20% 0%);
  }
  100% {
    clip-path: inset(100% 0% 0% 0%);
  }
}
.glitch {
  animation: glitch .1s infinite;
}

/* Glitchy mystery numbers!!! */
.random-numbers {
  animation: mystery-number-cycle 2s infinite;
}
@keyframes mystery-number-cycle {
  0%, 25% {
    content: "???";
  }
  25%, 50% {
    content: "24985";
  }
  50%, 75% {
    content: "720472";
  }
  75%, 100% {
    content: "273820";
  }
}





/* SHELF SHOWCASE!!! */
.shelf-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid with a minimum column width of 250px */
    gap: 20px; /* Space between grid items */
    padding: 20px;
}

.shelf-item {
    border: 2px solid #777;
    padding: 20px;
    text-align: center;
    background-color: #222;
}

.shelf-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px; /* Center image vertically */
}

/* Shelf headings and description */
.shelf-item h2 {
    font-size: 1.5rem;
    margin: 0;
}

.shelf-item p {
    font-size: 1rem;
    margin: 0;
}




/* CARD SHOWCASE!!! */

/* static/css/showcase.css */
.showcase-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers horizontally */
  padding: 8px; /* Add some padding around the showcase */
}

.showcase-element {
  background-color: rgba(255,255,255,0.05);
  position: relative;
  border: 4px solid #f55;
  padding: 32px;
  padding-top: 0px;
  margin: 8px;
  display: inline-block;
  box-sizing: border-box;
  margin-bottom: 16px; /* Adjust for spacing between elements */
  max-width: 69%; /* Elements won't exceed the container width */ 
}

.showcase-title {
  padding: 0px;
  font-size: 1.2rem;
  margin: 2px 0;
}

.showcase-title-cardstyle {
  /* Pokemon card style! */
  font-weight: bold;
  text-align: right;
}

.showcase-title::before {
  content: "";
  display: block;
  height: 54px; /* Border thickness... Maybe adjust */
  background-color: rgba(255,255,255,0.05); /* Border color */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.showcase-badge {
    position: absolute;
	height: 48px;
	width: 48px;
    top: 2px;
    left: 2px;
    z-index: 10; 
}

.showcase-image-container {
	/* Gradient background for images!!! */
  background: radial-gradient(at 50% 85%, #666, #111);
  border: 4px solid #555;
  display: inline-block;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.showcase-image {
  /* image-rendering: pixelated; */
  height: 256px;
  width: 256px;
  margin-left: auto;
  margin-right: auto;
  transform-origin: center bottom; /* Pin the scaling to the center of the bottom edge */
}

.showcase-pokemon-anims {
  animation: breathe 3.33s ease infinite;
}
@keyframes breathe {
  0% {
    transform: scale(1); /* Initial size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to the initial size */
  }
}
.showcase-pokemon-anims:hover {
  animation: wiggle 0.33s infinite ease-in-out;
}
@keyframes wiggle {
  0% {
    transform: rotate(-0.69deg);
  }
  50% {
    transform: rotate(0.69deg);
  }
  100% {
    transform: rotate(-0.69deg);
  }
}

.showcase-description {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 10px;
  
  border-color: rgba(255,255,255,0.05);
  border-style: dotted;
  border-width: 4px;
}

.showcase-attributes { 
  color: #aaa;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  max-width: 100%; /* Ensure it doesn't overflow its container */
  margin: 0 auto; /* Center the flexbox container itself */
  /* Optional: Add space between attributes */
  gap: 0px;
}

.attribute {
  /* Ensure attributes have equal width */
  flex: 0 0 calc(50% - 12px); /* Subtract half of the gap (5px) */
}


.showcase-content {

}

#floating-image {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000; /* Adjust the z-index if necessary */
    pointer-events: none; /* Prevent user interaction with the image */
}


/* Media query for smaller screens to make it a single column */
@media (max-width: 768px) {
  .showcase-element {
    max-width: 100%;
  }
}