/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*THEMES*/

:root, html[data-theme="sun"], body[data-theme="sun"] {
  --bg-gradient: linear-gradient(to bottom, #B5CC74, #C7C791, #EBDFB9);
  --text-color: #08418C;
  --accent-color: #3E89AD;
  --panel-bg: rgba(237, 225, 159, 0.8);
  --panel-border: #1C5299;
  --bg-image: none;
  --image-opacity: 0;
}
    html[data-theme="night"], body[data-theme="night"] {
      --bg-gradient: linear-gradient(to bottom, #0E0B21, #191A2E, #2D333D);
      --text-color: white;
      --accent-color: #bb86fc;
      --panel-bg: rgba(255, 255, 255, 0.1);
      --panel-border: #444444;
      --bg-image: none;
      --image-opacity: 0;
    }
    html[data-theme="rain"], body[data-theme="rain"] {
      --bg-gradient: linear-gradient(to bottom, #202020, #25292B);
      --text-color: white;
      --accent-color: #29b6f6;
      --panel-bg: rgba(20, 24, 30, 0.6);
      --panel-border: rgba(255, 255, 255, 0.2);
      --bg-image: url("graphics/rain.gif");
      --image-opacity: 0.5;
    }
    html[data-theme="snow"], body[data-theme="snow"] {
      --bg-gradient: linear-gradient(to bottom, #2A323B, #526269);
      --text-color: #f5f5f5;
      --accent-color: #AFBCC9;
      --panel-bg: rgba(255, 255, 255, 0.1);
      --panel-border: #80deea;
      --bg-image: url("graphics/snow4.gif");
      --image-opacity: 0.3;
    }

.theme-container {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  justify-content: flex-end;
}
.theme-btn {
  all: unset;
  box-sizing: border-box;
  padding: 4px 10px;       
  font-size: 10px; 
  line-height: 1; 
  border: 1px solid var(--text-color, darkslateblue); 
  border-radius: 6px; 
  background-color: transparent;
  color: var(--text-color, darkslateblue);
  font-weight: bold;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  box-shadow: none;
}
.theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.theme-btn:active {
  transform: translateY(0);
}
.btn-light { border-color: #0076ff; }
.btn-dark { border-color: #bb86fc; }
.btn-rain { border-color: #25292B; } 
.btn-snow { border-color: #bb86fc; }



body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--text-color);
  font-family: "courier new", monospace;
  transition: color 0.3s;
}

/*solid gradient background*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2; /* Sits at the very bottom */
  background-image: var(--bg-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  background-attachment: fixed;
}

/*image background*/
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /* Sits directly above the gradient, under text */
  background-image: var(--bg-image);
  background-repeat: repeat-x;
  background-size: auto 100vh;
  background-attachment: fixed;
  opacity: var(--image-opacity, 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
}


.container, .welcome {
  background-color: var(--panel-bg);
  color: var(--text-color);
  border: 3px solid var(--panel-border);
  border-radius: 2px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.welcome-bubble {
  border: 3px solid var(--panel-border);
  border-style: outset;
  background-color: var(--panel-bg);
  border-radius: 2px;
  transition: all 0.3s;
}


h1 {
  font-family: Ubuntu;
  font-size: 1.5rem;
}

a.nav-link {
  color: var(--accent-color, var(--text-color));
  padding: 8px;
  text-decoration: none;
  font-family: "Space Mono";
  display: inline-block;
  border-width: 3px;
  border-style: outset;
  border-color: #A9B0CF var(--accent-color, var(--text-color)) var(--accent-color, var(--text-color)) #A9B0CF;
  transition: color 0.3s, border-color 0.3s;
}
a.nav-link:hover {
  background-color: rgba(255, 249, 214, 0.2);
  color: var(--text-color);
  text-decoration: none;  
}
a.nav-link:active {
  border-style: inset;
  border-color: var(--panel-border) #A9B0CF #A9B0CF var(--panel-border);
}
a.nav-link:visited {
  color: var(--accent-color);
}

.broider {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC3klEQVR4Xu2VwY0UQRAE90zAJnzASHzAJkwA9eckYqQJkurWoLuM164yq7o6t3bm7euX779eN/z4+e3t/cvr9TI/+Wz1bxbQZwuEpPdvoEIDBWkgJK2/bCgbEPN/dJ3wvg00XAhCfwNtoPcbxI3ZrRP6b83/Ag/gQKZPsf6mT9nabGEDmz7F+ps+ZWuzhQ1s+hTrb/qUrc0WNrDpU6y/6VMub3nCA81PpvVTpuen9Q1UaKAgDYSk9d1QYRwoGxD6SVpv/pS0P/0krW+gDfQeBpRuGEnru6GnA03hgexHndA/JT2PfuopDbSB3sOACDeQfuop3dDdgb5/OgQHtAtQN6ze9N0cbb6wC5luWL3puznafGEXMt2wetN3c7T5wi5kumH1pu9m/FIipwfeze77N9AGupcGupnjgdozkAPQT53Qf5p0HvqpE/ovz9C0Af3UCf2nSeehnzqhv4E20AxuEDkeKEkPNP1pbL5UJ5e/PLGGqf40Nl+qkwYqgZlOGqgEZjr5w/w3sKEdSP1pbD7Tjci8sANNfxqbz3QjMi/sQNOfxuYz3YjMCzvQ9Kex+Uw3+lIKA6VOGqgEZjppoBKY6aSBSmCmk0ugbEDMT53Qf5p0HvqpE/obaAPN4AaRBhryeKBT+Iv/71jgKZdn6JQG2kC3LlQ3dPNCHX/ecWA+Ekw3rN703RxtvrALmW5Yvem7Odp8YRcy3bB603dztPnCLmS6YfWm72b8UuKA7Eed0D8lPY9+6ikNtIHew4AIN5B+6ind0NOB8gBCP0nrzZ+S9qefpPUNtIHew4DSDSNpfTf0dKCEDc1PpvVTpuen9Q1UaKAgDYSk9d1QIQ70/dMmeKANRH2K9Td9ytZmCxvY9CnW3/QpW5stbGDTp1h/06dsbbawgU2fYv1Nn3J5KdkB5v/oOuF9G2i4EIT+BtpA7zeIG7NbJ/RfNpSwofnJZ6tvoEK6EA1UaKAgDYSk9b8B8jF/77sJ0nwAAAAQZGVCR0E5NTEwMkNFQTE5QUM5MThSyLluAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
}
.bug-row {
  text-align: center;
  opacity: 0.7;
}


input[type="text"], textarea, .text-box {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  padding: 10px;
  border-radius: 4px;
  font-family: inherit;
  transition: background-color 0.3s, border-color 0.3s;
}
    
html {
  height: 100%;
  font-size: 18px;
}