* {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: "Teko";
  src: url("assets/fonts/Teko-VariableFont_wght.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  /* colors */
  --main-c: rgb(255, 0, 0);
  --text-c: #ffffff;
  --bkg-c: linear-gradient(
    to bottom,
    #000000,
    #050505,
    #090909,
    #0d0d0d,
    #111111
  );
  /* sizing */
  --xlg: 2.369rem;
  --lg: 1.777rem;
  --md: 1.333rem;
  --sm: 1rem;
  --xsm: 0.75rem;
  /* Font size */
  --fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
  --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
  --fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
  --fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
  --fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
  --fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
  --fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);
}

body {
  color: #ffffff;
  font-size: var(--fs-base);
  font-family: Teko, serif, sans-serif;
  font-optical-sizing: auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  background-image: var(--bkg-c);
  background-size: 100% auto cover;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "navbar navbar"
    "main main"
    "footer footer";
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  text-align: center;
}
h1 {
  font-size: var(--fs-xxl);
}
h2 {
  font-size: var(--fs-xl);
}
ul {
  list-style: none; /* Removes the bullet points */
}
a {
  color: #ffffff;
  text-decoration: underline var(--main-c);
}
nav {
  grid-area: navbar;
  padding: 1em;
}
main {
  grid-area: main;
  display: flex;
  justify-content: center;
}
#logo {
  width: 60%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  padding: 2em;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.container {
  max-width: 500px;
}
.social-icons {
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-icons li {
  display: inline-block;
}
.social-icons a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: background 0.3s;
}

::-moz-selection {
  background: var(--main-c);
  text-shadow: none;
}

::selection {
  background: var(--main-c);
  text-shadow: none;
}