:root {
  --color-scheme: dark;

  --primary-color: #23b5e8;
  --white-color: #fefefe;

  --neutral-200: #bbb;
  --shadow: #fefefe80;
  --light-shadow: #01050880;

  --size: 0.25rem;
  --max-width: 1280px;
  --transition-duration: 0.25s;

  --primary-font: "Roboto", sans-serif;

  --primary-text: var(--white-color);
  --secondary-text: var(--neutral-200);
  --border-radius: calc(var(--size) * 2);

  color-scheme: var(--color-scheme);
}

.body {
  margin: 0;
  font-family: var(--primary-font);
}

.container {
  max-width: var(--max-width);
  padding-inline: calc(var(--size) * 4);
  margin-inline: auto;
}

.header {
  position: fixed;
  z-index: 5;
  top: 0;
  width: 100%;
  box-shadow: 0 0 calc(var(--size) * 0.5) calc(var(--size) * 0.25) var(--shadow);
  background-color: var(--light-shadow);
  backdrop-filter: blur(var(--size));
}

.nav {
  padding-block: calc(var(--size) * 4);
}

.hero {
  position: relative;
  padding-block: calc(var(--size) * 20);
}

.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.img {
  display: block;
  object-fit: cover;
}

.img--background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 0.75;
}

.link {
  position: relative;
  color: var(--primary-text);
  text-decoration: none;
  transition: color var(--transition-duration);

  &::before {
    content: "";
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.0625em;
    background-color: var(--primary-color);
    transform: scale(0);
    transition: transform var(--transition-duration);
  }

  &:hover {
    color: var(--primary-color);

    &::before {
      transform: scale(1);
    }
  }
}

.title {
  margin: 0;
  font-size: calc(var(--size) * 8);
  font-weight: 800;
}

.title--lg {
  font-size: calc(var(--size) * 9);
}

.subtitle {
  margin: 0;
  /* ToDo: Update font */
  font-size: calc(var(--size) * 6);
  font-weight: 700;
}

.text {
  margin: 0;
  font-size: calc(var(--size) * 4);
}

.button {
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background-color: var(--primary-color);
  color: black;
  text-decoration: none;
}

.d-flex {
  display: flex;
}

.f-direction-column {
  flex-direction: column;
}

.d-grid {
  display: grid;
}

.a-items-start {
  align-items: flex-start;
}

.a-items-center {
  align-items: center;
}

.j-content-center {
  justify-content: center;
}

.j-content-end {
  justify-content: flex-end;
}

.j-items-center {
  justify-items: center;
}

.g-2 {
  gap: calc(var(--size) * 2);
}

.g-3 {
  gap: calc(var(--size) * 3);
}

.g-5 {
  gap: calc(var(--size) * 5);
}

.f-1 {
  flex: 1;
}

@media (width >=768px) {
  .md\:g-template-columns-1fr-1fr {
    grid-template-columns: 1fr 1fr;
  }
}

.c-secondary-text {
  color: var(--secondary-text);
}