body {
  background-color: white;
  color: black;
  font-family: Verdana;
  
  opacity: 1;
  transition: opacity 100ms ease;
}

.is-fading {
  opacity: 0;
}

/* Button styling */
a.btn {
  display: inline-block;
  background-color: #030303;
  color: #f5d142;
  font-size: 18px;
  padding: 12px 13px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
  transform-origin: center;
}
a.btn {
  position: relative;
  overflow: hidden;       /* ensures pseudo-element stays inside button */
}

a.btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://icantfindmysocks.neocities.org/bruno-afonseca-bruno-cracks-generator-gif-512-ezgif.com-gif-maker.gif');  /* transparent cracks overlay */
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

a.btn:hover::after {
  opacity: 1;             /* show cracks on hover */
}

a.btn:hover {
  transform: translateX(-50%) scale(1.05);  /* keeps centering while scaling */
  background-color: #242323;               /* keep your hover color */
}
  
a.btn:hover {
  background-color: #242323;       /* darker background */
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 0 20px #fff9c2;   /* yellow glow */
}

body {
  margin: 0; /* remove default margin */
  height: 100vh;
  position: relative; /* needed for absolute positioning inside body */
}

a.btn {
  position: absolute;
  top: 600px;   /* adjust Y position */
  left: 50%;
  transform: translateX(-50%);
}
.quote1 {
  position: absolute;
  top: 93%;          /* adjust placement */
  width: 100%;
  text-align: right;
  font-style: italic;
  color: #fff9c2;    /* matches your button color */
  font-size: 24px;
  text-shadow: 2px 2px 4px black;  /* gives it depth over dark background */
}
.quote2 {
  position: absolute;
  top: -2%;          /* adjust placement */
  width: 100%;
  text-align: left;
  font-style: italic;
  color: #fff9c2;    /* matches your button color */
  font-size: 24px;
  text-shadow: 2px 2px 4px black;  /* gives it depth over dark background */
}
.page {
  opacity: 1;
  transition: opacity 0.5s ease; /* fade duration */
  position: absolute; /* keep pages stacked */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page.hidden {
  opacity: 0;
  pointer-events: none; /* prevent clicks on hidden pages */
}
#sidebar {
  position: fixed;
  top: 100px;
  left: 0;
  width: 150px;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.9);
  display: flex;
  flex-direction: column;
  padding-top: 100px;
  box-sizing: border-box;
  z-index: 1000;
}
/* Sidebar section titles */
#sidebar h3 {
  margin: 10px 0 4px;   /* tighten space above/below */
  padding: 0;
  font-size: 14px;
  font-weight: bold;
  color: #f5d142;       /* yellow like your button */
}

/* Sidebar links */
#sidebar a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 6px 10px;   /* smaller padding */
  margin: 2px 0;       /* tighter vertical spacing */
  font-size: 13px;
}

#sidebar a:hover {
  background-color: transparent;   /* no box highlight */
  color: #f5d142;                  /* yellow text on hover */
  text-shadow: 0 0 8px #f5d142;    /* glowing text */
}
/* Dropdown container */
.dropdown {
  position: relative;
}

/* Button that shows shrines */
.dropdown-btn {
  display: block;
  color: white;
  text-decoration: none;
  padding: 6px 10px;
  margin: 2px 0;
  font-size: 13px;
  font-weight: bold;
}

/* Sub-pages (hidden by default) */
.dropdown-content {
  display: none;
  flex-direction: column;
  margin-left: 10px;   /* indents shrine links */
}

/* Show dropdown when hovering */
.dropdown:hover .dropdown-content {
  display: flex;
}

/* Style shrine links */
.dropdown-content a {
  color: #bbb;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 12px;
}

.dropdown-content a:hover {
  color: #f5d142;
  text-shadow: 0 0 6px #f5d142;
}
/* OpenSans-Light Font */
@font-face {
  font-family: 'OpenSansLight';
  src: url('fonts/OpenSans-Light.eot'); /* IE9 Compat Modes */
  src: url('fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/OpenSans-Light.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/OpenSans-Light.woff') format('woff'),   /* Modern Browsers fallback */
       url('fonts/OpenSans-Light.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

/* Japanese Font */
@font-face {
  font-family: 'Japanese';
  src: url('fonts/Japanese.eot'); /* IE9 Compat Modes */
  src: url('fonts/Japanese.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Japanese.woff2') format('woff2'),
       url('fonts/Japanese.woff') format('woff'),
       url('fonts/Japanese.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply the fonts */
h3 {
  font-family: 'OpenSansLight', sans-serif;
}

h5 {
  font-family: 'Japanese', serif;
}
h4 {
  font-family: 'Courier New', monospace; /* for nav, buttons, h4, etc. */
}

/* --- Custom H1 Font Only --- */
@font-face {
  font-family: 'Thesignature'; /* Replace with your font name */
  src: url('fonts/Thesignature.eot'); /* IE9 Compat */
  src: url('fonts/Thesignature.eot?#iefix') format('embedded-opentype'),
       url('fonts/Thesignature.woff2') format('woff2'),
       url('fonts/Thesignature.woff') format('woff'),
       url('fonts/Thesignature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply only to H1 */
h1 {
  font-family: 'Thesignature';
}
.card.arisu .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(6).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.arisu .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/king%20of%20heart.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.karube .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(4).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.karube .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/3%20of%20spade.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.chota .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(8).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.chota .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/2%20of%20heart.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.shibuki .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(11).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.shibuki .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/2%20of%20clubs.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.usagi .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(14).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.usagi .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/9%20of%20heart.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.chishiya .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(12).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.chishiya .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/ace%20of%20diamond.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.kuina .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(9).png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.kuina .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/9%20of%20clubs.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.ann .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(13).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.ann .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/10%20of%20diamond.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.niragi .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(2).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.niragi .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/10%20of%20spade.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.aguni .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(3).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card.aguni .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/ace%20of%20spade.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.hatter .card-front {
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(7).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card.hatter .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/10%20of%20heart.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.card.lastboss .card-front { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/Untitled%20design%20(1).png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
}
.card.lastboss .card-back { 
  background-image: url('https://icantfindmysocks.neocities.org/cards/9%20of%20spade.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}