@font-face {
  font-family: "et-book";
  src: url("et-book-roman-line-figures.woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "et-book";
  src: url("et-book-display-italic-old-style-figures.woff");
  font-weight: normal;
  font-style: italic;
}

:root {
  font-size: 15px;
  --bg: #fffff8;
  --fg: #111;
  --recent: red;
  --greatLink: salmon; /* ad color */
  --pageLink: brown;
  --trend: #00008B;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #20201e;
    --fg: #d0cac1;
    --recent: #ff6060;
    --greatLink: #b39292; /* don't change */
    --pageLink: #b39292;
    --trend: #ADD8E6;
  }
}



/* LAYOUT */
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: et-book, serif;
  margin: 0 auto;
  max-width: 1280px;
  padding-left: 12.5%;
  width: 87.5%;
}
header {
  padding-top: 4rem;
}
main {
  padding-bottom: 2rem;
}
section {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
footer {
  font-style: italic;
  padding-bottom: 5rem;
  padding-top: 1rem;
}



/* TEXT */
h1 {
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 1.5rem;
  margin-top: 4rem;
}
h2 {
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 2rem;
  margin-top: 2.1rem;
}
h3 {
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
h4 {
  color: var(--trend);
  /* font-style: italic; */
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
  display: inline;
}
p.subtitle {
  display: block;
  font-size: 1.8rem;
  font-style: italic;
  line-height: 1;
  margin-bottom: 3rem;
  margin-top: 1rem;
}
p, ul {
  font-size: 1.4rem;
  line-height: 2rem;
  margin-bottom: 1.4rem;
  margin-top: 1.4rem;
  padding-right: 0;
  vertical-align: baseline;
}
ul {
  width: 53%;
  -webkit-padding-start: 2%;
  -moz-padding-start: 2%;
}
li {
  margin-bottom: 0.8rem;
  margin-top: 0.8rem;
}
li:not(:first-child) {
  margin-top: 0.25rem;
}



/* NAVIGATION */
details>summary {
  list-style-type: none;
  outline: none;
}
details>summary::-webkit-details-marker {
  display: none;
}
details>summary::before {
  content: '=';
  font-size: 3rem;
}
details[open]>summary::before {
  content: '–';
  font-size: 3rem;
}



/* EXTRAS */
hr {
  height: 1px;
  width: 99%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
.recent {
  color: var(--recent);
}
.greatLink {
  color: var(--greatLink);
  font-size: 1.25rem;
}
.pageLink {
  color: var(--pageLink);  
}
.fullwidth {
  max-width: 90%;
  clear: both;
}



/* SCREENS */
@media (max-width: 1024px) {
  body {
	width: 86%;
	padding-left: 7%;
	padding-right: 7%;
  }
  hr, section > p {
	width: 100%;
  }
  ul {
	width: 96%;
	-webkit-padding-start: 4%;
	-moz-padding-start: 4%;
  }
  li {
	margin-bottom: 1.2rem;
	margin-top: 1.2rem;
  }
}



/* LINKS */
a:link {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-position: under;
}

a:visited {
  color: gray;
}

::selection {
  background: black;
  color: white;
}