html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: lightskyblue;
}

* {
  box-sizing: border-box;
}
main {
  display: flex;
  flex-direction: row;
  gap: 10rem;
  height: 100%;
}
nav {
  background-color: #2d2d2d;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 3rem;
  padding-right: 3rem;
}

.social {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

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