@import url('https://fonts.googleapis.com/css?family=Cherry Bomb One|Itim|Coral Pixels|Special Elite|Silkscreen|Press Start 2P|Chicle|Sour Gummy|Jacquard 12|Cookie');


:root,
.theme-saturnia {
  --titlesize: 35px;

  --border: #463b3b;
  --buttons: #000;
  --text: #000;
  --header: #838C45;
  --hover: #463b3b;
  --hovert: #eee;
  --quotetxt: #000;
  --quote: "i want to burn through your chest to taste the smoke from your lungs...";
  --font: Special Elite;
  --hfont: 15px;
  --textsize: 20px;
}
/* Placebo */
.theme-placebo {
  --titlesize: 35px;
  --border: #fc0230;
  --buttons: #fff;
  --text: #fff;
  --header: #F16E87;
  --hover:#fc0230;
  --quotetxt: #fff;
  --hovert: #fff;
  --quote: "Blood thick as honey, sweet like a cavity...";
  --font: Cherry Bomb One;
  --textsize: 28px;
  --hfont: 18px;
}

/* Tea Time */
.theme-teatime {
  --titlesize: 35px;
  --border: #E86467;
  --buttons: #fff;
  --text: #fff;
  --quotetxt: #fff;
  --header: #D7E59F;
  --hover:#E86467;
  --hovert: #fff;
  --font: Itim;
  --quote: "To be a tiny critter on their way for picnic tea...";
  --textsize: 28px;
  --hfont: 18px;
}

/* Wizard */
.theme-wizard {
  --titlesize: 35px;
  --border: #249cff;
  --buttons:#fff ;
  --text: #fff;
  --header: #014478;
  --hover:#249cff;
  --quotetxt: #DCA854;
  --hovert: #fff;
  --quote: "Blow Shit Up...Blame the Apprentice";
  --font: "Jacquard 12";
  --textsize: 30px;
  --hfont: 20px;
}

/* Mutt */
.theme-mutt {
  --titlesize: 30px;
  --border: #87FF62;
  --buttons: #6363FF;
  --text:   #0D0F11;
  --header: #FE9E62;
  --hover:#87FF62;
  --quotetxt: #62BEFF;
  --hovert: #fff;
  --quote: "ROFL XP";
  --font: Sour Gummy;
  --textsize: 25px;
  --hfont: 16px;
}

/* Woods */
.theme-woods {
  --titlesize: 30px;
  --border: #F19A51;
   --buttons:#301906;
  --text: #301906;
  --quotetxt: #301906;
  --header: #D57B2F;
  --hover:#F19A51;
   --hovert: #fff;
  --quote: "Wander through the woods and get lost with me...";
  --font: Chicle;
  --textsize: 24px;
  --hfont: 16px;
}

/* Eclipse */
.theme-eclipse {
  --titlesize: 40px;
  --border: #0024FF;
  --buttons:#FEBE31;
  --text: #FEBE31;
  --quotetxt: #FEBE31;
  --header: #000044;
  --hover:#0024FF;
   --hovert: #fff;
  --quote: "Starlight watches in silence...";
  --font: Cookie;
  --textsize: 38px;
  --hfont: 26px;
}

/* Silly */
.theme-siwwy {
   --titlesize: 35px;

  --border: #463b3b;
  --buttons: #000;
  --text: #000;
  --header: #838C45;
  --hover: #463b3b;
  --hovert: #eee;
  --quotetxt: #000;
  --quote: "blurgh";
  --font: "Silkscreen";
  --hfont: 15px;
  --textsize: 20px;
}


body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: transparent;
  color: var(--text);
  transition: background 0.4s, color 0.4s;
  cursor: crosshair;
  overflow-x: hidden;
}

header {
  display: flex;
  flex-direction: column;   
  align-items: center;
  padding: 15px 10px;       
  background: var(--header);
  position: sticky;
  top: 0;
  z-index: 99999;
}


.site-title {
  font-family: var(--font);
  font-weight: bold;
  font-size: var(--titlesize) ; 
  color: var(--quotetxt);
  margin: 0 0 0px 0;        
  text-align: center;
}

.theme-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}



.theme-btn {
  font-size: 20px;
  padding: 8px 8px;
  cursor: pointer;
  background: var(--header);
  border: var(--header);
  color: var( --buttons);
  transition: transform 0.2s;
}

.theme-btn:hover {
  transform: scale(1.1);
  background: var(--hover);
  color: var(--hovert);
  border-radius: 8px;
}


.hover-wrap {
  position: relative;
  display: inline-block;
}

.hover-label {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hover);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--hovert);
  font-family: var(--font);
  font-size: var(--hfont);
  font-weight: bold;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  border: 1px solid var(--border);
  z-index: 100000;   
}

.hover-wrap:hover .hover-label {
  opacity: 1;
}


.bar {
  width: 100%;
  padding: 8px 8px 20px;
  background: var(--header);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10; 
}


.quote {
  flex: 1;
  text-align: center;
  font-family: var(--font);
  transition: opacity 0.3s;
}

.quote::before {
  content: var(--quote);
  font-size: var(--textsize);
  color: var(--quotetxt);
  opacity: 0.9;
}
.shuffle-btn {
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  border: 2px solid var(--header);
  background: var(--header);   
  color: var(--buttons);       
  border-radius: 6px;
  transition: transform 0.2s, background 0.2s;
  margin-right: auto;
}

.shuffle-btn:hover {
  transform: scale(1.1);
  background: var(--header);  
  color: var(--text);
}
.shuffle-btn  .hover-label {
  left: 90%;   
}




#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--header);          
  border: 2px solid var(--header);    
  border-radius: 50%;                 
  padding: 10px 13px;
  font-size: 19px;
  color: var(--buttons);                
  cursor: pointer;
  display: none;
  transition: opacity 0.3s, transform 0.2s, background 0.2s;
  z-index: 999999;
}

#backToTop:hover {
  transform: scale(1.1);
  background: var(--hover);         
  color: var(--hovert);               
}


#backToTop .hover-label {
  top: -30px;
  left: 10%;
}

#grid {
  column-count: 4;
  column-gap: 12px;
  padding: 20px;
  margin-top: 10px;
}

@media (max-width: 1100px) {
  #grid { column-count: 3; }
}

@media (max-width: 800px) {
  #grid { column-count: 2; }
}

@media (max-width: 500px) {
  #grid { column-count: 1; }
}


.card {
  position: relative; 
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.card:hover img {
  opacity: 0.7;
}


.card a {
  position: absolute;   
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: var(--header);
  color: white;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}

.card:hover a {
  opacity: 1;
}



* {
  scrollbar-width: thin;
  scrollbar-color: var(--header)  var(--hover);
}