/* RMIT University Vietnam
Course: COSC2430 Web Programming
Semester: 2023A
Assessment: Assignment 1
Author: Tran Tuan Trung
ID: s3978165
Acknowledgement: Color Hunt. (n.d.).  - Color Palettes for Designers and Artists. Available at: https://colorhunt.co/. [Accessed 25 July. 2023].

Font Awesome 5 (2017). Font Awesome 5. [online] Fontawesome.com. Available at: https://fontawesome.com/.

‌Google Fonts. (n.d.). Browse Fonts. [online] Available at: https://fonts.google.com/?sort=popularity&category=Handwriting [Accessed 25 Jul. 2023].
‌
iNlOONa. (2023). Peaceful Afternoon, Lazy Summer day Comfort playlists | RnB playlist. [4 Jul] Available at: https://youtu.be/Ivtcz6XjoUM [Accessed 2 Aug. 2023].

Ionic (n.d.). Ionicons: The premium icon pack for Ionic Framework. [online] ionic.io. Available at: https://ionic.io/ionicons.

Morgan Long. (2020). AUTUMNAL READ WITH ME || 1 hour of reading with cozy music. [13 Nov] Available at: https://youtu.be/zxad63kl87g [Accessed 2 Aug. 2023].
‌Noble, B. (2019). Online Bookstore: Books, NOOK ebooks, Music, Movies & Toys. [online] Barnes & Noble. Available at: https://www.barnesandnoble.com/.
OnlineTutorialsYT. (2023a). Animated Glassmorphism Login Form using Html & CSS. [2 Mar]. Available at: https://youtu.be/9OjC44GnxAM [Accessed 1 Aug. 2023].
‌
OnlineTutorialsYT. (2023b). CSS Water Wave Background Animation Effects | Html CSS @OnlineTutorialsYT. [6 Mar]. Available at: https://youtu.be/cxOaxNQVzrM [Accessed 1 Aug. 2023].
‌
OpenAI (2023a) ChatGPT (May 24 version) [Large language model], accessed 26 Jul. 2023. https://chat.openai.com/share/1388729a-0302-4f06-9311-b263d1eb6d6a.

OpenAI (2023b) ChatGPT (May 24 version) [Large language model], accessed 26 Jul. 2023. https://chat.openai.com/share/115b9f5f-f340-4def-8da1-065ba3268ba4.
‌Pinterest (2018). Pinterest. [online] Pinterest. Available at: https://www.pinterest.com/.
Web Dev Creative. (2023). How To Create a Responsive Navbar Using HTML & CSS | Step By Step Tutorial. [27 Jan] Available at: https://youtu.be/GdrbE-s5DgQ [Accessed 1 Aug. 2023].
*/
* {
    margin: 0;
    padding: 0;
}
span, h2, p, a, button{
    text-decoration: none;
    color: #555;
    text-shadow: 13px 10px 9px rgb(79, 79, 79, 0.5);
    font-family: 'Fuzzy Bubbles', cursive; 
}
h1 {
    text-shadow: 8px 7px 16px rgba(245, 255, 198, 0.5);
    animation: fade-up 1s; 
}
.nav-button, .dropdown {
    display: none;
}
/* header styling */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #A4907C;
    color: #fff;
    position: fixed;
    z-index: 1001;
    width: 100%;
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
}
/* logo styling */
.logo {
    display: flex;
    align-items: row;
}
.logo img {
    height: 40px; 
    float: left; 
    margin-left: 20px;
    margin-top: 5px;
}
.logo p {
    padding: 6px 15px;
    font-family: 'Fleur De Leah', cursive;
    font-size: 2rem;
    color:#D0F5BE;
}
/* navbar styling */
.navbar {
    float: right; 
    margin-right: 20px;
}

.navbar a, .dropdown a {
    text-decoration: none;
    padding: 10px 15px;
    font-family: 'Fuzzy Bubbles', cursive;
    color: #FBFFDC;
}
.navbar a:hover {
    background-color: #555;
}

/* breadcrumbs styling */
.breadcrumb {
    list-style: none;
    font-size: 2vw;
    display: flex;
    padding: 70px 2% 2% 2%;
    justify-content: center;
    background-color: #A4907C;
    width: max-content;
    border-radius: 0px 0px 20px 20px;
    margin: 0 auto;
    box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li:not(:last-child):after {
    content: " › "; 
    color: #FBFFDC; 
}
.breadcrumb li a, .breadcrumb li span {
    text-decoration: none;
    color: #FBFFDC;
    text-shadow: 8px 7px 16px rgba(245, 255, 198, 0.5);
}
/* initialize the flex box for the main book detail section */
.sect1-container{
    background-image:linear-gradient(
        to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(251,255,220, 1) 100%), url(../img/background.jpg);
    background-size: cover;
}
/* initialize the flexbox's position and proportion */
.sect1 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-top: 3%;
}
.detail-container {
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    width: 50%;
}
.right{
    display: flex;
    justify-content: top;
    text-align: center;
    flex-direction: column;
}
.middle{
    width: 120px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.left {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: fade-up 1s; 
    z-index: 101;
}
/* styling and sizing for the child elements of the flexboxes */
.book {
    display: flex;
    text-align: center;
    flex-direction: column;
    margin: 3%;
    text-decoration: none;
}
.book-img, .middle img {
    display: block;
    width: 90%;
    border: 10px double #A4907C;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    animation: fade-up 1s; 
}
.middle img {
    margin-top: 7%;
    z-index: 100;
}
.right p {
    animation: fade-up 1s; 
}
.right span {
    animation: fade-up 1s;
    margin-top: 5%;
}

.left img {
    width: 320px;
    border: 16px double #D0F5BE;
    box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}
/* add to cart button and price styling */
.cart button {
    font-size: 2rem;
    border: none;
    padding: 20%;
    margin-top: 30%;
    background-color: transparent;
    justify-content: center;
    text-align: center;
    background-image: url(../img/v788-mynt-08-removebg-preview.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: fade-up 1s; 
    cursor: pointer;
}
#price {
    font-size: 10vw;
    font-family: 'Dancing Script', cursive;
    color:#FBFFDC;
    animation: fade-up 1s;
    z-index: 100;
}
/* extra description styling */
.extra-description {
    display: flex;
    flex-direction: column;
    background-color: #FBFFDC;
    padding-bottom: 10vh;
    background: linear-gradient(181deg, #FAFDDD 20%, #D0F5BE 90%);
}
.book-name {
    font-size: 6vh;
    font-family: 'Dancing Script', cursive;
    color:#555;
    width: 70%;
    margin: 3vh 0vw;
    text-align: center;
    text-shadow: 8px 7px 16px rgba(245, 255, 198, 0.5);
    animation: fade-up 1s; 
    z-index: 100;
}
.description {
    margin: 3vh 10vw;
    z-index: 100;
    animation: fade-up 1s; 
}
/* footer initailizing with up and down halves */
.up{
    position: relative;
    background: linear-gradient(181deg, #D0F5BE 20%, #F4D160 90%);
    display: flex;
    justify-content: space-between;
    padding-bottom: 3%;
    align-items: center;
}
.down {
    position: relative;
    width: 100%;
    background: linear-gradient(181deg, #80D7FF 20%, #1065aa 90%);
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    z-index: 100;
}
/* footer nav bar and content styling */
.up h1{
    font-size: 5vw;
    font-family: 'Dancing Script', cursive;
    color: #A4907C;
}
#music {
    color: #414040;
    font-size: 4vw;
    padding-bottom: 3%;
}
/* footer icons and second nav bar styling */
.icon, .nav2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}
.icon li, .nav2 li {
    list-style: none;
}
.icon li a {
    font-size: 3em;
    color: #FBEEAC;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
}
.nav2 li a, .down p {
    font-size: 1em;
    color: #FBEEAC;
    margin: 10px 10px;
    display: inline-block;
    transition: 0.5s;
    text-decoration: none;
}
/* video styling and sizing */
.video-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
iframe {
    width: 30vw;
    height: 35vh;
    border-radius: 20px;
    border: 10px double #A4907C;
    box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.2); 
}
/* page hovering effects */
.icon li a:hover, .nav2 li a:hover {
    transform: translateY(-10px);
    transition: 0.5s; 
}
button:hover {
    transform: translateY(-30px) scale(1.022);
    transition: 0.5s; 
}
.category:hover {
    transform: translateY(-10px) scale(1.022);
    transition: 0.5s; 
}
.navbar a:hover, .dropdown a:hover{
    transform: scale(1.022);
    transition: 0.5s; 
    background-color: #614E36;
    border-radius: 20px;
}
.breadcrumb li a:hover{
    transform: scale(1.022);
    transition: 0.5s; 
    background-color: #614E36;
    border-radius: 20px;
}
/* animation */

/* footer's island waves animation */
.down .wave {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
}
#wave1 {
    background-image: url(../img/wave.png);
    background-size: 1000px 100px;
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: wave 5s linear infinite;
}
#wave2 {
    background-image: url(../img/wave.png);
    background-size: 1000px 100px;
    z-index: 999;
    opacity: 0.4;
    bottom: 0;
    animation: wave 8s linear infinite;
}
#wave3 {
    background-image: url(../img/wave.png);
    background-size: 1000px 100px;
    z-index: 998;
    opacity: 0.6;
    bottom: 0;
    animation: wave 11s linear infinite;
}
#wave4 {
    background-image: url(../img/wave.png);
    background-size: 1000px 100px;
    z-index: 997;
    opacity: 0.8;
    bottom: 0;
    animation: wave 13s linear infinite;
}
/* keyframe for animation */
@keyframes wave {
    0%
    {
        background-position-x: 1000px;
    }
    100%
    {
        background-position-x: 0px;
    }
}
/* page's falling leaves initializing and setting up falling area*/
.leaves {
    position: absolute;
    width: 10%;
    height: 200vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    pointer-events: none;
}
.leaves .set {
    position: absolute;
    width: 100%;
    height: 200vh;
    top: 0;
    left: 0;
    pointer-events: none;
}
.leaves .set div {
    position: absolute;
    display: block;
}
/* set effects for each leaf */
.leaves .set div:nth-child(1){
    left: 20%;
    animation: animate 27s linear infinite;
}
.leaves .set div:nth-child(2){
    left: 50%;
    animation: animate 24s linear infinite;
}
.leaves .set div:nth-child(3){
    left: 70%;
    animation: animate 20s linear infinite;
}
.leaves .set div:nth-child(4){
    left: 5%;
    animation: animate 40s linear infinite;
}
.leaves .set div:nth-child(5){
    left: 25%;
    animation: animate 34s linear infinite;
}
.leaves .set div:nth-child(6){
    left: 60%;
    animation: animate 20s linear infinite;
}
.leaves .set div:nth-child(7){
    left: 70%;
    animation: animate 15s linear infinite;
}
.leaves .set div:nth-child(8){
    left: 15%;
    animation: animate 18s linear infinite;
}

.leaves .set div:nth-child(9){
    left: 80%;
    animation: animate 33s linear infinite;
}
.leaves .set div:nth-child(10){
    left: 54%;
    animation: animate 31s linear infinite;
    animation-delay: 10s;
}
.leaves .set div:nth-child(11){
    left: 26%;
    animation: animate 29s linear infinite;
    animation-delay: 6s;
}
.leaves .set div:nth-child(12){
    left: 84%;
    animation: animate 27s linear infinite;
    animation-delay: 5s;
}
.leaves .set div:nth-child(13){
    left: 28%;
    animation: animate 23s linear infinite;
    animation-delay: 7s;
}
.leaves .set div:nth-child(14){
    left: 12%;
    animation: animate 28s linear infinite;
    animation-delay: 5s;
}
.leaves .set div:nth-child(15){
    left: 43%;
    animation: animate 25s linear infinite;
    animation-delay: 8s;
}
.leaves .set div:nth-child(16){
    left: 7%;
    animation: animate 23s linear infinite;
    animation-delay: 5s;
}
.leaves .set div:nth-child(17){
    left: 60%;
    animation: animate 34s linear infinite;
}
.leaves .set div:nth-child(18){
    left: 24%;
    animation: animate 32s linear infinite;
    animation-delay: 9s;
}
.leaves .set div:nth-child(19){
    left: 76%;
    animation: animate 35s linear infinite;
    animation-delay: 5s;
}
.leaves .set div:nth-child(20){
    left: 15%;
    animation: animate 37s linear infinite;
    animation-delay: 11s;
}

.leaves .set div:nth-child(21){
    left: 90%;
    animation: animate 22s linear infinite;
    animation-delay: 19s;
}
.leaves .set div:nth-child(22){
    left: 70%;
    animation: animate 26s linear infinite;
    animation-delay: 17s;
}
.leaves .set div:nth-child(23){
    left: 26%;
    animation: animate 24s linear infinite;
    animation-delay: 16s;
}
.leaves .set div:nth-child(24){
    left: 76%;
    animation: animate 33s linear infinite;
    animation-delay: 15s;
}
/* keyframe for falling animation */
@keyframes animate {
    0%
    {
        opacity: 0;
        top: -10%;
        transform: translateX(20px) rotate(0deg);
    }
    10%{
        opacity: 1;
    }
    20%{
        transform: translateX(-20px) rotate(45deg);
    }
    40%{
        transform: translateX(-20px) rotate(45deg);
    }
    60%{
        transform: translateX(20px) rotate(90deg);
    }
    80%{
        transform: translateX(-20px) rotate(180deg);
    }
    100%{
        top: 110%;
        transform: translateX(20px) rotate(225deg);
    }
}
/* keyframes for content appearing smoothly */
@keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
}
/* customization for smaller tablets screen */
@media (max-width: 992px) {
    /* rearrange and resizing the book detail section for smaller screens */
    .sect1 {
        display: flex;
        flex-direction: column-reverse;
    }
    .detail-container {
        flex-direction: column-reverse;
        width: 100%;
    }
    .middle {
        flex-direction: row-reverse;
        margin: 0 auto;
        padding: 5%; 
    }
    .middle img{
        margin: 10%;
        width: 200px;
    }
    .left img {
        width: 60%;
    }
    #price {
    padding: 10px;
    background-image: url(../img/paint4-removebg-preview.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    }
    .cart button{
        margin: 0;
    }
    .breadcrumb {
        font-size: 3vw;
        padding-bottom: 2%;
    }
    .book-name {
        width: 100%;
    }
    /* footer's content resizing and restyling */
    .up img {
        display: none;
    }
    .up {
        display: flex;
        justify-content: center;
    }
    .video-container {
        margin: 0px 10vw;
        width: 100%;
    }
    iframe {
        margin: 0px 10vw;
        width: 100%;
    }
    #music {
        font-size: 10vw;
    }
    /* change navbar setting to dropdown menu instead of horizontal */
    .navbar {
        display: none;
    }
    .nav-button {
        display: flex;
        justify-content: center;
        padding-right: 2%;
        font-size: 4vw;
    }
    .dropdown.open{
        position: fixed;
        display: flex;
        align-items: center;
        font-size: 3vw;
        flex-direction: column;
        background-color: #A4907C;
        right: 0;
        top: 56px;
        width: 40%;
        box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
        border-radius: 0px 0px 20px 20px;
        z-index: 1000;
    }
    .dropdown {
        display: none;
    }
}
@media (max-width: 767px) {
    /* resizing book detail element for smaller screens */
    .middle img{
        margin: 10%;
        width: 70px;
    }
    .book-name {
        width: 100%;
        font-size: 4vh;
    }
    /* restyling text and elements for smaller mobile screens */
    .down p {
        font-size: 3vw;
    }
    .nav2 li {
        font-size: 3vw;
    }
    .icon li a {
        font-size: 12vw;
    }
    .video-container {
        margin: 0px 10vw;
    }
    iframe {
        margin: 0px 10vw;
        width: 100%;
    }
    #music {
        font-size: 10vw;
    }
    /* remove falling leaves for small screen */
    .leaves {
        display: none;
    }
    /* resizing dropdown menu */
    .nav-button {
        font-size: 5vh;
    }
    .dropdown.open{
        font-size: 1.5rem;
        width: 100vw;
        top: 51px;
    }
    .dropdown.open a {
        padding: 1%;
    }
}