/* font */

@font-face {
  font-family: "Suez One";
  src:
    local("Suez One Regular"),
    url(fonts/Suez_One/SuezOne-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    
}
@font-face {
  font-family: "Averia Sans Libre";
  src:
  local("Averia Sans Libre, Regular"),
  url(fonts/Averia_Sans_Libre/AveriaSansLibre-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  
}

@font-face {
  font-family: "Averia Sans Libre";
  src:
    local("Averia Sans Libre, Italic"),
    url(fonts/Averia_Sans_Libre/ASL-Italic.ttf) format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
  font-family: "Dyna Puff";
  src:
  local("Dyna Puff"),
  url(fonts/DynaPuff/DynaPuff-VariableFont_wdth,wght.ttf) format("truetype");
}

@font-face  {
  font-family: "Plaster";
  src:
  local("Plaster"),
  url(fonts/Plaster/Plaster-Regular.ttf) format("truetype");
}

@font-face  {
  font-family: "Roboto Serif";
  src:
  local("Roboto Serif, Regular"),
  url(fonts/Roboto_Serif/RobotoSerif-Regular.ttf) format("truetype");
}

/* IDs */

#btn-landing {
  border: 1px solid #413D8F;
  padding: 10px;
  box-shadow: 5px 5px #413D8F;
}

#btn1 {
  border: 1px solid #413D8F;
  padding: 10px;
  box-shadow: 5px 5px #413D8F;
}

#btn2 {
  border: 1px solid #413D8F;
  padding: 10px;
  box-shadow: 5px 5px #413D8F;
}

#btn3 {
  border: 1px solid #413D8F;
  padding: 10px;
  box-shadow: 5px 5px #413D8F;
}

#btn4 {
  border: 1px solid #413D8F;
  padding: 10px;
  box-shadow: 5px 5px #413D8F;
}

/* grouping */

body {
  font-family: "Roboto Serif";
  margin: 0px 0px;
}


h1 {
  text-align: right;
  font-family: "Suez One";
  font-style: italic;
  font-weight: normal;
  font-size: 300%;
  padding: 20px 20px 5px 20px;
  margin: 0px;
}

p {
  font-size: 150%;
  text-indent: 15px;
  padding: 0px 48px;
}

/* classes */

.btn1, .btn2, .btn3, .btn4, .btn-landing {
  font-family: "Plaster";
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
}

#btn-landing:hover {
  background-color: #4973fc;
}

#btn1:hover {
  background-color: #4973fc;
}

#btn2:hover {
  background-color: #4973fc;
}

#btn3:hover {
  background-color: #4973fc;
}

#btn4:hover {
  background-color: #4973fc;
}



.header-heading {
  text-align: right;
  display: block;
  margin: 0px 500px ;
  width: 960px;
  height: 275px;
  background: white;
  position: relative;
}

.banner-grad {
  width: 960px;
  height: 275px;
  background-image: linear-gradient(to top, white 15px, transparent 40px),
                linear-gradient(to top, white 20px, transparent 50px);
  position: absolute;
  top: 0;
  left: 0;
}

.fake-header {
  height: 275px;
}


.landing {
  width: 920px;
  height:150px;
  padding: 20px;
  display: block;
  background: white;
}


.landing .btn-landing {
  background-color: #6581E6;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 300px;
  margin-top: 30px;
}


.header-heading .btn1 {
 position: absolute;
  top: 85%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #6581E6;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  
}

.header-heading .btn2 {
 position: absolute;
  top: 85%;
  left: 40%;
  transform: translate(-50%, -50%);
  background-color: #6581E6;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.header-heading .btn3 {
 position: absolute;
  top: 85%;
  left: 60%;
  transform: translate(-50%, -50%);
  background-color: #6581E6;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.header-heading .btn4 {
 position: absolute;
  top: 85%;
  left: 80%;
  transform: translate(-50%, -50%);
  background-color: #6581E6;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.quote {
  text-align: right;
  font-family: "Averia Sans Libre";
  font-style: italic;
  font-size: 145%;
  padding: 5px 20px 20px 20px;
  margin: 5px;
  
}


.cast-directory a:link, .cast-directory a:hover, .cast-directory a:active, .cast-directory a:visited {
  text-decoration: none !important;
  color: black;
}

.cast-directory a:hover {
  font-style: italic;
  color: #4C46AA;
}

.character-container {
  display: grid;
  grid-template-columns: 1fr 2fr; 
  grid-template-rows: 300px 1fr 300px;
  margin-left: 20px;
  
}

.character-container div {
  margin: 10px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 20px;
}

.character-portrait {
  margin-bottom: 0px;
  
}

.character-text {
  text-indent: 0;
  font-size: 15px;
  padding: 0px;
  margin: 0px;
}

.character-bio {
  border-left:2px solid #21A6B8;
  grid-row: span 2;
  padding-left: 40px;
  margin-left: 0px;
  font-size: 15px;
}

.content {
  margin: auto;
  background: white;
}


.body-content {
  display: block;
  width: 960px;
  margin: 0px 500px;
  padding: 20px;
  background: white;
}

.main-image figcaption {
  top: 50%;
  bottom: 50%;
  left: 40%;
}


.cover {
  object-fit: cover;
}

.footer-content {
  text-align: center;
  display: block;
  width: 960px;
  margin: 0px 500px;
  padding: 20px;
  background: white;
}

.header-utility {
  display: block;
  margin: 0px 500px;
  width: 960px;
}

.dashed {
  border-top: 3px dashed #bbb;
  border-bottom: none;
  border-left: none;
  border-right: none;
  text-decoration: none;
}

html {
  background: #e8e8e8;
}

* {
  box-sizing: border-box;
}