html, body {
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

body > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

h1 {
  font-weight: normal;
  font-size: calc(2vw + 12px);
  margin: 0;
}

p {
  font-size: calc(1vw + 12px);
  margin: 0;
}

#logo {
  padding: 12px;
  width: 80%;
  height: 80%;
  align-self: center;
}

.social {
  height: 48px;
  width: 48px;
  transition: 0.3s;
  filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(145deg) brightness(110%) contrast(101%);
}

.social:hover {
  filter: none;
  transition: 0.3s;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
  #logo {
    filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(145deg) brightness(110%) contrast(101%);
  }
}

@media (prefers-color-scheme: white) {
  body {
    background: white;
    color: black;
  }
}