:root {
  --var-primary-color-theme: rgb(255, 255, 255);
  --var-secondary-color-theme: rgb(186, 186, 186);
  --var-primary-text-color-theme: black;
  --var-secondary-text-color-theme: rgb(62, 62, 62);
}
html,
body {
  font-size: 16px;
  font-family: 'Merriweather';

  padding: 1rem;
  box-sizing: border-box;

  background: var(--var-primary-color-theme);
  color: var(--var-primary-text-color-theme);
}

#intro {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
h1 {
  font-size: 35px;
}

h2 {
  max-width: 1100px;
  margin: 0 auto;
}

a {
  color: inherit;
}

section {
  max-width: 1100px;
  margin: 0 auto;

  padding-bottom: 2rem;
}

.breakout {
  max-width: none;
}

i {
  color: var(--var-secondary-text-color-theme);
}

#profile {
  width: 45%;
  object-fit: contain;
}
#about {
  width: 50%;
}

.image {
  width: min(700px, 100%);
  aspect-ratio: 2/1.3;
  object-fit: cover;
}

.small {
  width:  min(450px, 100%)
}

@media (max-width: 1000px) {
  #profile {
    width: 80%;
  }
  #about {
    width: 100%;
  }
}
@media (max-width: 500px) {
  html,
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 25px;
  }
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --var-primary-color-theme: rgb(27, 27, 27);
        --var-secondary-color-theme: rgb(75, 75, 75);
        --var-primary-text-color-theme: white;
        --var-secondary-text-color-theme: rgb(183, 183, 183);
    }
   .contact {
        filter: brightness(1);
   }
  } */