@font-face {
  font-family: "Bitter";
  src:
    url("fonts/bitter/Bitter-VariableFont_wght.woff2") format("woff2"),
    url("fonts/bitter/Bitter-VariableFont_wght.woff") format("woff"),
    url("fonts/bitter/Bitter-VariableFont_wght.ttf") format("truetype");
  font-weight: 100-900;
  font-style: normal;
}

@font-face {
  font-family: "Bitter";
  src:
    url("fonts/bitter/Bitter-Italic-VariableFont_wght.woff2") format("woff2"),
    url("fonts/bitter/Bitter-Italic-VariableFont_wght.woff") format("woff"),
    url("fonts/bitter/Bitter-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100-900;
  font-style: italic;
}

@font-face {
  font-family: "Arvo";
  src:
    url("fonts/arvo/arvo-regular-webfont.woff2") format("woff2"),
    url("fonts/arvo/arvo-regular-webfont.woff") format("woff"),
    url("fonts/arvo/Arvo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Saira";
  src:
    url("fonts/saira/saira-variablefont_wdth,wght.woff2") format("woff2"),
    url("fonts/saira/saira-variablefont_wdth,wght.woff") format("woff"),
    url("fonts/saira/Saira-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100-900;
  font-style: normal;
}

@font-face {
  font-family: "Spectral";
  src:
    url("fonts/spectral/spectral-regular-webfont.woff2") format("woff2"),
    url("fonts/spectral/spectral-regular-webfont.woff") format("woff"),
    url("fonts/spectral/Spectral-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SpectralSC";
  src:
    url("fonts/spectralsc/spectralsc-regular-webfont.woff2") format("woff2"),
    url("fonts/spectralsc/spectralsc-regular-webfont.woff") format("woff"),
    url("fonts/spectralsc/SpectralSC-Regular.ttf") format("truetype");
}

/* color palette thus far:
 - indianRed
 - darkRed
 - slateBlue
 - darkSlateBlue
 - lavender
 - thistle
link color palette (avoid for bg/txt!):
 - khaki
 - darkRed
 - gold
 - cornSilk
*/

html {
  background-color: fireBrick;
}

body {
  font-family: "Bitter", Georgia, serif;
  font-size: 16px;
  color: white;
  background-color: maroon;
  margin: 30px;
  border-width: 6px;
  border-style: solid;
  border-color: black;
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 148px;
}

aside {
  background-color: black;
  float: right;
  width: 40%;
  text-align: center;
  border-style: solid;
  border-width: 6px;
  border-color: fireBrick;
  padding: 20px;
}

.spells {
  background-color: white;
  float: right;
  width: 40%;
  text-align: center;
  border: 6px solid fireBrick;
  padding: 20px;
  color: black;
}

td, th {
  border: 2px solid lightGray;
  padding: 8px;
}

table {
  padding: 10px;
}

.line {
  margin-top: 80px;
  margin-bottom: 80px;
}

button {
  font-family: "Saira", Courier, monospace, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: darkSlateBlue;
  background-color: lavenderBlush;
  text-align: center;
  border-style: solid;
  border-width: 4px;
  border-color: darkRed;
  border-radius: 3px;
  padding: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-left: 70px;
  margin-bottom: 13px;
}

button:hover {
  background-color: lavender;
  cursor: pointer;
}

button:active {
  background-color: mediumPurple;
  color: black;
}

.topButton {
  background-color: black;
  width: 10%;
  position: fixed;
  bottom: 20px;
  left: 30px;
  text-align: center;
  margin: 20px;
  border-radius: 50px;
  padding: 10px;
}

#topButtonText {
  text-decoration: none;
}

#topButtonText:hover {
  text-shadow: 2px 2px black;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Spectral", Verdana, fantasy, serif;
}

h1 {
  font-size: 40px;
  text-decoration: underline crimson;
}

h2 {
  font-size: 36px;
  text-decoration: underline coral;
}

h3 {
  font-size: 32px;
  text-decoration: underline khaki;
}

h4 {
  font-size: 28px;
  text-decoration: underline mediumSeaGreen;
}

h5 {
  font-size: 24px;
  text-decoration: underline steelBlue;
}

h6 {
  font-size: 20px;
  text-decoration: underline darkMagenta;
}

.subtitle {
  font-family: "Arvo", Arial, sans-serif;
  font-size: 16px;
  color: lightCoral;
  text-shadow: none;
  text-decoration: none;
}

a:link {
  color: khaki;
}

a:hover {
  text-shadow: 2px 2px darkRed;
}

a:active {
  color: gold;
}

a:visited {
  color: cornSilk;
}