/* font-family: 'Cinzel', serif;
font-family: 'Nunito Sans', sans-serif; */

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;  
    /* height: 100%; */
}





@media screen and (max-width: 664px) {

/* NAVIGATION */
    .wrapper {
        width: 100%;
        z-index: 100;
        background-color: white;
        overflow: hidden;
        border-bottom: gray 2px solid;
    }

    .open {
        color: #8b8b8b;
        font-size: 30px;
        float: right;
        margin: 1rem;
        display: block;
        cursor: pointer;
        transition: 0.5s;
    }

    .open:hover {color: black;}

    .nav {
        width: 0;
        overflow-x: hidden;
        height: 100vh;
        z-index: 1;
        position: fixed;
        background-color: white;
        font-family: 'Cinzel', serif;
        display: block;
        text-align: center;
    }

    .nav a {
        clear: left;
        color: black;
        font-size: 2rem;
        display: block;
        text-decoration: none;
        transition: 0.3s;
    }

    .nav a:not(:first-child):hover {
        background-color: red;
        color: white;
    }
    .nav-item.active {color: red;}

    .close {
        color: black;
        font-size: 30px;
        float: right;
        margin-right: 1rem;
        display: block;
        cursor: pointer;
        padding-top: 1rem;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 300;
    }

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

    .nav-list li {
        display: inline-block;
        font-size: 1.5rem;
    }

    .nav-phoenix {
        width: 120px;
        float: left;
        margin-left: 2rem;
        padding: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .nav-phoenix:hover {background-color: transparent;}

    .nav-item {
        padding: 1rem 0;
        border-top: 1px solid black;
    }

    .nav-item-last {border-bottom: 1px solid black}
    



/* HERO */
    .mobile-hero-img {width: 100%;}
    .tablet-hero-img {display: none;}
    .hero-img {display: none;}

    .hero {
        position: relative;
        color: white;
        font-family: 'Cinzel', serif;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 400;
    }

    .hero-text {
        position: absolute;
        text-align: center;
        width: 200px;
        margin: 0 auto;
        line-height: 1.5rem;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hero-text .margin-0 {margin: 10px;}

    .buy-btn {
        padding: .25rem .5rem;
        border: white solid 1px;
        background-color: transparent;
        border-radius: 5px;
        font-size: 1rem;
        color: white;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 300;
    }

    .buy-btn:hover {
        background-color: rgba(255, 255, 255, 0.329);
        cursor: pointer;
    }



/* IMAGES, TEXT, BTNS */ 
    .home-h1 {
        font-family: 'Cinzel', serif;
        color: red;
        text-align: center;
        padding: 1rem;
        margin-bottom: 0.3rem;
        font-size: 2rem;
        line-height: normal;
    }

    .home-h2 {
        font-family: 'Nunito Sans', sans-serif;
        color: #10718A;
        text-transform: uppercase;
        text-align: center;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 400;
        margin: 0;
    }

    #rise-title {
        color: #3C64C3;
        margin-bottom: 0.3rem;
    }

    .seriesSection #rise-title {margin-top: 0;}

    .landingSection {
        padding: 3rem 0;
        background-color: rgb(241, 241, 241);
    }

    .seriesSection {
        background-color: rgb(241, 241, 241);
        /* height: 100%; */
        margin: 0;
        padding-top: 2rem;
    }

    .home-books {
        padding: 2rem;
        font-size: 1rem;
    }

    .home-book-img {width: 75%; margin-left: auto; margin-right: auto;}

    .book-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .author-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 75%;
    }

    .about-books {
        width: 100%;
        display: block;
    }

    .about-books-img {
        width: 60%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: .6rem;
        grid-column-gap: 13%;
        margin: 0 auto;
    }

    .about-books img {width: 100%;}
    .tablet-about-books {display: none;}

    .learn-btn-div {
        display: flex;
        justify-content: center;
        margin-bottom: 2.5rem;
    }

    .learn-btn {
        padding: .75rem;
        border: red solid 1px;
        background-color: white;
        border-radius: 10px;
        font-size: 1rem;
        margin: 1rem;
        font-family: 'Nunito Sans', sans-serif; 
        font-weight: 300;
    }

    .learn-btn:hover {
        background-color: rgba(0, 0, 0, 0.13);
        cursor: pointer;
    }



/* STATS LANDING */
    .select {
        max-width: 300px;
        margin: auto;
        text-align: center;
        font-size: 1.2rem;
    }
 
    .cards {
        width: 90%;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        padding: 2% 0;
        max-width: 300px;
    }

    .card {
        margin: auto;
        transition: 0.3s;
        width: 95%;
        background-color: black;
        border-radius: 2% 2%;
        margin-bottom: 20px;
    }

    .card img {border-bottom: 2px solid white;}

    .container {
        color: white;
        text-align: center;
        height: 130px;
    }
    
    .container h4 {
      font-family: 'Cinzel', serif;
      font-size: 1.2rem;
      font-weight: normal;
    }

    .container button {
      width: 90%;
      height: 50px;
      outline: none;
      border: none;
      background-color: white;
      border-radius: 5px;
      font-size: 1rem;
      color: black;
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 300;
    }

    .container button:hover {
      background-color: rgb(233, 233, 233);
      color: black;
      cursor: pointer;
    }


/* STATS */
    .back {margin-left: 2rem;}

    .back a {
        text-decoration: none;
        color: black;
        font-size: 1.2rem;
    }
    .back a:hover {color: red;}

    #selection {
        width: 280px;
        max-width: 420px; 
        margin: auto; 
        height: 50px; 
        text-align: center;
    }
    
    #selection select {
        height: 50px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: #fff; 
        outline: none;
        margin: auto;
        width: 95%;
    }

    #chapterlist {
        margin: 0 auto;
        text-align: center;
        line-height: 1rem;
        font-size: 1rem;
        padding: 10px 0;
        width: 300px;
    }

    #chapTitle {
        text-align: center; 
        font-family: 'Nunito Sans', 
        sans-serif; 
        font-size: 2rem; 
        font-weight: 500; 
        margin-bottom: 1rem;
    }

    .character, .moreStats {max-width: 450px;}

    .character {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
        padding: 0 5%;
        padding-bottom: 3.5rem;
    }

    .charImg {
        grid-area: 1;
        width: 99%;
        height: 98.6%;
        border: 2px solid black;
        padding: 0;
    }

    .charImg img {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #chapterInfo {
        border: 2px solid black;
        display: grid;
        grid-template-columns: 12% 42% 42%;
        height: 120%;
        padding: 3%;
        grid-area: 3;
    }

    #chapterInfo img {
        width: 75%; 
        margin: auto 0;
    }

    #chapterInfo label {
        margin: auto 0; 
        width: auto; 
        font-size: 1rem; 
        text-align: left; 
        line-height: 1rem;
    }

    #chapterInfo h4 {
        /* width: auto 0;  */
        border: none; 
        margin: auto 0; 
        font-size: 1rem; 
        line-height: 1rem; 
        text-align: right; 
        font-weight: normal;
    }


    .charName {
        grid-area: 2; 
        padding-top: 10px; 
        padding-bottom: 20px;
    }

    .charName h4 {
        margin: 0;
        text-align: center;
        font-weight: 500;
    }


/* STATS: SPECIAL ABILITITES */
    .dropdown h2, .moreStats h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 0;
        font-weight: 500;
    }

    .moreStats h2 {margin-bottom: 1rem;}

    .moreStats {
        text-align: center; 
        color: black;
        width: 90%; 
        /* height: 100%;  */
        padding: 0; 
        margin: 4rem auto; 
    }

    .moreStats .abilities {
        color: black; 
        width: 100%; 
        padding: 0; 
        margin: 0; 
        text-align: left; 
        outline: 2px solid black;
    }

    #abilityType {
        display: grid; 
        grid-template-columns: 1fr;
        text-align: center;
        background-color: #0A4B85; 
        color: white; 
        border-bottom: 2px solid white;
    }

    #abilityType:last-child {border-bottom: none;}
    #abilityType:hover {background-color: #ececec; color: black;}

    #abilityInfo {
        text-align: center; 
        display: block; 
    }

    .level h4, .percent h4 {
        display: inline-block; 
        font-weight: 500; 
        margin: 0;
    }

    .abilityN h4 {
        display: inline-block; 
        margin: 0; 
        text-transform: uppercase;
    }

    .abilityN, #abilityInfo {padding: 3%; margin: auto 0;}
    .abilityN {padding-bottom: 0;}
    #abilityInfo {padding-top: 1%;}

    .level, .percent {text-align: center; display: inline-block;}
    .level {padding-right: 5%;}


/* FAN ART PAGE */
    .thankyou {
        padding: 0% 6%;
        margin: auto;
    }

    .thanks {width: 100%;}

    .gallery {padding: 1%;}

    .slider-for{
    	width: 100%;
    	height: auto;
        /* max-height: auto; */
        margin: 0 auto;
    	overflow: hidden;
    	border: none;
    }

    img{
        width: 100%;
    }

    .slider-nav{
        width: 85%;
    	margin: auto;
    	padding: 0px 20px 0px 20px;
    	display: block;
        opacity: .7; 
    }


/* FOOTER */
    footer {
        background-color: black;
        color: white;
        padding: 1rem;
    }

    .footer-icons {
        padding-top: 2rem;
        display: flex;
        justify-content: space-evenly;
        font-size: 2rem;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    i {color: white;}

    .footer-icons i p {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 300;
        font-size: 1rem;
        color: white;
    }

    .copyright {text-align: center;}

}




@media screen and (min-width: 665px) {
        html, body {height: 100%; margin: 0;}

/* NAV */
    .wrapper {
        width: 100%;
        z-index: 100;
        background-color: white;
        overflow: hidden;
        border-bottom: gray 2px solid;
    }

    .nav-logo {display: none;}

    .close {display: none;}

    .open {display: none;}

    .nav {
        display: block;
        float: right;
        padding: 2rem 0;
        padding-right: 1rem;
    }

    .nav-item {
        color: black;
        text-decoration: none;
        font-size: 1rem;
        padding: 0 0.5rem;
        text-transform: uppercase;
    }

    .nav-item:hover {color: red;}
    .nav-item.active {color: red;}

    .nav-phoenix {
        position: relative;
        width: 160px;
        padding: .6rem 2rem;
    }


/* HERO - LANDING */
    .hero {position: relative; width: 100%; text-align: center;}


    .hero-text {
        position: absolute;
        color: white;
        font-family: 'Cinzel', serif;
        font-size: 2.5rem;
        margin: 0 auto;
        text-align: center;
        line-height: normal;
        width: 390px;
        line-height: 2.8rem;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .margin-0 {margin-top: 0; margin-bottom: 15px;}

    .buy-btn {
        padding: .5rem 1rem;
        border: white solid 1px;
        background-color: transparent;
        border-radius: 10px;
        font-size: 1.5rem;
        color: white;
        font-family: 'Nunito Sans', sans-serif; 
        font-weight: 300;
    }

    .buy-btn:hover {
        background-color: rgba(255, 255, 255, 0.329);
        cursor: pointer;
    }

    .hero-img-div { width: 100%;}

    .mobile-hero-img {display: none;}
    .hero-img {display: none;}

    .tablet-hero-img {
        display: block;
        width: 100%;
    }


/* IMAGES, TEXT, BTNS */
    .home-books {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
    }


    .home-books img {
        width: 33%;
        height: 33%;
    }

    .home-books-tablet img {
        width: 100%;
        height: 100%;
    }

    .home-book-img {width: 100rem;}

    .book-img, .home-book-img {
        width: 75rem;
        padding: 3rem;
        max-width: 300px;
    }

    .book-img, .home-book-img img {width: 100%;}

    .author-img {
        width: 200rem;
        padding: 3rem;
    }

    .home-h1 {
        font-family: 'Cinzel', serif;
        color: red;
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 0.3rem;
    }

    .home-h2 {
        font-family: 'Nunito Sans', sans-serif;
        color: #10718A;
        text-transform: uppercase;
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
        margin: 0;
    }

    #rise-title {
        color: #3C64C3;
        margin-bottom: 0.3rem;
    }
    
    .seriesSection #rise-title {margin-top: 0;}


    .landingSection {
        padding: 3rem 0;
        background-color: rgb(241, 241, 241);
    }

    .seriesSection {
        background-color: rgb(241, 241, 241);
        /* height: 100%; */
        margin: 0;
        padding-top: 2rem;
        padding-bottom: 0rem;
        max-height: 800px;
    }

    .book-description-btn {padding: 3rem;}

    .home-books img {width: 100%;}

    .about-books {
        width: 100%;
        display: block;
    }

    .about-books-img {
        width: 50%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 13%;
        margin: 0 auto;
        max-width: 500px;
    }

    .about-books img {
        width: 100%;
        max-width: 300px;
        margin: auto;
    }

    .mobile-about-books {display: none;}

    .learn-btn-div {
        display: flex;
        justify-content: center;
        margin-bottom: 5rem;
    }

    .learn-btn {
        padding: .75rem;
        border: red solid 1px;
        background-color: white;
        border-radius: 10px;
        font-size: 1rem;
        margin: 1rem 0;
        font-family: 'Nunito Sans', sans-serif; 
        font-weight: 300;
    }

    .learn-btn:hover {
        background-color: rgba(0, 0, 0, 0.13);
        cursor: pointer;
    }


/* STATS LANDING */
    .select {
        margin: auto;
        text-align: center;
        font-size: 1.2rem;
    }


    .cards {
        margin: auto;
        width: 90%;
        max-width: 900px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 2rem 0;
    }

    .card {
        margin: auto;
        transition: 0.3s;
        width: 95%;
        background-color: black;
        border-radius: 2% 2%;
    }

    .card img {border-bottom: 2px solid white;}

    .container {
        color: white;
        text-align: center;
        height: 130px;
    }

    .container h4 {
        font-family: 'Cinzel', serif;
        font-size: 1.2rem;
        font-weight: normal;
      }
    
    .container button {
        width: 90%;
        height: 50px;
        outline: none;
        border: none;
        background-color: white;
        border-radius: 5px;
        font-size: 1rem;
        color: black;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 300;
    }

    .container button:hover {
        background-color: rgb(233, 233, 233);
        color: black;
        cursor: pointer;
    }


/* STATS */
    .back {margin-left: 2rem;}

    .back a {
        text-decoration: none;
        color: black;
        font-size: 1.2rem;
    }
    .back a:hover {color: red;}
    
      
    #selection {
        width: 390px; 
        margin: auto; 
        height: 50px; 
    }

    .dropdown {
        margin: auto;
        width: 100%;
        text-align: center;
    }


    #selection select {
        height: 50px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: #fff; 
        outline: none;
    }

    #chapterlist {
        margin: 0 auto;
        text-align: center;
        line-height: 1rem;
        font-size: 1rem;
        padding: 10px 0;
        width: 300px;
    }

    #chapTitle {
        text-align: center; 
        font-family: 'Nunito Sans', sans-serif; 
        font-size: 2rem; 
        font-weight: 500; 
        margin-bottom: 1rem;
    }

    .character {
        display: grid;
        grid-template-columns: 300px 300px;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        margin: .5rem auto .8rem auto;
        justify-content: center;
    }

    .charImg {
        width: 99%;
        height: 98.6%;
        border: 2px solid black;
        padding: 0;
    }

    .charImg img {
        height: 100%;
        margin: 0;
        padding: 0;
    }


    #chapterInfo {
        border: 2px solid black;
        display: grid;
        grid-template-columns: 12% 42% 42%;
        padding: 3%;
    }

    #chapterInfo img {
        width: 75%; 
        margin: auto 0;
    }

    #chapterInfo label {
        margin: auto 0; 
        font-size: 1rem; 
        text-align: left; 
        line-height: 1rem;
    }

    #chapterInfo h4 {
        border: none; 
        margin: auto 0; 
        font-size: 1rem; 
        line-height: 1rem; 
        text-align: right; 
        font-weight: normal;
    }


    .charName h4 {
        margin:0;
        text-align: center;
        font-weight: 500;
    }



/* STATS: SPECIAL ABILITITES */
    .dropdown h2, .moreStats h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 0;
        font-weight: 500;
    }
    
    .moreStats h2 {margin-bottom: 1rem;}
    
    .moreStats {
        text-align: center; 
        width: 610px; 
        padding: 0; 
        margin: auto; 
        margin-top: 2rem;
        margin-bottom: 5rem;
    }
    
    .moreStats .abilities {
        color: black; 
        width: 100%; 
        padding: 0; 
        margin: 0; 
        text-align: left; 
        outline: 2px solid black;
    }
    
    #abilityType {
        text-align: left;
        background-color: #0A4B85; 
        color: white; 
        border-bottom: 2px solid white;
    }
    
    #abilityType:last-child {border-bottom: none;}
    #abilityType:hover {background-color: #ececec; color: black;}
    
    #abilityInfo {
        text-align: left; 
        display: grid; 
        grid-template-columns: 1fr;
    }

    
    .level h4, .percent h4 {
        display: inline-block; 
        font-weight: 500; 
        margin: 0;
    }
    
    .abilityN h4 {
        display: inline-block; 
        margin: 0; 
        text-transform: uppercase;
    }
    
    .abilityN, #abilityInfo {
        padding: 3% 5%; 
        margin: auto 0;
    }
    
    #abilityType {
        display: grid; 
        grid-template-columns: 65% 35%;
    }


/* FAN ART PAGE */
    .thankyou {
        width: 620px;
        margin: auto;
    }
    
    .gallery {padding-bottom: 2%;}
    
    .slider-for{
        width: 620px;
        height: 450px;
        margin: 0 auto;
        overflow: hidden;
        border: none;
        border-radius: 0px 0px 0px 0px;
    }

    img{
        width: 100%;
        max-height: 800px;
    }

    .slider-nav{
        width: 600px;
        margin: auto;
        padding: 0px 50px 0px 50px;
        display: block;
        opacity: .7; 
    }


    /* FOOTER */
    footer {
        background-color: black;
        color: white;
        padding: 1rem 10rem;
    }

    .footer-icons {
        padding-top: 2rem;
        display: flex;
        justify-content: space-evenly;
        font-size: 2rem;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    i {color: white;}

    .footer-icons i p {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 300;
        font-size: 1rem;
        color: white;
    }

    .copyright {text-align: center;}



/* FORCE FOOTER TO BOTTOM OF STATS PAGE */
    .content {
        height: 100%;
        display: grid;
        grid-template-rows: 1fr auto;
    }

    .push {grid-row-start: 1; margin-bottom: 2rem;}

    .bottom {
        grid-row-start: 2;
        grid-row-end: 3;
    }

}






@media screen and (min-width: 850px) {

/* HERO */
    .hero-text {
        width: 430px;
        font-size: 3.25rem;
        line-height: 3.4rem;
    }


/* FAN ART PAGE */
    .thankyou {width: 800px;}

    .slider-for{
    	width: 800px;
    	height: 580px;
    }

    .slider-nav{width: 780px;}

    .seriesSection {
        max-height: none;
    }
}






@media screen and (min-width: 1201px) {

/* NAV */
    .nav-phoenix {
        width: 200px;
        padding: .6rem 2rem;
    }

    .nav {padding: 2.5rem 2rem;}


/* HERO */
    .tablet-hero-img {display: none;}

    .hero-img {
        display: block;
        width: 100%;
    }

    .hero-text {
        font-size: 3rem;
        line-height: 3.2rem;
        width: 500px;
        top: 60%;
        left: 53%;
    }
  

/* IMAGES, TEXT, BTNS */
    .home-books {align-items: center;}

    .book-img {padding: 5rem;}

    .book-description-btn {
        align-self: flex-start;
        font-size: 1.2rem;
        padding-top: 5rem;
        padding-right: 5rem;
    }

    .buy-btn {
        padding: .75rem 1.25rem;
        border: white solid 1px;
        background-color: transparent;
        border-radius: 10px;
        font-size: 1.5rem;
        color: white;
        font-family: 'Nunito Sans', sans-serif; 
        font-weight: 300;
    }

    .buy-btn:hover {
        background-color: rgba(255, 255, 255, 0.329);
    }



/* FOOTER */
    footer {padding: 1rem 20rem;}

}






@media screen and (min-width: 1600px) {

/* HERO */      
    .hero-text {
        width: 600px;
        font-size: 4rem;
        line-height: 4.2rem;
    }  
}



.home-h2 {
    font-family: 'Nunito Sans', sans-serif;
    color: #10718A;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    margin: 0;
}