/* EB BACKGROUNDS (visual relaxants): https://web.archive.org/web/20260702161919/https://gjtorikian.online/Earthbound-Battle-Backgrounds-JS/ */
/* webserver command: sudo python3 webserver.py ./dreedle/out/ */


/**======================== FONTS ========================*/



/* lato-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nova-flat-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nova Flat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nova-flat-v26-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kavoon-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kavoon';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kavoon-v25-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fungis regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'fungis';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fungis-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zarathustra typeface; serif */
@font-face {
  font-display: swap;
  font-family: 'zarathustra';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/zarathustra-v01.otf') format('otf'); 
}


:root {
  /* Backgrounds */
  --color-bg: rgb(21, 11, 55);       /* page background, a soft cream pink */
  --color-bg-trans: rgba(21, 11, 55,.95);       /* page background, a soft cream pink */
  --color-surface: #1c1a56dc;  /* header, sidebar, footer, card backgrounds */

  /* Accents used for borders, glows, and fills */
  --color-primary: #9b7ffd;
  --color-primary-strong: #c489ff;
  --color-shadow: rgba(43, 0, 200, 0.85);


  --color-secondary: #9450cf;


  /* Text */
  --color-text: #cfe9fd;
  --color-blue: #63d3ff;

  /* Fonts */
  --font-title: "Nova Flat";
  --font-heading: "Nova Flat";
  /* --font-heading: "Kavoon"; */
  /* --font-body: "Lato"; */
  --font-body: "fungis";
  --font-serif: "zarathustra";

  /* Shadows and corner rounding */
  --shadow-soft: 0 4px 14px rgba(188, 143, 255, 0.3);

  --radius-lg: 22px;
  --radius-md: 16px;
}

/* ============================
   3. BASE STYLES AND UTILITIES
============================ */

body {
  background-color: var(--color-bg-trans);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.2;

  background-repeat: repeat;
  background-size:25%;
  /* background-position: 0.5px .84px; */
  /* background-image: url(/assets/img/bg/earthbound-bg-245-24-slow-double.gif); */
  /* background-image: url(/assets/img/bg/earthbound-bg-290-309-slow-reverse.gif); */
  /* background-image: url(/assets/img/bg/earthbound-bg-290-271-slow-double-3-even-slower.gif); */
  /* background-image: url(/assets/img/bg/stars-only.gif);  */
  /* background-image: url(/assets/img/bg/cool-purple-wave-slow.gif);  */
  /* background-image: url(/assets/img/bg/green-argyle.gif);  */
  /* background-image: url(/assets/img/bg/diag-pink-squig.gif);  */
  /* background-image: url(/assets/img/bg/rainbow-static.gif);  */
  /* background-image: url(/assets/img/bg/grey-diamond.gif);  */
  /* background-image: url(/assets/img/bg/darker-blue-waves-slow.gif);  */
  /* background-image: url(/assets/img/bg/dark-blue-waves.gif);  */
  /* background-image: url(/assets/img/bg/silver-argyle.gif);  */
  /* background-image: url(/assets/img/bg/light-blue-river.gif);  */
  /* background-image: url(/assets/img/bg/static-blue-river.gif);  */
  /* background-image: url(/assets/img/bg/reddish-static.gif);  */
  /* background-image: url(/assets/img/bg/dark-blue-argyle.gif);  */
  background-image: url(/assets/img/bg/purple-zigzags-slow-double.gif); 
  /* background-image: url(/assets/img/bg/purple-diag.gif);  */
  /* background-image: url(/assets/img/bg/golden-aurora.gif);  */
  /* background-image: url(/assets/img/bg/golden-squiggle.gif);  */
  /* background-image: url(/assets/img/bg/purple-sound-wave.gif);  */


  /*background-image: url(/assets/img/bg/earthbound-bg-290-44.gif); /*diagonal purple pink squiggles*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-68.gif); /*rainbow static*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-100.gif); /*grey diamond guys*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-104.gif); /*darker blue waves*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-325.gif); /*dark blue waves*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-112.gif); /*silver argyle*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-131.gif); /*light blue river*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-207.gif); /*static blue river*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-143.gif); /*reddish static*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-189.gif); /*dark blue argyle*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-234.gif); /*purple zigzags*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-246.gif); /*purple diagonals*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-299.gif); /*golden aurora idk about this one*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-303.gif); /*golden squiggles*/
  /*background-image: url(/assets/img/bg/earthbound-bg-290-312.gif); /*purple sound wave*/
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  filter: drop-shadow(0 0 3px var(--color-primary-strong));

}

/* Links */
a,
a:visited,
a:active {
  text-decoration: none;
  color: var(--color-primary-strong);
}

a:hover {
  color: var(--color-primary)
}

p {
  font-size: 19px;
  margin-top: .65rem;
  margin-bottom: .75rem;
}



/* dropdown button */

.accordion {
  /* background-color: var(--color-secondary); */
  background: linear-gradient(3deg, var(--color-secondary), #3c169d);
  color: var(--color-text);
  padding: 1rem;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 1.3rem;
  font-family: var(--font-heading);
  transition: 0.4s;
  border-radius: var(--radius-md);
  text-shadow: 1.5px 1.3px 0 var(--color-shadow);

}

.active, .accordion:hover {
  background-color: var(--color-primary);
  background: linear-gradient(3deg, var(--color-primary), #31147b);
  margin-top: .25rem;
  margin-bottom: .25rem;
  box-shadow: var(--shadow-soft);
}

.accordion:after {
  content: '\02795'; /* Unicode for + */
  font-size: 1.1rem;
  color: var(--color-text);
  float: right;
  margin-left: 1.1rem;
}

.active:after {
  content: "\2796"; /* Unicode for - */
}

.panel {
  padding: 0 1rem;
  margin-top: .25rem;
  margin-bottom: .5rem;
  background-color: var(--color-bg);
  color: var(--color-text);
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  justify-content: space-between;
}

.poem {
  border-left: .25rem solid var(--color-text);
  border-radius: var(--radius-md);
  padding-left: 1rem;
  margin: 0.5rem;
  width: 50%;
  min-width: 50%;
  max-width: 100%;
  /* display: flex; */
}

.stanza {
  padding-top: .65rem;
  padding-bottom: .65rem;
  font-size: 19px;

}

.dict-def {
  font-family: var(--font-serif);
  max-width: 46%;
  height: fit-content;
  float: left;
  text-align: justify;

  padding-left: .75rem;
  padding-right: .75rem;
  padding-top: -1rem;
  /* padding-bottom: 1rem; */
  /* margin-top: 1rem;
  margin-bottom: 1rem; */
  margin-right: 1.5rem;
  background-color: rgb(197, 191, 184);
  color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft)
}

.dict-response {
  border-left: .25rem solid var(--color-text);
  border-radius: var(--radius-md);
  padding-left: 1rem;
  padding-left: 1rem;
  width: 48%;
  height: fit-content;
  float: inline-end;
  /* padding-left: .5rem;
  padding-right: .5rem; */
  font-size: 1rem;
  /* margin-top: .75rem;
  margin-bottom: 1rem; */
}

/* starman sub-button */

.btn-starman {
  background: url(/assets/img/icons/starman-junior.png);
  background-size: contain;
  float: right;
  padding: 1rem;
  cursor: pointer;
  transition: 0.4s;
  width: fit-content;
  height: fit-content;
  border: none;
}

.btn-starman:hover {
  background: url(/assets/img/icons/starman-super.png);
  background-size: contain;
  /* box-shadow: var(--shadow-soft); */
}

.strmn-active, .btn-starman:after {
  background: url(/assets/img/icons/ghost-of-starman.png);
  background-size: contain;
  /* font-size: 1.1rem; */
  /* color: var(--color-text); */
  float: right;
  margin-left: 0.2rem;
  margin-right: -0.5rem;
  margin-top: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
}


.sub-panel {
  float: right;
  /* padding: 0 1rem; */
  margin-top: 1rem;
  margin-bottom: .5rem;
  background-color: var(--color-surface);
  /* width: 46%; */
  color: var(--color-text);
  max-width: 0px;
  /* height:min-content; */
  overflow-x: hidden;
  overflow-y: auto;
  transition: max-width 0.2s ease-out;
  font-size: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.sub-panel::-webkit-scrollbar {
    width: 11px;
}
.sub-panel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
    border-radius: 10px;
}
.sub-panel::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(200, 152, 255, 0.441); 
}


/* .show{display:block;} */


/* ============================
   4. HEADER
============================ */

/* .page-title{
  font-style: oblique 25deg;
  text-decoration: none;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 30;

} */


.site-header {
  display: flex;
  /* align-items: center; */
  justify-content: space-around;
  font-style: oblique 25deg;
  text-decoration: none;
  font-family: var(--font-title);
  margin-bottom: .8rem;
  margin-right: .8rem;
  margin-left: .8rem;
  overflow: hidden;

  /* background-image: url(/assets/img/eb-sky.png); */
  /* background-image: url(/assets/img/eb-sky.png); */
  background-image: url(/assets/img/bg/earthbound-bg-290-271-slow.gif);
  /* background-image: url(/assets/img/bg/purple-sound-wave.gif); */
  background-repeat: repeat-x;
  background-size: auto;
  /* background-color: var(--color-surface); */
  border-radius: var(--radius-md);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-soft);
}

/* Heading style for a big page title, like "Want to know more?" */
/* .home-title {
  padding-bottom: 20px;
  color: var(--color-primary-strong);
} */

/* .site-header-marquee {
  flex-grow: 1;
  min-width: 5;
  text-align: left;
  position: relative;
  z-index: 1;
} */

.site-title {
  color: var(--color-primary-strong);
  text-shadow: 2px 2px 0 var(--color-shadow);
  filter: drop-shadow(0 0 5px var(--color-primary-strong));
}


.title-link {
  color: var(--color-secondary);
}


/* IMGS */

img {
  display: inline-flex;
}



/* ============================
   6. MAIN CONTENT AREA
============================ */

main.content {
  flex: 1;
  padding: 1.1rem;
  position: relative;
  overflow: hidden;
  margin-right: .8rem;
  margin-left: .8rem;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  border-radius: var(--radius-md);
  border: 2px solid var(--color-primary);
  background-color: var(--color-surface);
}

.inner-content {
  position: relative;
  z-index: 1;
}

section.content-frame{
  position: relative;
  min-width: 200px;
  max-width: 950px;



  /* background-color: var(--color-bg) */
}

.page-titles {
  color: var(--color-primary-strong);
  text-shadow: 2px 2px 0 var(--color-shadow);
  filter: drop-shadow(0 0 5px var(--color-primary-strong));
}

/* .content-inner{
  font-size: 1.05;
  background-color: var(--color-bg-trans);
} */