.navigation {
    display: flex;
    position: fixed;
    top: 0px;
    z-index: 10;
}

body {
    background-image: url("abstract-splashed-watercolor-textured-background/8753RedVersionDark.png");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow-x: hidden;
    /* Need these values to make the divs take up the entire content */
    margin: 0;
    padding: 0;
}

/* We want to preserve the aspect ratio of this logo so we are using an object-fit of contain */
#WebsiteLogo {
    object-fit: contain;
}

.navigationContainer {
    font-size: 2rem;
    display: flex;
    background-color: transparent;
    flex-flow: row;
    gap: 10px;
    color: white;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#GoHomeBtn, #GoAboutBtn, #GoMyBooksBtn {
    cursor: pointer;
}

/* Makes the background fixed on the screen */
.Page1Container {
    
    margin-top: -100px;
    padding-top: 50px;
    padding-bottom: 300px;
    /* We need to specify the margin left and right to be auto otherwise the div will not center properly with max-width being set to any value */
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    
}

.Page1_Heading {
    display: flex;
    margin-top: 125px;
    color: white;
    font-family: 'Cambria', 'Cochin', 'Georgia', Times, 'Times New Roman', serif;
    font-size: 1.8rem;
    justify-content: center;
    padding-left: 3ch;
    padding-right: 3ch;

}

.Page1_Content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 4ch;
    
}

.page1_RightSide {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 1.6rem;
    color: whitesmoke;
}

.fa-angles-down {
    font-size: 75px;
    color: white;
    cursor: pointer;
    transform: translateY(-10px);
    transition: color 0.3s;
    animation-name: animateScrollIcon;
    animation-duration: 1s;
    animation-iteration-count: 50;
    animation-direction:alternate;
}

.page1TitleName {
    font-size: 2.7rem;
    margin: 0;
}

.page1_TitleName_Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1ch;
}


.page1_Footer {
    margin-top: 75px;
    display: flex;
    justify-content: center;
}

#page1InStoresNowTxt {
    color: rgba(255, 255, 255, 0.834);
    font-size: 2.6rem;
}

.ReadMoreBtn {
    font-size: 1.8rem;
    background-color: rgb(54, 54, 54);
    border: 0px;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    padding: 0.3ch;
}

.ReadMoreBtn span {
    cursor: pointer;
}

#BuyNowBtn {
    font-size: 1.8rem;
    margin-top: 20px;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 0.3ch;
    padding-bottom: 0.3ch;
    padding-left: 1.2ch;
    padding-right: 1.2ch;
    text-decoration: none;
    transition: background-color 0.3s;
}

.Page2Container {
    background: rgba(0, 0, 0, 0.913);
    padding-bottom: 150px;
    border-radius: 20px;
    margin-top: -250px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.Page2_Heading {
    color: rgb(243, 218, 237);
    font-size: 1.7rem;
    display: flex;
    justify-content: center;
    align-items: left;
    justify-items: center;
    flex-direction: column;
    padding-top: 5ch;
    padding-left: 5ch;
    padding-right: 5ch;
}

.Page2_Heading p {
    font-size: 3rem;
    margin-top: -60px;
}

.Page2_Content {
    display: flex;
    font-size: 1.3rem;
    color: white;
    max-width: 1500px;
    padding: 5ch;
    
}

.Page2_Content .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 5ch;
  }
  
.Page2_Content .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    min-width: 400px;
  }

.Page2_Content h2 {
    display: flex;
    justify-content: center;
}

.Page3Container {
    margin-top: 175px;
    background-color: rgba(230, 230, 230, 0.867);
    border-radius: 20px;
    padding: 100px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.Page3_Heading {
    display: flex;
    font-size: 1.5rem;
    flex-grow: 1;
    gap: 2px;
    padding: 0px;
    align-items: center;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.Page3_Heading h2 {
    margin-top: -50px;
    color: darkblue;
}

.Page3_Content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2ch;
}

.Page3_Content_Books {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Page3_Content h3 {
    font-size: 1.4rem;
}

.fa-angles-up {
    font-size: 75px;
    color: white;
    cursor: pointer;
}

.page3_Footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.MoreInfoBtn,
.MyBooksBuyNowBtn {
    font-size: 1rem;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    padding-top: 0.3ch;
    padding-bottom: 0.3ch;
    padding-left: 1.2ch;
    padding-right: 1.2ch;
    width: 15ch;
}
.MyBooksBuyNowBtn {
    margin-top: 10px;
    
}

.MyBooksBuyNowBtn a {
    color: inherit;
    text-decoration: none;
}

.footerHeading {
    display: flex;
    justify-content: center;

}

/* This is the content that is hidden at first */
.MoreDetailsPageContainer {
    display: none;
    background: rgba(0, 0, 0, 0.913);
    padding-bottom: 150px;
    padding-top: 75px;
    border-radius: 20px;
    margin-top: 100px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

.MoreDetailsPageHeading {
    display: flex;
    justify-content: center;
    padding-left: 1ch;
    padding-right: 1ch;
}

.MoreDetailsPageHeading h1 {
    font-size: 3rem;
}

.MoreDetailsPageContainer.visible {
    display: block;
}

.MoreDetailsPageContainer {
    position: relative;
    transform-origin: top;
    transform: scaleY(1);
    
}

.MoreDetailsPageContainer.hide {
    display: block;
    position: absolute;
    width: 100%;
    transform: scaleY(0);
    margin-top: 30px;
    z-index: 2;
    transition: transform 700ms;
    
    
}

.MoreDetailsPageContent {
    
    color: white;
    max-width: 800px;
    padding: 3ch;
    margin: auto;
}

.MoreDetailsPageContent h1 {
    font-size: 2rem;
}

.MoreDetailsPageContent p {
    font-size: 1.2rem;
}


.MoreDetailsPageContent h2{
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.footerHeading {
    width: 100%;
}

footer {
    margin-top: 50px;
    background-color: black;
    padding-bottom: 10px;
    overflow: hidden;
    padding-left: 5ch;
    padding-right: 5ch;
}

.footerHeading h1 {
    font-size: 2.2rem;
    font-weight: bold;
    color: rgb(243, 218, 237);
}

.footer_Content {
    color: rgb(200, 200, 200);
}

.footer_Content .topSection {
    margin-top: -30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 1.4rem;
}

.footer_Content h1 {
    margin-top: -30px;
    padding-bottom: 20px;
    font-size: 1rem;
}

#FooterSpaceDivider {
    margin-top: -30px;
    padding-bottom: 20px;
    font-size: 1.65rem;
    
}

.footer_Content .botomSection {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 0.9rem;
}

.copyRightSection {
    font-size: 0.5rem;
    color: rgb(200, 200, 200);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.copyRightSection h2 {
    margin-top: -2px;
}

.FooterLink {
    color: inherit;
    text-decoration: underline;
}

.FooterLink:hover {
    color: purple;
}

/* Now let's start adding effects and animations */


/* Now lets add media queries for mobile support to the site */

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

    .navigationContainer {
        font-size: 1.7rem;
        gap: 5px;
        margin-top: 10px;
    }
    

    #WebsiteLogo {
        padding-right: 0px;
    }
    #GoHomeBtn {
        margin-left: -20px;
    }

    .Page1_Heading {
        font-size: 1.2rem;
        margin-top: 150px;
        margin-bottom: -25px;
    }

    #bookCoverImage {
        width: 250px;
        padding: 5ch;
    }

    .page1TitleName {
        font-size: 2rem;
    }

    #page1InStoresNowTxt {
        font-size: 1.8rem;
    }


    #Page1_Content {
        width: auto;
    }

    .Page2_Heading {
        font-size: 1.1rem;
    }

    .Page2_Content {

        font-size: 1.2rem;
        margin: 0,0;
    }

    .Page2_Content .column {
        min-width: 300px;
    }

    .MoreDetailsPageHeading h1{
        font-size: 2rem;
    }

    .MoreDetailsPageContent h1{
        font-size: 1.4rem;
    }
    
    .MoreDetailsPageContent p {
        font-size: 1.2rem;
    }

    .footer_Content .botomSection {
        display: flex;
    }

    .copyRightSection {
        display: flex;
        margin-right: 0px;
    }
}

/* Now we can start adding the animations */


/* https://codepen.io/yuhomyan/pen/OJMejWJ */

  #GoHomeBtn,#GoAboutBtn,#GoMyBooksBtn {
    color: default;
    transition: color 0.3s;
  }

  #GoHomeBtn:hover, #GoAboutBtn:hover,#GoMyBooksBtn:hover {
    color: lightgreen;
    transition: color 0.3s;
  }

  .ReadMoreBtn span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .ReadMoreBtn:hover:after {
    width: 100%;
  }
  .ReadMoreBtn span:hover{
     color: rgb(251, 193, 2);
  }
  .ReadMoreBtn span:before,
  .ReadMoreBtn span:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
     background: rgb(251, 193, 2);
    transition: all 0.3s ease;
  }
  .ReadMoreBtn span:after {
    width: 0%;
    height: 2px;
  }
  
  .ReadMoreBtn span:hover:after {
    width: 100%;
  }

/* https://codepen.io/yuhomyan/pen/OJMejWJ */

#BuyNowBtn:hover {
    background-color: rgb(54, 54, 54);
    transition: background-color 0.3s;
}

  #BuyNowBtn span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  
  #BuyNowBtn:hover:after {
    width: 100%;
  }
  #BuyNowBtn span:hover{
     color: rgb(249, 67, 67);
  }
  
  #BuyNowBtn span:before,
  #BuyNowBtn span:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
     background: rgb(249, 67, 67);
    transition: all 0.3s ease;
  }
  #BuyNowBtn span:after {
    width: 0%;
    height: 2px;
  }
  
  #BuyNowBtn span:hover:after {
    width: 100%;
  }


  .fa-angles-down,.fa-angles-up {
    transition: all 0.3s;
  }

  .fa-angles-down:hover, .fa-angles-up:hover {
        color: black;
    }

    .MoreInfoBtn,
    .MyBooksBuyNowBtn {
        transition: all 0.4s;
        cursor: pointer;
    }

    .MoreInfoBtn:hover,
    .MyBooksBuyNowBtn:hover {
        background-color: rgb(68, 68, 68);
        color: white;
    }

    /* Put all custom animations here */
    @keyframes animateScrollIcon
    {
       
    0%   {transform: translateY(-10px)}
        
    100%  {transform: translateY(20px)}
    
    }
  
/* Creating text effects and animations */
    .Page1_Heading h1 {
        animation-name: animatePage1TextHeading;
        animation-duration: 0.4s;
        animation-iteration-count: 1;
        animation-direction:normal;
    }

    @keyframes animatePage1TextHeading
    {
        0% {transform: scale(5);}

        100% {transform: scale(1);}
    }


    .page1_LeftSide {
        transform: translateX(-3000px);
        animation-name: animatePage1LeftSide;
        animation-duration: 1s;
        animation-iteration-count: 1;
        
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }

    @keyframes animatePage1LeftSide
    {
        0% {transform: translateX(-3000px)}
        100% {transform: translateX(0)}
    }

    .page1_RightSide {
        transform: translateX(3000px);
        animation-name: animatePage1RightSide;
        animation-duration: 1s;
        animation-iteration-count: 1;
        
        animation-direction:alternate;
        animation-fill-mode: forwards;
    }

    @keyframes animatePage1RightSide
    {
        0% {transform: translateX(3000px)}
        100% {transform: translateX(0)}
    }

      #page1InStoresNowTxt 
    {        
        
        animation-name: InStoresNowAnimation;
        animation-duration: 1s;
        animation-delay: 1.5s;
        animation-iteration-count: 2;
        background-repeat: no-repeat;
        animation-direction:alternate;
        animation-fill-mode: backwards;
        
    }
      
      @keyframes InStoresNowAnimation {
        0% {
            color: rgba(255, 255, 255, 0.834);
            transform: scale(1);
        }

        40% {
            color: rgba(255, 255, 255, 0.834);
        }

        100% {
            
            color: rgb(8, 0, 255);
            transform: scale(2);
            
        } 
    }

    .navigationContainer {
        transform: translateY(-1000px);
        animation-name: NavigationAnimation;
        animation-duration: 1.5s;
        animation-delay: 2s;
        animation-iteration-count: 1;
        background-repeat: no-repeat;
        animation-direction:normal;
        animation-fill-mode: forwards;
    }
    @keyframes NavigationAnimation {
        0% {
            
            transform: translateY(-1000px);
        }
        100% {
            
            transform: translateY(0px);
        } 
    }

    /* Change class options when scroll event happens */
.goHomeBtn {
    color: default;
    transition: all 0.3s;
}

.goHomeBtn.SetActive {
    color: lightgreen;
}

.goAboutBtn {
    color: default;
    transition: all 0.3s;
}

.goAboutBtn.SetActive {
    color: lightgreen;
}

.goMyBooksBtn {
    color: default;
    transition: all 0.3s;
}

.goMyBooksBtn.SetActive {
    color: lightgreen;
}

/* Create page animation when single scroll event happens */
.Page2Container{
    transform: translateY(200px);
    opacity: 0;
}

.Page2Container.StartAnimation{
    transform: translateY(0px);
    opacity: 1;
    transition: all 0.6s;
}


.Page3Container {
    transform: translateY(-200px);
    opacity: 0;
}

.Page3Container.StartAnimation {
    transform: translateY(0px);
    opacity: 1;
    transition: all 0.6s;
}