/* extracted from https://unpkg.com/@catppuccin/palette@1.8.0/css/catppuccin.css */
:root {
  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-subtext1: #bac2de;
  --ctp-mocha-subtext0: #a6adc8;
  --ctp-mocha-overlay2: #9399b2;
  --ctp-mocha-overlay1: #7f849c;
  --ctp-mocha-overlay0: #6c7086;
  --ctp-mocha-surface2: #585b70;
  --ctp-mocha-surface1: #45475a;
  --ctp-mocha-surface0: #313244;
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-mantle: #181825;
  --ctp-mocha-crust: #11111b;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url(fonts/JetBrainsMono-Regular.woff2) format('woff2');
}

body {
  background-color: var(--ctp-mocha-base);
  color: var(--ctp-mocha-text);
  font-family: "JetBrains Mono", monospace;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

a {
  color: var(--ctp-mocha-sapphire);
}

#container {
  margin: auto;
  padding: 0 16px;
  flex: 1;
  display: flex;
}

@media (min-width: 720px) {
  #container {
    gap: 100px;
    flex-direction: row;
  }
}

@media (max-width: 719px) {
  #container {
    flex-direction: column;
    justify-content: space-evenly;
  }
}

#container header, #container main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

header h1 {
  font-size: 48px;
}

main {
  color: var(--ctp-mocha-subtext1);
}

main ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

main ul a {
  display: inline-block;
}

main ul svg {
  height: 36px;
  width: 36px;
  vertical-align: center;
  color: var(--ctp-mocha-text);
}

footer {
  margin: 0 auto;
  padding: 0 16px;
  color: var(--ctp-mocha-subtext1);
}

footer svg {
  width: 1em;
  height: 1em;
  vertical-align: center;
}

footer p {
  text-align: center;
}

footer span {
  display: inline-block;
}

/** prevent a fouc **/
html {
  visibility: visible;
  opacity: 1;
}