/*** TYPOGRAPHY ***/

@import url("https://fonts.cdnfonts.com/css/caros-soft");

html {
  font-size: 100%;
  font-family: ui-rounded, "Caros Soft", sans-serif;
}

i {
  font-style: initial;
}

body {
  font-weight: 400;
  line-height: 1.75;
}

p {
  margin-bottom: 1rem;
}

p strong {
  font-weight: 600;
}

h2 {
  /* margin: 3rem 0 1.38rem; */
  margin: 0;
  margin-bottom: 1.38rem;
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.728rem;
}

header > a:first-child {
  font-size: 1.2rem;
}

table,
.small {
  font-size: 0.833rem;
}

a,
a:link,
a:visited {
  text-decoration: none;
  font-weight: 500;
}

/*** LAYOUT ***/

body * {
  box-sizing: border-box;
}

body {
  margin: 0;
}
header {
  padding: 1rem 2rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
header > a:first-child {
  margin-right: auto;
}
main {
  margin: 2rem 2rem 12rem;
}
main > div {
  display: inline-block;
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 10px;
  padding: 2rem 2rem 3rem;
}

#index {
  column-count: auto;
  column-width: 22rem;
  column-gap: 3rem;
}
#about > div {
  max-width: 22rem;
  display: block;
  margin: 0 auto;
}

@media (min-width: 42rem) {
  header {
    padding: 1rem 4rem;
  }
  main {
    margin: 3rem 4rem 12rem;
  }
}

/*** TABLE ***/

table {
  border-spacing: 0.5rem;
  margin: -0.5rem;
  margin-top: 1rem;
}
td {
  vertical-align: top;
}
td:nth-child(1),
td:nth-child(2),
td:nth-child(3) {
  text-align: right;
}

@media (max-width: 36rem) {
  td:nth-child(1) {
    display: none;
  }
}

@media (max-width: 38rem) {
  td:nth-child(3) {
    display: none;
  }
}

/*** COLOR ***/

body {
  color: #777;
  background-color: #f5f5f5;
}

header,
main > div {
  background-color: white;
}

a:link,
a:visited {
  color: black;
}

header {
  border-bottom: 2px solid #777;
}

main > div {
  border: 2px solid #777;
  border-bottom: 6px solid #777;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: black;
  }

  header,
  main > div {
    background-color: #222;
  }

  a:link,
  a:visited {
    color: white;
  }

  header {
    border-bottom: 4px solid #333;
  }

  main > div {
    border: 0;
    border-bottom: 6px solid #333;
  }
}