body{
     background-color: #525238;
 }
/* HEADER */
header {
     font-family: "Gabriela", serif;
     background-color: #C29861;
     display: flex;
     justify-content: space-between;
     padding: 0.8vw;
     margin: auto;
     align-items: center;
     color: white;
     position: sticky;
     top: 0;
 }
 .logo {
     margin-top: 0;
     display: flex;
     align-items: center;
     padding-left: .5vw;
     font-size: 3em;
 }
 a {
     text-decoration: none;
     color: white;
     padding-left: 2vw;
     padding-right: 2vw;
     font-size: 1.7em;
     transition:0.3s;
 }
 a:hover {
     color: #d3c5c5;
 }
 nav {
     padding-right: 2vw;
 }
ul {
     display: flex;
     list-style: none;
     flex-direction: row;
}
.hero {
    align-self: center;
    background-image: linear-gradient(#ff000000 70%, #525238), url(includes/img/header.jpg) ;
    background-size:cover;
    height: 70vh;
}
 @media screen and (max-width: 759px){
    .logo {
        margin-top: 0;
        display: flex;
        align-items: center;
        padding-left: .5vw;
        font-size: 2em;
    }
    a {
        text-decoration: none;
        color: white;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 1em;
    }
    ul {
        display: flex;
        list-style: none;
        flex-direction: column;
   }
} 

/* HERO */
.hero {
     align-self: center;
     background-image: linear-gradient(#ff000000 70%, #525238), url(includes/img/header.jpg) ;
     background-size:cover;
     height: 70vh;
 }
 @media screen and (max-width: 1500px){
     .hero {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
     }
 }  
 @media screen and (max-width: 850px){
     .hero {
          background-image: linear-gradient(#ff000000 70%, #525238), url(includes/img/header3.jpg) ;
          background-size:cover;
          height: 70vh; 
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          margin-bottom: -10vh;
     }
     a {
          font-size: 1.5em;
     }
 }  
/* HOME PAGE */ 
/* Sections/rows */
.image {
     width: 90vw;
}
.row.uno{
     padding-top: 12vh;
 }
.row{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.row.one {
     padding-top: 12vh;
}
/* Sections */
.row.one, .row.two, .row.three{
    margin-bottom: 10vw;
    color: white;
    display: flex;
    flex-direction: row;
}
p{
    font-family: "Quicksand", sans-serif;
    padding: 4vw;
    font-size: 1.2em;
    text-align: center;
}
.row.one h1, .row.two h1 .row.three h1{
    font-family: "Gabriela", serif;
    font-size: 3em;
}

.text a {
    color: #C29861;
    font-size: 2em;
}
.text a:hover {
    color: #d3c5c5;
}
.text p {
     text-align: left;
}
.row.three {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
}

@media screen and (max-width: 850px){
  
    .row.one{
        margin-top: 0;
         display: flex;
         flex-direction: column-reverse;
    }
    .row.two{
         display: flex;
         flex-direction: column;
    }
    .row {
         margin: 5vw;
    }
    .row.three {
         display: flex;
         flex-direction: column-reverse;
         align-items: center;
    }
} 

/* CHARACTER PAGE */
.row{
     display: flex;
     justify-content: space-between;
     flex-basis: 22%; 
 }

 .row.card:last-of-type{
     margin-right: 0;
 } 
 .card-text{
     padding:2vw;
 }
 .card-text h2{
     font-family: "Quicksand", sans-serif;
     color: white;
     margin-top: 0;
     text-align: center;
 }
 .card-image img {
    width: 100%;
 }
 h1 {
     font-family: "Gabriela", serif;
     font-size: 3em;
     text-align: center;
     color: white;
 }
 
 @media screen and (max-width: 850px){
     .row{
          align-items: center;
          display: flex;
          flex-direction: column;
     }
     .card-image img {
          width: 30vh;
          height: 30vh;
     }
 } 
 /* EPISODES */
 .episode.one{
    padding-top: 8vh;
 }
 .episodes h2{
     font-family: "Gabriela", serif;
     color: white;
 }
 .episodes p{
     font-family: "Quicksand", sans-serif;
     font-size: 1.2em;
     color: white;
     margin-right: 20vw;
     margin-left: 20vw;
     padding: 0;
     padding-bottom: 3vw;
 }
 .episode {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-self: center;
     align-items: center;
     margin: 4vh;
 }
 .ep-image {
 width: 45%;
 }
 @media screen and (max-width: 850px){
     .episodes p{
          font-size: 1em;
          margin: 0;
      }
      .ep-image {
         width: 90%;
         }
 } 
 /* FOOTER */
 footer p{
    font-family: "Gabriela", serif;
    background-color: #C29861;
    padding: 2vw;
    color: white;
    font-size: 1.1em;
    text-align: center;
}