/*GLOBAL CODING*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

body{
   color: #2C2C2C;
}


p{
    font-family: font-family: 'Lora', serif;
}

header{
    margin-top: 30px;
}

header img{
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#headerSub{
    width: 100%;
    height: 700px;
    background-color: aqua;
    position: fixed;
    z-index: 1;
    visibility: hidden;
}

#headerSub:hover {
    visibility: visible;
}

a{
    text-decoration: none;
    color: #2C2C2C;
}

footer{
    position: absolute;
    bottom: 2%;
    left:25%;
    text-align: center;

    visibility: hidden;
}

footer p{
    font-size: 3em;
}

/*HOME PAGE CODING*/
h2{
    font-family: Gill Sans, sans-serif;
    font-size: 2em;
    color: #2C2C2C;
    margin-top: 10px;
}

h2:hover{
    font-size: 3em;
    color:#9CE1FF;
}

    /*changes individual link colors*/
#book1 a:hover{ color:#45C6FF;}
#book2 a:hover{ color:#FF5045;}
#book3 a:hover{ color:#CFCFCF;}
#book4 a:hover{ color:#E045FF;}
#book5 a:hover{ color:#9145FF;}

.bookTitles{
    margin-top: 80px;
    margin-left: 9%;
}

.slide img{
    width: 100%;
    margin-top: 40px;
    /*visibility: hidden;*/
}


    /*animations*/
.first{
    animation: first 30s infinite;
    position: absolute;
}

@keyframes first{
    0% {opacity:1;}
    15% {opacity:1;}
    20% {opacity:0;}
    38% {opacity:0;}
    40% {opacity:0;}
    60% {opacity:0;}
    80% {opacity:0;}
    100% {opacity:0;}
}

.second{
    animation: second 30s infinite;
    position: absolute;
}

@keyframes second{
    0% {opacity:0;}
    18% {opacity:0;}
    20% {opacity:1;}
    35% {opacity:1;}
    40% {opacity:0;}
    60% {opacity:0;}
    80% {opacity:0;}
    100% {opacity:0;}
}

.third{
    animation: third 30s infinite;
    position: absolute;
}

@keyframes third{
    0% {opacity:0;}
    18% {opacity:0;}
    20% {opacity:0;}
    38% {opacity:0;}
    40% {opacity:1;}
    58% {opacity:1;}
    60% {opacity:0;}
    80% {opacity:0;}
    100% {opacity:0;}
}

.fourth{
    animation: fourth 30s infinite;
    position: absolute;
}

@keyframes fourth{
    0% {opacity:0;}
    18% {opacity:0;}
    20% {opacity:0;}
    38% {opacity:0;}
    40% {opacity:0;}
    58% {opacity:0;}
    60% {opacity:1;}
    78% {opacity:1;}
    80% {opacity:0;}
    100% {opacity:0;}
}

.fifth{
    animation: fifth 30s infinite;
    position: absolute;
}

@keyframes fifth{
    0% {opacity:0;}
    18% {opacity:0;}
    20% {opacity:0;}
    38% {opacity:0;}
    40% {opacity:0;}
    58% {opacity:0;}
    60% {opacity:0;}
    78% {opacity:0;}
    80% {opacity:1;}
    98% {opacity:1;}
    100% {opacity:0;}
}



/*BOOK PAGES CODING*/
.bookFull img{
    width: 100%;
}

#selectionReview a{color: #OOOOOO;}

h3{
    font-family: Gill Sans, sans-serif;
    font-size: 2.3em;
    position: absolute;
    margin-top: 31px;
    margin-left: 10px;
    color: #2C2C2C;
}

h4{
    font-size: 1.6em;
    margin-left: 10px;
    font-family: Gill Sans, sans-serif;
    letter-spacing: 2px;
    color:#414141;
}

p{
    font-size:.9em;
    width: 90%;
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

.buyButton{
    width: 70%;
    height: 50px;
    background-color: #414141;

    position: absolute;
    top: 770px;
    left:14%;
    border: solid;
    border-color: #2C2C2C;
    font-size: 1.8em;
    font-family: Gill Sans, sans-serif;
    text-align: center;

    text-shadow: 2px 2px 8px #2C2C2C;
}

.buyButton a{ color:white;}
.buyButton a:hover {color: #414141;}
.buyButton:hover {background-color: #2C2C2C;}


    /*page coloring*/
        /*elite page*/
#titleColor1Main {color:#26A7E0;}
#titleColor1 {color:#45C6FF;}
#titleColor1 a{color:#45C6FF;}
#selectionReview1 a{color: #45C6FF;}
#button1 {background-color: #45C6FF;}
#button1{border-color: #26A7E0; text-shadow: 2px 2px 8px #26A7E0;}
#button1 a:hover{color:#26A7E0;}

        /*elite page*/
#titleColor2Main {color:#CF1307;}
#titleColor2 {color:#FF5045;}
#titleColor2 a{color:#FF5045;}
#selectionReview2 a{color: #FF5045;}
#button2 {background-color: #FF5045;}
#button2{border-color: #CF1307; text-shadow: 2px 2px 8px #CF1307;}
#button2 a:hover{color:#CF1307;}

        /*one page*/
#titleColor3Main {color:#9D9D9D;}
#titleColor3 {color:#CFCFCF;}
#selectionReview3 a{color: #CFCFCF;}
#button3 {background-color: #CFCFCF;}
#button3 {border-color: #9D9D9D; text-shadow: 2px 2px 8px #9D9D9D;}
#button3 a:hover{color:#9D9D9D;}


        /*heir page*/
#titleColor4Main {color:#C71AE9;}
#titleColor4 {color:#E045FF;}
#selectionReview4 a{color: #E045FF;}
#button4 {background-color: #E045FF;}
#button4 {border-color: #C71AE9; text-shadow: 2px 2px 8px #C71AE9;}
#button4 a:hover{color:#C71AE9;}

        /*crown page*/
#titleColor5Main {color:#7422EC;}
#titleColor5 {color:#9145FF;}
#selectionReview5 a{color: #9145FF;}
#button5 {background-color: #9145FF;}
#button5 {border-color: #7422EC; text-shadow: 2px 2px 8px #7422EC;}
#button5 a:hover{color:#7422EC;}

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

    /*GLOBAL CODING*/
    header img{
        width: 20%;
        margin-right: 10%;
    }

    h3{
        font-size: 4em;
        top: 80px;
        margin-left: 5px;
    }

    .container{
        display: flex;
        justify-content: flex-start;
        margin-top: 50px;
    }


    /*HOME PAGE CODING*/
    .bookTitles{
        width:50%;
        margin-left:6%;
    }

    .slide{
        width: 30%;
        margin-left: auto;
        margin-right: 20%;

    }

    .slide img{
        width: 50%;
        z-index: -30;
    }



    /*BOOK PAGES CODING*/
    .bookFull{
        width: 40%;
    }

    .bookFull img{
        width: 100%;
        margin-top: 10px;
    }

    .container2{
        width: 45%;
        position: relative;
        margin-top: 150px;
        margin-left: 30px;
        height: 800px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .buyButton{
        width: 25%;
        left:7%;
        top:650px;
    }

}

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

    /*GLOBAL CODING*/
    h2{
        font-size: 3em;
    }

    h2:hover{
        font-size: 5em;
    }

    .bookTitles{
        width:60%;
    }


    /*BOOK PAGES CODING*/
    h3{
        font-size: 5em;
    }

    h4{
        font-size:2em;
    }

    .container2{
        width:40%;
        margin-left: 100px;
        margin-top: 170px;
        height:750px;
    }

    .buyButton{
        top: 1050px;
    }
}