:root {
  --container-color-text-primary: rgb(28, 28, 30);
  --container-color-text-secondary: rgb(115, 115, 115);
  --container-color-background: white;
  --container-color-background-lighter: #eee; }
  @media (prefers-color-scheme: dark) {
    :root {
      --container-color-text-primary: white;
      --container-color-text-secondary: rgb(139, 139, 139);
      --container-color-background: rgb(28, 28, 30);
      --container-color-background-lighter: #333; } }

body {
  background: var(--container-color-background);
  color: var(--container-color-text-primary);
  font-family: Quicksand, sans-serif;
  margin: 0; }

a {
  text-decoration: none;
  color: var(--container-color-text-primary); }
  a:hover {
    text-decoration: underline; }

p, li, .text {
  color: var(--container-color-text-secondary); }

p {
  margin: 0; }

html {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400; }

body, html {
  margin: 0;
  padding: 0; }

.content {
  max-width: 800px;
  margin: 0 auto; }

#header {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 75vh;
  padding: 0 32px; }
  #header h1 {
    display: none; }
  #header .logo {
    max-width: 100%;
    overflow: hidden;
    max-height: 120px; }
  #header #logo-light {
    display: block; }
  #header #logo-dark {
    display: none; }
  @media (prefers-color-scheme: dark) {
    #header #logo-light {
      display: none; }
    #header #logo-dark {
      display: block; } }

#projects {
  margin: 32px;
  text-align: center; }
  #projects img {
    overflow: hidden;
    width: 100%; }

.block {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0; }
  .block.divider {
    border-top: 1px solid var(--container-color-text-secondary); }

footer {
  text-align: center;
  padding: 16px; }
  footer a {
    color: var(--container-color-text-secondary); }

/*# sourceMappingURL=styles.css.map */