:root {
  --font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size: 17px;
  --line-height: 1.45;
  --container-width: 660px;
  --container-padding-x: 15px;

  --body-bg: #fff;
  --body-color: #222;
  --link-color: #1565c0;
  --link-hover-color: color-mix(in srgb, var(--link-color) 50%, #000);
  --primary-color: #3e7e31;
  --muted-color: #656a64;

  --border-radius: .25rem;
  --hr-color: #d6e1d6;
  --input-bg: #f2f2f2;
  --input-placeholder-color: #757575;
  --button-bg: var(--primary-color);
  --button-color: #fff;
  --blockquote-bg: #e7f2e7;
  --blockquote-color: #2c2f29;

  --avatar-width: 120px;
  --avatar-sm-width: 70px;

  --card-bg: #f2f2f2;

  /* Spacings */
  --spacing-1: .25rem;
  --spacing-2: .5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #1b1c1b;
    --body-color: #ecf0ec;
    --link-color: #66bf53;
    --link-hover-color: color-mix(in srgb, var(--link-color) 60%, #FFF);
    --muted-color: #888e88;
    --hr-color: #3b403b;
    --input-bg: #3e403e;
    --input-placeholder-color: #a7aca7;
    --blockquote-bg: #353935;
    --blockquote-color: #efd;
    --card-bg: #2c2d2c;
  }
}

@media (max-width: 600px) {
  :root {
    --font-size: 16px;
    --avatar-width: 80px;
  }
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-weight: 400;
  text-align: left;
}

h1, h2, h3,
h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-2);
}

article {
  display: block;
}

p {
  margin-top: 0;
  margin-bottom: var(--spacing-3);
}

blockquote {
  margin-top: 0;
  margin-bottom: var(--spacing-3);
  margin-right: 0;
  margin-left: 0;
}

input, button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
}

[type="submit"] {
  -webkit-appearance: button;
}

[type="submit"]:not(:disabled) {
  cursor: pointer;
}

ul {
  padding-left: 2rem;
  margin-top: 0;
  margin-bottom: var(--spacing-3);
}

ul li {
  margin-bottom: var(--spacing-1);
}

/* --- Main --- */
body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  background-color: var(--body-bg);
  color: var(--body-color);
  margin: 0;
}

a {
  background-color: transparent;
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.container {
  max-width: var(--container-width);
  margin: auto;
  padding-right: var(--container-padding-x);
  padding-left: var(--container-padding-x);
}

/* --- Elements --- */
h1 {
  font-size: 1.75rem;
  margin-bottom: var(--spacing-3);
}

article h3 {
  margin-top: var(--spacing-4);
}

article img {
  max-width: 100%;
  height: auto;
}

article img + em {
  display: block;
  font-size: 80%;
  color: var(--muted-color);
  text-align: center;
}

blockquote {
  padding: var(--spacing-3);
  background-color: var(--blockquote-bg);
  color: var(--blockquote-color);
  font-size: 90%;
  border-left: 3px solid var(--blockquote-color);
}

blockquote > p:last-child {
  margin-bottom: 0;
}

hr {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--hr-color);
  width: 60%;
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* --- Components --- */
.avatar {
  width: var(--avatar-width);
  height: auto;
  border-radius: var(--border-radius);
}

.avatar.avatar--sm {
  width: var(--avatar-sm-width);
}

.card {
  padding: var(--spacing-3);
  border-radius: var(--border-radius);
}

.card:not(.card--bordered) {
  background-color: var(--card-bg);
}

.card--bordered {
  border: 1px solid var(--card-bg);
}

.form-input {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius);
  background-color: var(--input-bg);
  color: var(--body-color);
  border: 1px solid var(--input-bg);
}

.form-input::placeholder {
  color: var(--input-placeholder-color);
}

.form-input:focus {
  outline: 0;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px var(--primary-color);
}

.button {
  background-color: var(--button-bg);
  color: var(--button-color);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius);
  border: 1px solid var(--button-bg);
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

.photos-grid img {
  width: 100%;
}

/* --- Utils --- */
.text-muted { color: var(--muted-color); }
.text-sm { font-size: 90%; }
.text-xs { font-size: 80%; }
.text-center { text-align: center; }
.list-style-none { list-style: none; }

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.justify-content-end    { justify-content: flex-end; }
.align-items-start { align-items: flex-start; }
.gap-3 { gap: var(--spacing-3); }

@media (min-width: 601px) {
  .flex-m-row {
    flex-direction: row;
  }
}

.ms-1 { margin-left: var(--spacing-1); }
.me-3 { margin-right: var(--spacing-3); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mt-3 { margin-top: var(--spacing-3); }

@media (min-width: 601px) {
  .me-m-2 {
    margin-right: var(--spacing-2);
  }

  .mb-m-0 {
    margin-bottom: 0;
  }
}

.pt-3 { padding-top: var(--spacing-3); }
.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}