@import url("https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Rubik+80s+Fade&family=Rubik+Glitch&family=Space+Grotesk:wght@300..700&display=swap");

@media (prefers-color-scheme: light) {
  :root {
    --text: #0a0712;
    --background: #f6f4fb;
    --primary: #6e4ec6;
    --secondary: #ae9be4;
    --accent: #8566db;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f0edf8;
    --background: #06040b;
    --primary: #5939b1;
    --secondary: #2f1b64;
    --accent: #432499;
  }
}

body {
  font-family: "Space Grotesk";
  font-weight: 400;
  background-color: var(--background);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Bitcount Grid Single";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
}

html {
  font-size: 100%;
} /* 16px */

h1 {
  font-size: 4.21rem; /* 67.36px */
}

h2 {
  font-size: 3.158rem; /* 50.56px */
}

h3 {
  font-size: 2.369rem; /* 37.92px */
}

h4 {
  font-size: 1.777rem; /* 28.48px */
}

h5 {
  font-size: 1.333rem; /* 21.28px */
}

small {
  font-size: 0.75rem; /* 12px */
}

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

a:hover {
  color: #ff00ff;
  transition: color 0.3s;
}

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

.top-bar {
  outline: var(--accent) 1px solid;
  margin: 10px;
  padding: 10px;
}

.cards-container {
  display: flex;
}

.card {
  background: var(--background);
  /* border-radius: 10px; */
  width: 300px;
  height: 450px;
  display: flexbox;
  overflow: hidden;
  margin: 10px;
  padding: 10px;
  outline: var(--accent) 1px solid;
}

.title-404 {
  font-family: "Rubik Glitch";
  color: var(--text);
}

.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  overflow: hidden;
}