@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  color-scheme: dark;
  --site-bg: #5e7594;
  --site-grid-line: transparent;
  --site-text: #ffffff;
  --site-muted: #b5cae0;
  --site-surface: #7a8fab;
  --site-surface-2: #5e7594;
  --site-surface-3: #4a5f7a;
  --site-border: #353d49;
  --site-button: #413d3d;
  --site-button-hover: #2f2b2b;
  --site-accent: #fc8585;
  --site-accent-hover: #e7928f;
  --site-accent-text: #484c51;
  --site-link: #f1a727;
  --site-link-hover: #f1d41d;
  --site-input-bg: #7a8fab;
  --site-input-text: #ffffff;
  --site-placeholder: #f0f6ff;
  --site-shadow: rgba(0, 0, 0, 0.24);
  --site-radius-sm: 10px;
  --site-radius-md: 14px;
  --site-radius-lg: 18px;
  --site-radius-xl: 28px;
  --site-radius-pill: 999px;
  --site-search-width: min(88vw, 912px);
  --site-search-radius: 20px;
  --site-search-font-size: 1.3rem;
  --site-search-bg: var(--site-input-bg);
  --site-search-hover-bg: var(--site-search-bg);
  --site-search-border-color: var(--site-control-border-hover);
  --site-search-glow-color: var(--site-search-border-color);
  --site-search-glow-shadow:
    0 4px 12px var(--site-shadow),
    0 0 18px color-mix(in srgb, var(--site-search-glow-color) 32%, transparent);
  --site-control-border: color-mix(
    in srgb,
    var(--site-border) 64%,
    var(--site-muted)
  );
  --site-control-border-hover: color-mix(
    in srgb,
    var(--site-muted) 54%,
    var(--site-border)
  );
  --site-control-ring: color-mix(in srgb, var(--site-muted) 28%, transparent);
  --site-control-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--site-text) 10%, transparent),
    0 14px 34px var(--site-shadow);
}

:root[data-theme="blue"] {
  color-scheme: dark;
  --site-bg: #0b1220;
  --site-grid-line: rgba(148, 163, 184, 0.08);
  --site-text: #e6edf7;
  --site-muted: #8fa0b8;
  --site-surface: #111d2f;
  --site-surface-2: #0f1a2b;
  --site-surface-3: #070d17;
  --site-border: #223452;
  --site-button: #1a314f;
  --site-button-hover: #24466f;
  --site-accent: #3b82f6;
  --site-accent-hover: #60a5fa;
  --site-accent-text: #06111f;
  --site-link: #60a5fa;
  --site-link-hover: #93c5fd;
  --site-input-bg: #101d31;
  --site-input-text: #f8fbff;
  --site-placeholder: #c4d1e4;
  --site-shadow: rgba(0, 0, 0, 0.28);
}

:root[data-theme="legacy"] {
  --site-bg: #5e7594;
  --site-grid-line: transparent;
  --site-text: #ffffff;
  --site-muted: #b5cae0;
  --site-surface: #7a8fab;
  --site-surface-2: #5e7594;
  --site-surface-3: #4a5f7a;
  --site-border: #353d49;
  --site-button: #413d3d;
  --site-button-hover: #2f2b2b;
  --site-accent: #fc8585;
  --site-accent-hover: #e7928f;
  --site-accent-text: #484c51;
  --site-link: #f1a727;
  --site-link-hover: #f1d41d;
  --site-input-bg: #7a8fab;
  --site-input-text: #ffffff;
  --site-placeholder: #f0f6ff;
  --site-shadow: rgba(0, 0, 0, 0.24);
}

:root[data-theme="midnight"] {
  --site-bg: #121826;
  --site-grid-line: transparent;
  --site-text: #f5f7fb;
  --site-muted: #9eb6d8;
  --site-surface: #22304a;
  --site-surface-2: #182235;
  --site-surface-3: #101827;
  --site-border: #33425f;
  --site-button: #2d3a56;
  --site-button-hover: #425276;
  --site-accent: #7dd3fc;
  --site-accent-hover: #38bdf8;
  --site-accent-text: #07111f;
  --site-link: #fbbf24;
  --site-link-hover: #fde68a;
  --site-input-bg: #22304a;
  --site-input-text: #f5f7fb;
  --site-placeholder: #d8e4f5;
}

:root[data-theme="forest"] {
  --site-bg: #233329;
  --site-grid-line: transparent;
  --site-text: #f4fbf4;
  --site-muted: #b7d9bd;
  --site-surface: #3e5f48;
  --site-surface-2: #2c4634;
  --site-surface-3: #1d2f24;
  --site-border: #16251c;
  --site-button: #263b2c;
  --site-button-hover: #345840;
  --site-accent: #e4b363;
  --site-accent-hover: #f1c979;
  --site-accent-text: #1f2d24;
  --site-link: #f4d35e;
  --site-link-hover: #fff3a6;
  --site-input-bg: #3e5f48;
  --site-input-text: #f4fbf4;
  --site-placeholder: #e7f4e9;
}

:root[data-theme="sunset"] {
  --site-bg: #40284f;
  --site-grid-line: transparent;
  --site-text: #fff8f3;
  --site-muted: #ffd0c2;
  --site-surface: #74456f;
  --site-surface-2: #5a3264;
  --site-surface-3: #352040;
  --site-border: #271932;
  --site-button: #523256;
  --site-button-hover: #6f4168;
  --site-accent: #ffb86b;
  --site-accent-hover: #ff9f68;
  --site-accent-text: #2f2031;
  --site-link: #ffe066;
  --site-link-hover: #fff2ad;
  --site-input-bg: #74456f;
  --site-input-text: #fff8f3;
  --site-placeholder: #fff1eb;
}

:root[data-theme="contrast"] {
  color-scheme: dark;
  --site-bg: #000000;
  --site-grid-line: transparent;
  --site-text: #ffffff;
  --site-muted: #f5f5f5;
  --site-surface: #1a1a1a;
  --site-surface-2: #000000;
  --site-surface-3: #111111;
  --site-border: #ffffff;
  --site-button: #000000;
  --site-button-hover: #222222;
  --site-accent: #ffff00;
  --site-accent-hover: #00ffff;
  --site-accent-text: #000000;
  --site-link: #00ffff;
  --site-link-hover: #ffff00;
  --site-input-bg: #000000;
  --site-input-text: #ffffff;
  --site-placeholder: #ffffff;
}

body {
  font-family: "Roboto", serif;
  margin: 0;
  padding: 0;
  background-color: var(--site-bg);
  background-image:
    linear-gradient(var(--site-grid-line, transparent) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--site-grid-line, transparent) 1px,
      transparent 1px
    );
  background-size: 36px 36px;
  color: var(--site-text);
}

.form__input,
input.searchbar,
.site-input {
  box-sizing: border-box;
  padding: 1.2vw;
  width: 50%;
  border-radius: 5px;
  background: var(--site-input-bg, #2a3a5b);
  text-align: center;
  font-family: "Roboto", serif;
  font-size: 24px;
  border: none;
  outline: none;
  color: white;
  transition: 0.2s;
  margin: 0;
}

.form__input::placeholder,
input.searchbar::placeholder,
.site-input::placeholder {
  color: #aaa;
  text-align: center;
}

.form__input:hover,
input.searchbar:hover,
.site-input:hover,
.form__input:focus,
input.searchbar:focus,
.site-input:focus {
  background: var(--site-search-hover-bg, #3a4a7b);
  transition: 0.2s;
}

title {
  padding-top: 20%;
}

main {
  padding: 20px;
  overflow-wrap: break-word;
}

#adleft {
  position: fixed;
  overflow: hidden;
  scale: 0.7;
  left: -24px;
  top: 25vh;
}
#adright {
  position: fixed;
  overflow: hidden;
  scale: 0.7;
  right: -24px;
  top: 25vh;
}

:where(button:not(:disabled)) {
  transform-origin: center;
  transition: transform 0.15s ease;
}

:where(button:not(:disabled)):hover {
  transform: scale(1.05);
}

:where(button:not(:disabled)):active {
  transform: scale(0.96);
}

#gs {
  cursor: pointer;
  background-color: var(--site-button);
  border: none;
  color: var(--site-text);
  padding: 10px 30px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Roboto", serif;
  font-size: 16px;
  border-radius: var(--site-radius-sm);
  transition: all 0.15s ease;
}
#gs:hover {
  transform: scale(1.06);
  background-color: var(--site-button-hover);
}
#gs:active {
  transform: scale(0.94);
}

.gs {
  cursor: pointer;
  background-color: var(--site-button);
  border: none;
  color: var(--site-text);
  padding: 10px 30px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Roboto", serif;
  font-size: 16px;
  border-radius: var(--site-radius-sm);
  transition: all 0.15s ease;
}
.gs:hover {
  transform: scale(1.06);
  background-color: var(--site-button-hover);
}
.gs:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  :where(button:not(:disabled)),
  #gs,
  .gs {
    transition: none;
  }

  :where(button:not(:disabled)):hover,
  :where(button:not(:disabled)):active,
  #gs:hover,
  #gs:active,
  .gs:hover,
  .gs:active {
    transform: none;
  }
}

.horizontal-items {
  display: flex;
  justify-content: left;
}

a {
  color: var(--site-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--site-link-hover);
}

/* Scrollbar settings */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--site-surface-3);
  border-radius: var(--site-radius-sm);
  box-shadow: inset 0 0 5px grey;
}
::-webkit-scrollbar-thumb {
  background: var(--site-accent);
  border-radius: var(--site-radius-sm);
  transform: background 0.1s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--site-accent-hover);
}