/* =========================================================
   USER STYLES & VARIABLES
   ========================================================= */

:root {
  /* Backgrounds */
  --body-bg: url('BGs/Gifs/PinkleCat2.gif');
  --body-bg-size: 130px;
  --body-bg-repeat: repeat;

  --topbar-audio-button: invert(47%) sepia(23%) saturate(695%) hue-rotate(188deg) brightness(93%) contrast(92%);
  --topbar-audio-bar: invert(47%) sepia(23%) saturate(695%) hue-rotate(188deg) brightness(93%) contrast(92%);
  --topbar-audio-panel: rgba(100, 135, 201, 0.4);
  --topbar-audio: rgba(100, 135, 201, 0.4);
  --topbar-audio-bg: url('BGs/201.png');
  --song-color: #FFDDEE;
  --song-box:  rgba(242, 127, 198, 0.4);
  --song-color-hover: #DDEEFF;
  --song-box-hover: rgba(221, 238, 255, 0.4);

  --header-bg: 
    url('BGs/Cinna/Head.jpg'),
    url('BGs/Cinna/bbycute2.jpg'),
    url('BGs/Cinna/bbycute.jpg');
  --header-bg-position: center 70%, left -3% center, right -3% center;
  --header-bg-repeat: no-repeat, no-repeat, no-repeat;
  --header-bg-size: auto, min(450px, 50%), min(450px, 50%);

  --sidebar-bg: url('BGs/201.png');
  --sidebar-left-bg: url('BGs/201.png');
  --sidebar-right-bg: url('BGs/201.png');
  --sidebar-size: contain;
  --sidebar-left-size: contain;
  --sidebar-right-size: contain;
  --sidebar-text: #6487C9;
  --sidebar-box: rgba(255, 221, 238, 0.8);
  --sidebar-box-size: auto;
  --border-color: #ff73d7;
  
  --main-bg: url('BGs/Gifs/Background064.gif');
  --main-bg-size: 200px;
  --main-text: #F06ABD;
  --main-text-highlight: rgba(126, 140, 242, 0.1);
  
  --navbar-text: #DDEEFF;
  --navbar-text-hover: #FFDDEE;
  --navbar-box: rgba(242, 127, 198, 0.4);
  --navbar-box-hover: rgba(221, 238, 255, 0.2);
  --footer-text: #FFDDEE;
  --footer-box: rgba(242, 127, 198, 0.4);
  --navbar-bg: url('BGs/Gifs/purplestars.gif');
  --footer-bg: url('BGs/Gifs/purplestars.gif');
  --topBar-bg: url('BGs/Gifs/purplestars.gif');

  /* Colors */
  --page-bg-color: #08031A;
  --content-bg-color: #43256E;
  --accent-color: #6851ED;
}

[data-theme="alt"] {
  --body-bg: url('BGs/Gifs/stars3.gif');
  --body-bg-size: 200px;
  --body-bg-repeat: repeat;
  
  --topbar-audio-button: invert(82%) sepia(54%) saturate(749%) hue-rotate(87deg) brightness(104%) contrast(101%);
  --topbar-audio-bar: invert(82%) sepia(54%) saturate(749%) hue-rotate(87deg) brightness(104%) contrast(101%);
  --topbar-audio-panel: rgba(100, 135, 201, 0.4);
  --topbar-audio: rgba(100, 135, 201, 0.4);
  --topbar-audio-bg: url('BGs/Gifs/celesestrellas.gif');
  --song-color: #EEFFDD;
  --song-box:  rgba(238, 255, 221, 0.4);
  --song-color-hover: #FFDDEE;
  --song-box-hover: rgba(242, 127, 198, 0.4);
  
  --header-bg: url('BGs/Gifs/deer.gif'), url('BGs/download.jpg');
  --header-bg-position: center 30%, left;
  --header-bg-repeat: no-repeat, repeat;
  --header-bg-size: auto, min(400px, 50%);
    
  --sidebar-left-bg: url('BGs/d7.jpg');
  --sidebar-right-bg: url('BGs/d71.jpg');
  --sidebar-left-size: 300px;
  --sidebar-right-size: 300px;
  --sidebar-left-pos: top left;
  --sidebar-right-pos: top right;
  --sidebar-text: #73FF9B;
  --sidebar-box: rgba(242, 115, 215, 0.4);
  --sidebar-box-size: 100px;
  --border-color: #6487C9;
  
  --main-bg: url('BGs/space2.jpg');
  --main-bg-size: 1200px;
  --main-text: #ff73d7;
  --main-text-highlight: rgba(25, 36, 105, 0.4);
  
  --navbar-text: #EEFFDD;
  --navbar-text-hover: #FFDDEE;
  --navbar-box: rgba(242, 127, 198, 0.4);
  --navbar-box-hover: rgba(238, 255, 221, 0.4);
  --footer-text: #EEFFDD;
  --footer-box: rgba(238, 255, 221, 0.4);
  --navbar-bg: url('BGs/Infinity1.png');
  --navbar-size: 1500px;

  --page-bg-color: #120018;
  --content-bg-color: #2b0a3d;
  --accent-color: #ff9ad5;
}

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

@font-face {
  font-family: Milonga;
  src: url('/Fonts/Serif/Milonga-Regular.ttf');
}

@font-face {
  font-family: Cormorant;
  src: url('https://sadhost.neocities.org/Fonts/Serif/Cormorant/CormorantUpright-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}

/* =========================================================
   GLOBAL RESETS
   ========================================================= */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;

  display: flex;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */

  font-family: 'Milonga', serif;
  font-size: 15px;
  color: var(--song-color);

  background-color: var(--page-bg-color);
  background-image: var(--body-bg);
  background-size: var(--body-bg-size);
  background-repeat: var(--body-bg-repeat);
  background-position: center;
}

/* =========================================================
   LAYOUT
   ========================================================= */

#container {
  max-width: 1500px;
  width: 100%;
  margin: 0;
}

#flex {
  display: flex;
  align-items: flex-start; /* Prevents sidebars from stretching vertically */
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */

#header {
  height: 226px;
  background-color: #5fa1de; /* fallback if images fail */
  background-image: var(--header-bg);
  background-size: var(--header-bg-size);
  background-position: var(--header-bg-position);
  background-repeat: var(--header-bg-repeat);
  
}

#navbar {
  height: 40px;
  width: 100%;
  background-color: #13092D;
  background-image: var(--navbar-bg);
  background-size: var(--navbar-size);
}

#navbar ul {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
  margin: 0;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  color: var(--navbar-text);
  font-weight: 800;
  text-decoration: underline;
  padding: 4px 8px;
  background-color: var(--navbar-box);
  border-radius: 6px;
  transition: background-color 0.3s, color 0.3s;
}

#navbar li a:hover {
  color: var(--navbar-text-hover);
  text-decoration: wavy underline;
  background-color: var(--navbar-box-hover);
}

/* =========================================================
   SIDEBARS & MAIN CONTENT
   ========================================================= */

aside {
  width: 200px;
  padding: 20px;
  color: var(--sidebar-text);
  font-size: smaller;
  background-color: #241445;
  background-image: var(--sidebar-bg);
  background-size: var(--sidebar-size);
  text-align: center;
}

aside .box {
  text-align: center;
  background-color: var(--sidebar-box);
  background-size: var(--sidebar-box-size);
}

aside ul {
  text-align: left;      /* makes text inside list left-aligned */
  padding-left: 20px;    /* keeps some indent for bullets */
  margin-left: 0;        /* reset any extra margin */
}

aside li {
  text-align: left;      /* ensures each item is left-aligned */
}

main {
  flex: 1;
  padding: 20px;
  order: 2;
  color: var(--main-text);
  background-color: var(--content-bg-color);
  background-image: var(--main-bg);
  background-size: var(--main-bg-size);
  text-align: center;
  /* This prevents the main section from ever growing */
  overflow: hidden; 
  height: 451.5px; /* Adjust this to exactly how tall you want the middle box to be */
}

.chat-bubble {
  width: 1000px;
  max-width: 100%;
  height: 420px; 
  overflow-y: auto; 
  margin: 10px auto;
  padding: 0;
  background-color: var(--main-text-highlight);
  border-radius: 16px;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-composite: source-in;mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
}

.chat-bubble iframe {
  width: 95%;
  /* Make the iframe even taller than the bubble to ensure it fills it */
  height: 95%; 
  border: none;
}

.text-highlight-block {
  background-color: var(--main-text-highlight);
  padding: 12px 16px;
  border-radius: 8px;

  -webkit-mask-image: radial-gradient(circle, black 85%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
}

.text-highlight-block p {
  margin: 0 0 0.8em 0;
}

.text-highlight-block p:last-child {
  margin-bottom: 0;
}


#leftSidebar {
  order: 1;
    background-image: var(--sidebar-left-bg);
    background-size: var(--sidebar-left-size);
    background-position: var(--sidebar-left-pos);
}

#rightSidebar {
  order: 3;
    background-image: var(--sidebar-right-bg);
    background-size: var(--sidebar-right-size);
    background-position: var(--sidebar-right-pos);
}

.box {
  padding: 10px;
  background-color: var(--sidebar-box);
  border: 1px solid;
  border-color: var(--border-color);
}

/* =========================================================
   FOOTER & EXTRAS
   ========================================================= */

footer {
  display: flex;
  justify-content: center;  /* centers horizontally */
  align-items: center;      /* centers vertically */
  height: 40px;             /* match navbar height */
  padding: 0;               /* remove extra padding */
  background-image: var(--navbar-bg);
  background-size: var(--navbar-size);
  background-color: var(--footer-box); /* fallback */
  color: var(--footer-text);
  text-align: center; /* fallback if flex fails */
}

footer .footer-box {
  background-color: var(--footer-box);
  color: var(--footer-text);
  padding: 4px 8px;      /* small internal padding for the box */
  border-radius: 6px;
}

#topBar {
  height: 40px;
  width: 100%;
  margin-top: px;
  padding: 6px 0;

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

  font-size: smaller;
  background-color: #13092D;
  background-image: var(--navbar-bg);
  background-size: var(--navbar-size);
}

.topBarContent {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* space between elements */
}

.topBarContent span {
  font-size: 14px; /* adjust as needed */
  color: inherit;  /* keeps the site's text color */
}

.topBarContent audio {
  vertical-align: middle;
  height: 28px; /* keeps it compact */
}

#topBar audio {
  width: 300px;
  height: 28px;
  border-radius: 6px;
  border: none;          /* remove default border */
  outline: none;         /* remove focus outline */
  box-shadow: none;      /* remove browser-added shadow */
}

#topBar audio:focus {
  outline: none;         /* ensure no focus outline appears */
  box-shadow: none;
}

#topBar audio::-webkit-media-controls-panel {
  background-color: var(--topbar-audio-panel);
  background-image: var(--topbar-audio-bg);
  border-radius: 6px;
}

#topBar audio::-webkit-media-controls-play-button {
  filter: var(--topbar-audio-button);
}
#topBar audio::-webkit-media-controls-volume-slider {
  filter: var(--topbar-audio-bar);
  /* tweak button color to match theme */
}

.songButton {
  cursor: pointer;
  color: var(--song-color);
  font-weight: bold;
  text-decoration: underline;
  user-select: none;
  padding: 4px 8px;
  background-color: var(--song-box);
  border-radius: 6px;
  transition: background-color 0.3s, color 0.3s;
}

.songButton:hover {
  color: var(--song-color-hover);
  text-decoration: wavy underline;
  background-color: var(--song-box-hover);
}

#themeToggle {
  position: fixed;
  top: 10px;
  left: 10px;            /* LEFT side */
  z-index: 1000;

  width: 64px;           /* bigger */
  height: 64px;          /* bigger */
  padding: 0;

  background-image: url("BGs/Gifs/Sticker.gif");
    filter: sepia(100%);
  background-size: contain;   /* keeps full GIF visible */
  background-position: center;
  background-repeat: no-repeat;

  background-color: transparent;

  border: none;
  border-radius: 8px;
  cursor: pointer;

  transition: transform 0.2s, box-shadow 0.2s;
}

#themeToggle:hover {
  transform: scale(1.05);
}

#themeToggle:active {
  transform: scale(0.95);
}

/* =========================================================
   TEXT & COMPONENTS
   ========================================================= */

#container a {
  font-weight: normal;
  color: inherit;  /* inherits the color of the parent, i.e., var(--sidebar-text) */
  text-decoration: underline; /* optional if you want them underlined */
}

#container a:hover {
  color: inherit; /* keeps hover color same as surrounding text */
  font-weight: bold;
  text-decoration: underline; /* optional */
}

h1 {
  font-size: 25px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

  #rightSidebar {
    order: 3;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}