:root {
  --persian-blue: #27187E;
  --ghost-white: #F7F7FF;
  --olive-brown: #25291C;
  --sign-black: #1F0805;
  --snow: #E3E5E8;
  --strawberry: #ED254E;
  --stratos: #011936;
  /* Gaming Color Palette */
  --cherry-cola: #9A0002;
  --vanilla: #EFE6DE;
  --mantis: #82D173;
  /* Blog Palette */
  --champagne: #FBDFA2;
  --marigold: #F4E5C8;
  --noctra: #31302E;
  --xanthous: #3B153A;
  --plum: #F0C987;
  --vista-blue: #92ACFF;
  /* Taste Palette */
  --blue-velvet: #210E7F;
}

/* Fonts */
@font-face {
  font-family: 'alagard';
  src: url('https://echovhyn.neocities.org/Fonts/alagard.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cinzel';
  src: url('https://echovhyn.neocities.org/Fonts/Cinzel-Black.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'digital-7';
  src: url('https://echovhyn.neocities.org/Fonts/digital-7.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'gameboy';
  src: url('https://echovhyn.neocities.org/Fonts/Early%20GameBoy.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'animal-crossing';
  src: url('https://echovhyn.neocities.org/Fonts/AnimalCrossing.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'baybayin';
  src: url('https://echovhyn.neocities.org/Fonts/BagwisBaybayinFontRegular-ZV3MK.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'daydream';
  src: url('https://echovhyn.neocities.org/Fonts/Daydream.ttf');
  font-weight: normal;
  font-style: normal;
}

/* Layout & Components */

.generalparent {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
  position: relative;
  margin: auto;
  gap: 0.125em;
}
.header {
  width: 100%;
  align-items: center;
  justify-content: center;
  margin: auto;
  display:  flex;
}
/*moving text*/
.scroll-left {
  overflow: hidden;
  position: relative;
  width: 80%;
}

.scroll-left p {
  position: relative;
  width: 100%;
  margin: 0;
  line-height: 20px;
  text-align: center;
  font-family: 'digital-7';
  letter-spacing: 2px;
  transform: translateX(100%);
  animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%); 		
  }
  100% {
    transform: translateX(-100%); 
  }
}

/* Collapsibles */
.button {
  cursor: pointer;
  padding: 2px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 0.9375em;
  font-family: "cinzel";
}

.bigbutton {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 0.9375em;
  font-family: "cinzel";
}

.hiddencontent {
  font-family: "animal-crossing";
  justify-content: center;
  display: none;
  width: auto;
  margin: 0.1875em;
}

.bigbutton:hover {
  background-color: var(--vista-blue);
  color: var(--champagne);
}
.button:hover {
  background-color: var(--cherry-cola);
  color: var(--vanilla);
}
/* Content Area */
.contentparent {
  min-height: 400px;
  max-height: 650px;
  overflow: scroll;
  width: 80%;
  align-items: center;
  justify-content: center; 
  margin: auto;
}
.content {
  justify-content: center;
  display: flex;
  width: 100%;
  margin: 0.1875em auto;
}
.content a {
  font-size: 1em;
}

.content a:hover {
  font-size: 1em;
  box-sizing: border-box;
}

.contentnavi {
  float: center;
  justify-content: center;
  display: flex;
  width: 100%;
  overflow: hidden;
  margin: 0.1875em 0em 0.1875em;
}

.contentnavi a:hover {
  border: 0.125em solid white;
}
.contentnavi a {
 padding: 1em;
 text-decoration: none;
 }
.picbox {
  width: 40%; 
  padding: 0.125em;
}
.picbox img {
  width: 100%; 
}

.descbox {
  width: 60%;
  padding: 0.3125em;
}

.box {
  padding: 0.25em;
  margin: 0.125em;
  width: 100%;
}

/* Text Properties */
p, li, a {
  margin: 0.125em;
  font-family: 'animal-crossing'; 
  text-decoration: none;
}
p {
 font-size:  140%;
}

h2 {
  font-family: 'gameboy';
  text-align: right;
}

a {
  color: var(--persian-blue);
  font-family: "gameboy";
}

a:hover {
  color: var(--mantis);
}

/* Custom Text Selectors */
t {
  font-family: 'baybayin';
  font-size: 0.75em;
}

f {
  font-family: 'gameboy';
  color: var(--ghost-white);
  text-align: center;
  font-size: 0.5em;
}

upd {
  font-family: 'animal-crossing'; 
  font-size: 13px; 
}
