styles.css

/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"),
    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: Helvetica, "Roboto", sans-serif;
}

h1 {
  font-size: 2.5rem;
}

header {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 250px;
  grid-gap: 30px;
}

header,
main {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

header > img {
  border-radius: 150px;
  box-shadow: 0px 0px 15px 5px #3f3334;
}

footer > p {
  margin: auto;
  width: fit-content;
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: #1f262f;
    color: #dedede;
  }

  header > img {
    border-radius: 150px;
    box-shadow: 0px 0px 15px 5px #4e626f;
  }

  a {
    color: #80d8ec;
  }

  a:visited {
    color: #e89f51;
  }
}