*, *::after, *::before {
  /* outline: 0.8px solid rgba(255, 0, 0, 0.761); */
  box-sizing: border-box;
}

:root {
  --bg-1: rgb(202, 235, 251);
  --bg-2: rgb(16, 40, 57);
  --c1: #231454;
  --c2: #3c3c3c;
  --spacing-unit: 8px;
  --pad1: round(calc(0.8 * var(--spacing-unit)), 1px);
  --pad2: round(calc(1 * var(--spacing-unit)), 1px);
  --pad3: round(calc(2 * var(--spacing-unit)), 1px);
  --pad4: round(calc(2 * var(--spacing-unit)), 1px);
  --fb-smalltext: 1px;
  --fb-largetext: 1px;
  --fs1: round(calc(var(--fb-smalltext) * 12), 1px);
  --fs2: round(calc(var(--fb-smalltext) * 14), 1px);
  --fs3: round(calc(var(--fb-smalltext) * 16), 1px);
  --fs4: round(calc(var(--fb-smalltext) * 18), 1px);
  --fl1: round(calc(24 * var(--fb-largetext)), 1px);
  --fl2: round(calc(32 * var(--fb-largetext)), 1px);
  --fl3: round(calc(46 * var(--fb-largetext)), 1px);
}

html {
  width: 100%;
  height: 100%;
}

h1, h2, h3, h4, h5, h6, a, p, span, strong, em, label, pre {
  margin: 0;
  padding: 0;
  max-width: 60ch;
}

h1 {
  font-size: var(--fl3);
}

h2 {
  font-size: var(--fl2);
  margin-bottom: var(--pad1);
  text-align: left;
  margin-right: auto;
}

h3 {
  font-size: var(--fl1);
  margin-bottom: var(--pad1);
  text-align: left;
}

figcaption {
  color: var(--c2);
  font-size: var(--fs2);
}

p, a {
  font-size: var(--fs4);
  line-height: 1.25;
  margin-bottom: var(--pad1);
}

body {
  font-family: "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;
  background-color: rgb(202, 235, 251);
  color: #231454;
  background-image: url(media/image_3.jpg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  display: grid;
  grid-template-areas: "col1 col2 col3";
  padding-left: 5%;
  padding-right: 5%;
  grid-template-columns: 20% 60% 20%;
  padding-top: 5%;
  max-width: 1000px;
  min-width: 100%;
}

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