@font-face { /* font-family: Aboreto-Regular, serif; */
  font-family: 'Aboreto-Regular';
  src: url('./fonts/Aboreto-Regular-Webfont.woff2') format('woff2'),
       url('./fonts/Aboreto-Regular-Webfont.woff') format('woff'),
       url('./fonts/Aboreto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { /* font-family: Dakota-Rough-Outline, serif; */
  font-family: 'Dakota-Rough-Outline';
  src: url('./fonts/DakotaRoughOutline-Regular.woff2') format('woff2'),
       url('./fonts/DakotaRoughOutline-Regular.woff') format('woff'),
       url('./fonts/Dakota-Outline.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}
@font-face { /* font-family: Switzer-Variable, serif; */
  font-family: 'Switzer-Variable';
  src: url('./fonts/Switzer-Variable.woff2') format('woff2'),
       url('./fonts/Switzer-Variable.woff') format('woff'),
       url('./fonts/Switzer-Variable.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}

:root {
  --ht-color-link: #b3bf9b;
}
body {
  display: flex;
  flex-flow: column;
  font-family: Switzer-Variable, serif;
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 3%;
  padding-bottom: 5%;
  background-color: #fef8ec;
  color: #7d829c;
}
body a {
  color: #558859;
  text-decoration: none;
}
header {
  align-items: center;
  background-color: var(--ht-color-link);
  display: flex;
  flex-flow: row wrap;
  font-family: Dakota-Rough-Outline, serif;
  font-weight: bold;
  height: 20%;
  justify-items: left;
  padding: 1em;
}
.question {
  font-weight: bold;
}
.answer {
  padding-left: 5em;
}
.logo {
  flex: 2 20%;
  justify-self: left;
  border: none;
}
.nav {
  flex: 1 30%;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-self: flex-end;
  justify-content: flex-end;
}
.nav a {
  color: #7d829c;
  padding-right: 10%;
  font-size: x-large;
  font-weight: bold;
}
.home {
  align-content: center;
  font-size: large;
  margin: 0 10%;
}
.homelink {
  background-color: #ffffad;
  border: 3px solid #558859;
  border-radius: 25px;
  color: var(--ht-color-link);
  font-family: Dakota-Rough-Outline, serif;
  font-size: x-large;
  justify-content: center;
  margin: 2% 38%;
  padding: 1%;
}
/* Dropdown Menu */
.dropdown { /* container <div> */
  position: relative;
  display: inline-block;
}
.dropbtn {
  background-color: #a5daf3;
  color: #fefefe;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.droplnk {
  display: none;
  position: absolute;
  background-color: #a5daf3;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.droplnk a { /* links inside the dropdowns */
  color: #fefefe;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.droplnk a:hover { /* Change color of dropdown links on hover */
  background-color: #ffffad;
}
.dropdown:hover .droplnk {display: block;} /* Show the dropdown menu on hover */
.dropdown:hover .dropbtn {background-color: #558859;} /* Change the background color of the dropdown button when the dropdown content is shown */

.main {
  display: flex;
  flex-flow: column;
  align-items: left;
  justify-content: center;
  padding: 3%;
}
.main a {
  color: var(--ht-color-link);
  font-weight: bold;
}
footer {
  background-color: var(--ht-color-link);
  padding: 1em;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  font-size: 15px;
  color: #7d829c;
  font-weight: bold;
}