/* GLOBAL STYLES (site-wide styles) */
/* These are all the styles for mobile, Shivani! */

/* Border box gives you a more accurate visual height and width */
* {
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
}

/* #FEECC5; was the original color I used to make the site background look like an old book page.  */


/* Fonts Section */

.sekuya-regular {
    font-family: "Sekuya", system-ui;
    font-weight: 400;
    font-style: normal;
}

.borel-regular {
    font-family: "Borel", cursive;
    font-weight: 400;
    font-style: normal;
}

/* I called it domine-exciting because google fonts said to give it your own unique class name.  */
.domine-exciting> {
    font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Mobile Nav Styles */

nav {
    /* background-color: #eb73dd; */
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}

.menu-item {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/*HIDE THE DESKTOP NAV ON MOBILE*/
.desktop-nav {
    display: none;
}


/*THE HAMBURGER MENU*/

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #e3c88d;
    ;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-family: "Domine", serif;
    ;
    font-size: 25px;
    color: #1114ae;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


/* This is for miscelleanous items that appear on more than one page, like the page titles, hero iamges and the next page buttons.  */


.top-section {
    text-align: center;
    color: #7abdc8;
    font-family: "Borel", cursive;
    /* padding: 10px; */
    font-size: 20px;
    margin: 0;
}

.hero-image {
    max-width: 100%;
    position: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

/* For some reason I forgot how to make a rectangle so I asked Claude how to do this. It's in the conversation link.  */
.next-page {
    display: flex;
    width: 140px;
    height: 50px;
    background-color: #7abdc8;
    margin-left: 110px;
    margin-right: 125px;
    text-align: center;
    font-family: "Sekuya", system-ui;
    /* I experimented a bit with different fonts from Google Fonts + text colors. */
    text-decoration-color: blueviolet;
    font-size: 18px;
    margin-top: 20px;
}




/* HOMEPAGE STYLES */


/* As you may notice in the Claude conversation, I tried to use mix-blend-mode to make the text shine through an image. I kept testing it out with different images and I didn't really like the way it looked, so I tried to do my own thing here.  */
/* The intention was for the homepage to sort of look like a book cover on desktop. The mobile version is a bit different since I couldn't figure out how to get the book cover to look right. */


.home-top-section{
    text-align: center;
    color: #7abdc8;
    font-family: "Borel", cursive;
    /* padding: 10px; */
    margin: 0;
    font-size: 20px;
}

#author{
    margin: 0;
    color: #f686dc;
}

.home-hero-image{
    max-width: 100%;
    position: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}


#bookshelves{
    font-size: 12px ;
    font-family: 'Times New Roman', Times, serif;
    color: #000000;
    margin-left: 150px;
}


.intro-paragraph {
    margin-left: 20px;
    margin-right: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
}

#call-to-action-text {
    text-align: center;
    font-size: 20px;
}

#cta-button {
    display: flex;
    width: 140px;
    height: 50px;
    background-color: #7abdc8;
    margin-left: 110px;
    margin-right: 125px;
    text-align: center;
    font-family: "Sekuya", system-ui;
    text-decoration-color: blueviolet;
    font-size: 18px;
}

#ai-notice {
    font-size: 14px;
    border: 2px solid #eb73dd;
    text-align: left;
    padding: 10px;
    display: inline-block;
}


.article-text {
    color: black;
    margin-left: 20px;
    margin-right: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
}

/* EARLY ROOTS PAGE STYLES */

/* I didn't really use AI much on the other pages. I looked at styles we used on other in class assignments for ideas. If there were any times I used AI, those questions are in the Claude conversation link. */

#nypl{
    font-size: 12px ;
    font-family: 'Times New Roman', Times, serif;
    color: #000000;
    margin-left: 150px;
}

#catcher-rye {
    display: flex;
    width: 100%;
    height: 500px;
    object-fit: cover;
    margin-top: 20px;
}

#salinger{
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;
}

#seventeenth-summer {
    margin-top: 40px;
    display: flex;
    height: 400px;
    width: 100%;
    object-fit: cover
}

#daly{
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;

}

.watch-video-text {
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 22px;
    font-weight: bold;

}

.homepage-video {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}


/* GOLDEN AGE PAGE STYLES*/

#cute-picture{
    font-size: 12px ;
    font-family: 'Times New Roman', Times, serif;
    color: #000000;
    margin-left: 150px;
}


.greasers-forever {
    width: 100%;
    height: auto;
}


#the-outsiders {
    display: flex;
    height: 500px;
    width: 100%;
    object-fit: cover
}

#se-hinton {
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;
}

.poor-margaret {
    margin-top: 40px;
    width: 100%;
    height: auto;
}

#margaret-book {
    display: flex;
    height: 500px;
    width: 100%;
    object-fit: cover;
}

#judy-blume {
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;
}

/* New Millenium Styles */

#harry{
    font-size: 12px ;
    font-family: 'Times New Roman', Times, serif;
    color: #000000;
    margin-left: 150px;
}

#potter-books {
    display: flex;
    height: auto;
    width: 350px;
    object-fit: cover;
}

#jk-rowling {
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;
}

#twilight-book {
    display: flex;
    height: 350px;
    width: auto;
    object-fit: cover;
    margin-left: 60px;
    margin-right: auto;
}

#twilight-movie {
    margin-top: 20px;
    display: flex;
    width: 350px;
    height: auto;
    object-fit: cover;
    margin-left: 5px;
}

#meyer {
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;
}

/* Modern Day Styles */

#novels{
   font-size: 12px ;
    font-family: 'Times New Roman', Times, serif;
    color: #000000;
    margin-left: 150px; 
}

#hate-u-give-book {
    display: flex;
    width: 350px;
    height: auto;
}

#thomas {
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;

}


#the-poet-x {
    display: flex;
    width: 350px;
    height: auto;
    margin-top: 20px;
}

#acevedo {
    border: 2px solid black;
    font-size: 18px;
    padding: 10px;
}

#reading {
    color: rgb(186, 41, 177);
    text-align: center;
    font-size: 25px;
}

#goodreads {
    text-align: center;
    color: #4a6fcc;
    font-size: 20px;
    font-weight: bold;
}

#sticky-note {
    display: flex;
    width: 350px;
    height: auto;
}

#everything {
    display: flex;
    width: 350px;
    height: auto;
    margin-top: 20px;
}

#way {
    display: flex;
    width: 350px;
    height: auto;
    margin-top: 20px;
}








/* This is the desktop section, Shivani. */
/* Adjustments for desktop */
@media screen and (min-width:1080px) {
    /* all of the CSS for desktop goes in here in a second set of braces. */

    nav {
        background-color: #e3c88d;
    }

    .menu-item {
        color: #1114ae;
        font-family: "Domine", serif;
    }
    /* I decided not to have the next page button display on desktop since it looked kinda ugly.  */
    .next-page {
        display: none;
    }

    /* Homepage styles */

    .home-top-section{
    border: 2px solid black;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    text-align: center;
    background-color: #4e2222;
}

.title-text{
    text-align: center;
    color: #49dbf2;
    font-family: "Borel", cursive;
    /* Claude recommended in one of it's responses that you can use margin: 0 to reduce margin that automatically gets put on text.  */
    margin: 0;
    margin-top: 20px;
    padding: 10px;
    font-size: 65px;
    text-shadow: 2px 4px 10px #1500ff;
    /* I asked Claude about interesting text decoration ideas, and it told me about text shadows */
    /* The first number is how much shadow you want left or right, second number is how much shadow you want up or down. Positive numbers mean shadow goes right and down. Negative means left and up. Third number is amount of blur. Last is color.*/
    /* I used the numbers Claude gave me and experimented with the color to find one I liked. Ended up with shade of blue.*/
}

#author{
    font-size: 30px;
    font-family: "Borel", cursive;
    margin: 0;
    color: #f686dc;
}

.home-hero-image{
    width: 90%;
    margin-bottom: 20px;
}



    .intro-paragraph {
        margin-left: 50px;
        margin-right: 50px;
    }

    .article-text {
        margin-left: 50px;
        margin-right: 50px;
    }

    #cta-button {
        margin-left: 45%;
        margin-right: 45%;
        
    }

    #ai-notice {
        margin-top: 20px;
        margin-left: 160px;
        margin-right: 50px;

    }


    /* Early Roots  */

    .homepage-video {
        position: center;
        margin-left: 450px;
        margin-right: 450px;
    }


    .caulfield{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #catcher-rye {
        width: auto;
        height: 500px;
    }

      #salinger{
        display: flex;
        width: 300px;
        height: auto;
        margin-left: 20px;
    }


    .angie{
        display: flex;
        align-items: center;
        justify-content: center;

    }

    #seventeenth-summer {
        /* margin-right: 50px;
        float: right; */
        display: flex;
        height: 450px;
        width: auto;
    }

    #daly{
        width: 300px;
        height: auto;
        margin-left: 20px;

    }

    #the-outsiders {
        margin-left: 50px;
        float: left;
        display: flex;
        height: 450px;
        width: auto;
    }

  

   

    /*Hide the mobile nav once the screen is 1081 pixels wide*/
    .mobile-nav {
        display: none;
    }

    /*Show the desktop nav*/
    /* I tried to create a sticky navbar using both the W3schools tutorial and Claude but it didn't work out. */
    .desktop-nav {
        display: flex;
        /* position: sticky;
        top: 0;
        z-index: 100; */
    }

/* Had to use Claude to remind myself how to center content. I will put the link to the conversation when I turn in assignment.  */
    /* Golden Age Styles*/

    .greasers-forever {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #the-outsiders {
        width: auto;
        height: 400px;

    }

    /* Cannot figure out how to make textbox not take up length of page. Image and textbox are connected, even though code looks the same as the one for margaret book.  */
    /* Finally got textbox to work. You have to make the width really large. And use auto for height. I kept trying to make the width like 70 px which is too small.   */
    #se-hinton {
        width: 300px;
        height: auto;
        margin-left: 20px;
        padding: 10px;
    }


    .poor-margaret {
        /* margin-left: 50px; */
        display: flex;
        align-items: center;
        justify-content: center;

    }

    #margaret-book {
        width: auto;
        height: 500px;
    }

    #judy-blume {
        width: 300px;
        height: auto;
        padding: 10px;

    }


    /* New Milennium Styles */

    .books-beloved {
        margin-left: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #potter-books {
        max-width: 100%;
    }

    #jk-rowling {
        width: 500px;
        height: auto;
        margin-left: 30px;
        padding: 20px;
    }

    .team-edward {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #twilight-book {
        display: flex;
        margin-left: 300px;
        justify-content: center;
        margin-top: 30px;
    }

    #twilight-movie {
        display: flex;
        justify-content: center;
        margin-right: 150px;
    }

    #meyer {
        position: center;
        width: 300px;
        height: auto;
        padding: 20px;
        margin-right: 100px;
    }


    /* Modern Day Styles */

    .hate-u-give {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #hate-u-give-book {
        display: flex;
        position: relative
    }

    #thomas {
        margin-left: 30px;
        width: 400px;
        height: auto;
        padding: 10px;
    }

    .slam-poetry {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
    }

    #the-poet-x {
        display: flex;
        position: relative
    }

    #acevedo {
        margin-left: 30px;
        width: 400px;
        height: auto;
        padding: 10px;
    }

    #reading{
        margin: 40px;
    }

    #goodreads{
        font-size: 24px;
    }

   .fave-books{
    display: flex;
    align-items: center;
    justify-content: center;
   }

   #sticky-note{
    margin-right: 40px;
   }

   #everything{
    margin-right: 40px;
    margin-left: 20px;
   }

   #way{
    margin-left: 20px;
   }
}