:root {
  --bg-color: rgb(0, 119, 230);
  --bg-color-secondary: rgb(71, 194, 10);
  --text-dark: rgb(0, 0, 0);
  --text-light: rgb(255, 255, 255);
  --text-secondary-dark: rgb(56, 138, 15);
  --text-secondary-light: rgb(255, 170, 0);

  --primary-font: "Montserrat";
  --secondary-font: "Kaushan Script";
  --header-bg: url("/img/assets/leaf-expanded.jpg");

  --base-font-size: 120%;
}

/* Base */

html {
  position: relative;
}

body {
  padding: 0;
  margin: 0;
  color: rgb(255, 255, 255);
  color: var(--text-light);
  font-family: "Roboto Condensed";
  font-weight: 400;
  font-size: 120%;
  font-size: var(--base-font-size);
  background-image: url("/img/assets/bg-texture.png");
  background-color: rgb(0, 119, 230);
  background-color: var(--bg-color);
  background-blend-mode: screen;
}

.wrapper {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto; 
}

main {
  padding: 20px 30px; 
}

hr {
  margin: 40px auto;
  width: 33%;
  border-width: 0.5px;
  color: rgb(255, 255, 255);
  color: var(--text-light);
}

h1,
h2,
h3,
h4,
h5 {
  color: rgb(255, 170, 0);
  color: var(--text-secondary-light);
  font-weight: normal;
  font-style: italic;
  font-family: "Kaushan Script";
  text-align: center;
}

h1, .hd1 {
  font-size: calc(120% * 1.4);
  font-size: calc(var(--base-font-size) * 1.4);
}

h2, .hd2 {
  font-size: calc(120% * 1.3);
  font-size: calc(var(--base-font-size) * 1.3);
}

h3, .hd3 {
  font-size: calc(120% * 1.2);
  font-size: calc(var(--base-font-size) * 1.2);
}

h4, .hd4 {
  font-size: calc(120% * 1.1);
  font-size: calc(var(--base-font-size) * 1.1);
}

li {
  list-style: none;
}

a {
  color: rgb(255, 170, 0);
  color: var(--text-secondary-light)
}

a:hover,
a:visited:hover {
  color: rgb(230, 153, 0);
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
a:hover,
a:visited:hover {
  color: hsl(from var(--text-secondary-light) h s calc(l * 0.9));
}
}

a:visited {
  color: rgb(204, 136, 0);
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
a:visited {
  color: hsl(from var(--text-secondary-light) h s calc(l * 0.8));
}
}

blockquote em {
  font-weight: 300;
}

blockquote {
  position: relative;
  line-height: 1.3;
  letter-spacing: 5%;
}

blockquote::before {
  font-family: "Kaushan Script";
  font-family: var(--secondary-font);
  content: "\201C";
  position: absolute;
  left: -0.8em;
  top: -0.5em;
  line-height: 1;
  font-size: 300%;
  color: rgb(168, 208, 245);
  z-index: -1;
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
blockquote::before {
  color: hsl(from var(--bg-color) h calc(s * 0.8) calc(l * 1.8));
}
}

/* blockquote::after { */
/*   font-family: var(--secondary-font); */
/*   content: "\201D"; */
/*   position: absolute; */
/*   right: -0.2em; */
/*   bottom: -0.5em; */
/*   line-height: 1; */
/*   font-size: 300%; */
/*   color: hsl(from var(--bg-color) h calc(s * 0.8) calc(l * 1.8)); */
/*   z-index: -1; */
/* } */

/*
 *  # Helpers
 */

.secondary {
  color: rgb(255, 170, 0);
  color: var(--text-secondary-light);
}

.secondary-darker {
  color: rgb(56, 138, 15);
  color: var(--text-secondary-dark)
}

.primary-font {
  font-family: "Montserrat";
  font-family: var(--primary-font);
}

.secondary-font {
  font-family: "Kaushan Script";
  font-family: var(--secondary-font);
}

.centered {
  text-align: center;
}

.left-aligned {
  text-align: left;
}

.right-aligned {
  text-align: right;
}

.regular {
  font-style: regular;
}

.thin {
  font-weight: 200;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.float-right {
  float: right;
}

.title {
  font-family: "Kaushan Script";
  font-family: var(--secondary-font);
}

.subtitle {
  color: rgb(255, 170, 0);
  color: var(--text-secondary-light);
  font-weight: 400;
}

.bigger {
  font-size: larger;
}

.smaller {
  font-size: smaller;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.p-0 {
  padding: 0;
}

.m-0 {
  margin: 0;
}

/*
 *  ## Lists
 */

.list-none {
  list-style: none;
  padding: 0px;
}

.list-circle li {
  list-style-type: circle;
}

.list-disc li {
  list-style-type: disc;
}

.list-diamond li {
  list-style-type: "⟡ ";
}

.list-leaf li {
  list-style: url("/img/leaf-bullet.png");
}

/*
 *  # Components
 */

/* BG 1
.topnav {
  background-image:  var(--header-bg), 
    linear-gradient(
      hsl(0 0% 80%),
      hsl(0 0% 25%)
    );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  height: 300px;
  color: var(--text-secondary-light);
  position: relative;
  border-bottom: solid 1px hsl(from var(--bg-color) h s calc(l * 0.5));
}
*/

.topnav {
  background-image:  url("/img/assets/leaf-expanded.jpg"), 
    linear-gradient(
      hsl(0, 0%, 60%),
      hsl(0, 0%, 40%)
    );
  background-image:  url("/img/assets/leaf-expanded.jpg"), 
    linear-gradient(
      rgb(153, 153, 153),
      rgb(102, 102, 102)
    );
  background-image:  var(--header-bg), 
    linear-gradient(
      rgb(153, 153, 153),
      rgb(102, 102, 102)
    );
  background-blend-mode: overlay;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 40%;
  height: 250px;
  color: rgb(255, 170, 0);
  color: var(--text-secondary-light);
  position: relative;
  border-bottom: solid 4px rgb(0, 119, 230);
  border-bottom: solid 4px var(--bg-color);
}

.topnav-heading {
  font-size: calc(120% * 2);
  font-size: calc(var(--base-font-size) * 2);
  font-family: "Kaushan Script";
  font-family: var(--secondary-font);
  font-weight: 500;
  font-style: italic;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
}

.topnav-inner {
  position: absolute;
  padding-bottom: 40px;
  bottom: 0px;
  width: 100%;
}

.topnav-inner a {
  color: rgb(255, 170, 0);
  color: var(--text-secondary-light);
}

.topnav nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.topnav nav li {
  display: inline-block;
  margin-right: 10px;
}

.book-summary {
  display: flex;
  flex-wrap: wrap;
}

.book-summary-row {
  display: flex;
  flex: auto;
  width: 100%;
  padding-bottom: 20px;
  align-items: center;
}

.book-summary-row img {
  padding: 10px 30px;
}

.header-img {
  width: 250px;
}

.home-top {
  margin-top: 50px;
}

.header-title {
  font-size: xxx-large;
}

.header-subtitle {
  font-weight: normal;
}

.header-greeting {
  font-size: xxx-large;
}

footer {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  color: rgb(255, 255, 255);
  color: var(--text-light);
}

.footer-header,
.footer-email-label {
  font-family: "Kaushan Script";
  font-weight: bolder;
}

.endorsements {
  margin: 0px 0px; 
  gap: 5px;
}

.attribution, 
.credentials {
  padding-left: 40px;
}


/* Overrides */
/* NOTE: these rules need to stay at the bottom */