/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/* Icons - import only needed ones - see &icon_names= at the end of the URL */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

/* Root */
:root {
  --red: rgb(255, 28, 28);
  --orange: rgb(241, 130, 25);
  --yellow: rgb(255, 230, 0);
  --green: rgb(22, 155, 22);
  --cyan: rgb(94, 255, 255);
  --blue: rgb(45, 45, 255);
  --dark-blue: rgb(0, 0, 170);
  --indigo: rgb(35, 0, 130);
  --purple: rgb(105, 0, 131);
  --magenta: rgb(255, 71, 224);
  --hot-pink: hotpink;
  --black: #000;
  --white: #fff;

  --grey0: #cecece;
  --grey1: #c5c5c5;
  --grey2: #a7a7a7;
  --grey3: #7e7e7e;
  --grey4: #575757;
  --grey5: #363636;
  --grey6: #2b2b2b;
  --grey7: #222222;
  --grey8: #0c0c0c;
  --grey9: #080808;
  /* Noir Grey */

  --body-foreground: #1a1a1a;
  --body-background: #f1f7f9;

  --tide-cyan: #00a9c6;
  --abyss-blue: #002b49;
  --inferno-orange: #ff4a25;
  --foam-white: #f1f7f9;

  --thematic-blue: var(--tide-cyan);
  --lighter-thematic-blue: var(--lighter-tide-cyan);
  --light-thematic-blue: var(--light-tide-cyan);
  --dark-thematic-blue: var(--dark-tide-cyan);

  --dark-tide-cyan: #008299;
  --dark-abyss-blue: #001f35;
  --dark-inferno-orange: #c42100;
  --dark-foam-white: #c9c9c9;

  --light-tide-cyan: #37d7f3;
  --light-abyss-blue: #0d568a;
  --light-inferno-orange: #ff6f52;
  --light-foam-white: #ffffff;

  --lighter-tide-cyan: #b5f4ff;
  --lighter-abyss-blue: #80c0ee;
  --lighter-inferno-orange: #ffb3a3;

  --font-face: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --serif-font: "Merriweather", Georgia, 'Times New Roman', Times, serif;
  --monospace-font: "JetBrains Mono", 'Courier New', Courier, monospace;

  --code-header-background: #131313;
  --code-background: #222222;
  --code-header-foreground: #b6b6b6;
  --code-foreground: #f8f8f2;
  --codebox-border-color: #444;
}

.darktheme {
  --black: #000000;
  /* Switching cuz dark mode */
  --white: #ffffff;

  --grey9: #cecece;
  --grey8: #c5c5c5;
  --grey7: #a7a7a7;
  --grey6: #7e7e7e;
  --grey5: #575757;
  --grey4: #363636;
  --grey3: #2b2b2b;
  --grey2: #222222;
  --grey1: #0c0c0c;
  --grey0: #080808;
  /* Noir Grey */

  --body-foreground: #f1f7f9;
  --body-background: #141414;

  --tide-cyan: #00a9c6;
  --abyss-blue: #002b49;
  --inferno-orange: #ff4a25;
  --foam-white: #e0e6e7;
  /*
    ^ Here we kinda break a rule - we change the original
    Foam White to match Dark Mode aesthetic, please forgive me!
  */

  --thematic-blue: var(--abyss-blue);
  --lighter-thematic-blue: var(--lighter-abyss-blue);
  --light-thematic-blue: var(--light-abyss-blue);
  --dark-thematic-blue: var(--dark-abyss-blue);

  --lighter-tide-cyan: #00333b;
  --lighter-abyss-blue: #000b13;
  --lighter-inferno-orange: #661100;

  --light-tide-cyan: #008299;
  --light-abyss-blue: #001f35;
  --light-inferno-orange: #c42100;
  --light-foam-white: #c0bebe;

  --dark-tide-cyan: #37d7f3;
  --dark-abyss-blue: #0d568a;
  --dark-inferno-orange: #ff6f52;
  --dark-foam-white: #ffffff;

  --code-header-background: #030303;
  --code-background: #131313;
  --code-header-foreground: #b6b6b6;
  --code-foreground: #f8f8f2;
  --codebox-border-color: #333333;
}

/* Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth Scrolling - Accessibility */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Genuinely fixing common layout issues */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--body-foreground);
  background-color: var(--body-background);

  font-family: var(--font-face);
  font-size: 16px;
  font-weight: 400;

  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  min-height: 100vh;
  height: 100%;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px 24px;

  text-align: center;
  align-items: center;

  background-color: var(--lighter-thematic-blue);

  border-bottom: 1px solid var(--light-thematic-blue);
}

main {
  text-align: center;
  margin: 20px;
}

/* Layout */
.horizontal-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  height: 80px;

  text-align: center;
  align-items: center;
}

.horizontal-box>*:not(:first-child) {
  margin-left: 16px;
}

.horizontal-box a {
  display: flex;
  text-align: center;
  align-items: center;
  margin-right: 12px;
}

.horizontal-box a span {
  margin-right: 8px;
}

.site-theme-toggle {
  display: inline-block;
  padding: 6px;
}

.nav-link {
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 0px;
  margin: 0px 20px;
  display: inline-block;
  position: relative;
  opacity: 0.85;
}

.nav-link:hover {
  opacity: 1;
  text-decoration: none;
}

.nav-link::before {
  transition: 300ms;
  height: 5px;
  content: "";
  position: absolute;
  background-color: var(--dark-tide-cyan);
  width: 0%;
  bottom: 15px;
}

.nav-link:hover::before {
  width: 100%;
}

/* Colors */
red {
  color: var(--red);
}

orange {
  color: var(--orange);
}

yellow {
  color: var(--yellow);
}

green {
  color: var(--green);
}

cyan {
  color: var(--cyan);
}

blue {
  color: var(--blue);
}

dark-blue {
  color: var(--dark-blue);
}

indigo {
  color: var(--indigo);
}

purple {
  color: var(--purple);
}

magenta {
  color: var(--magenta);
}

hotpink {
  color: var(--hot-pink);
}

black {
  color: var(--black);
}

white {
  color: var(--white);
}

/* Fonts */
.material-symbols-rounded {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.serif {
  font-family: var(--serif-font);
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.monospace {
  font-family: var(--monospace-font);
  font-optical-sizing: auto;
  font-style: normal;
}

.display {
  font-size: 64px;
  font-weight: 800;
}

h1 {
  font-size: 48px;
  font-weight: 700;
}

h2 {
  font-size: 36px;
  font-weight: 600;
}

h2.serif {
  font-weight: 400;
}

h3 {
  font-size: 28px;
  font-weight: 600;
}

h3.serif {
  font-weight: 400;
}

h4 {
  font-size: 22px;
  font-weight: 500;
}

h4.serif {
  font-weight: 400;
}

strong {
  font-weight: 800;
}

p,
.body-text {
  font-size: 16px;
  font-weight: 400;
}

p.serif,
.body-text.serif {
  font-weight: 300;
}

caption,
figcaption,
.caption-text {
  font-size: 12px;
  font-weight: 400;
}

/* Links */
a {
  text-decoration: none;
  color: var(--dark-tide-cyan);
}

a:hover {
  text-decoration: underline var(--tide-cyan);
  color: var(--dark-tide-cyan);
}

a:disabled {
  text-decoration: line-through var(--grey6);
  color: var(--grey6);
}

/* Code */
.code-container {
  padding: 15px;
  margin: 8px;

  text-align: left;

  background-color: var(--code-header-background);
  color: var(--code-header-foreground);

  border-radius: 10px;
}

.code-container .header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

pre {
  padding: 8px;
  clear: both;

  background-color: var(--code-background);
  color: var(--code-foreground);

  border-radius: 10px;
  overflow: auto;

  font-family: var(--monospace-font);
  line-height: 1.5;

  border: 1px solid var(--codebox-border-color);
  white-space: pre-wrap;
}

.codebox-light-theme {
  --code-header-foreground: #030303;
  --code-foreground: #131313;
  --code-header-background: #b6b6b6;
  --code-background: #f8f8f2;
  --codebox-border-color: #8b8b8b;
}

/* Buttons */
button {
  padding: 8px;
  border: 1px solid var(--dark-tide-cyan);
  border-radius: 8px;

  font-family: var(--font-face);
  font-size: 16px;

  background-color: var(--tide-cyan);
  color: var(--black);

  transition: background-color 0.3s ease-in-out;
}

button.secondary {
  background-color: var(--foam-white);
  color: var(--black);

  border: 1px solid var(--dark-foam-white);
}

button.secondary-dark {
  background-color: var(--grey6);
  color: var(--foam-white);

  border: 1px solid var(--grey4);
}

/* Avoid using this variation: looks awful in dark mode */
button.secondary-dark-alt {
  background-color: var(--grey6);
  color: var(--foam-white);

  border: 1px solid var(--grey8);
}

button.destructive {
  background-color: var(--inferno-orange);
  color: var(--black);

  border: 1px solid var(--dark-inferno-orange);
}

button:hover {
  background-color: var(--dark-tide-cyan);
}

button.secondary:hover {
  background-color: var(--dark-foam-white);
}

button.secondary-dark:hover {
  background-color: var(--grey4);
}

button.secondary-dark-alt:hover {
  background-color: var(--grey8);
}

button.destructive:hover {
  background-color: var(--dark-inferno-orange);
}

button span.material-symbols-rounded {
  font-size: 20px;
}

/* Responsive Layout */
@media (max-width: 900px) {
  .invisible-on-mobile {
    visibility: hidden;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  main {
    margin: 10px;
  }

  .horizontal-box {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
  }

  .horizontal-box>*:not(:first-child) {
    margin-left: 10px;
  }

  .display {
    font-size: 48px;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 16px;
  }

  p,
  .body-text {
    font-size: 12px;
  }

  caption,
  figcaption,
  .caption-text {
    font-size: 10px;
  }
}