* {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-wrap: pretty;
  /* 
  color: light-dark(white, rgb(12, 12, 12));
  background-color: light-dark(rgb(12, 12, 12), white); */
}

@media (prefers-color-scheme: dark) {
  * {
    color: white;
    background-color: rgb(12, 12, 12);
  }
}

:root {
  color-scheme: light dark;
}

html,
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

img {
  width: 50%;
}

#header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

#main {
  width: min(400px, 90%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#paragraphs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}