@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');
/* CSS Document */
body {
    margin: 0;
}

header {
    width: 100%;
    height: auto;


}

#header-content {
    position: relative;
    width: 960px;
    height: 170px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;







}

nav ul {


    position: absolute;
    padding: 0;
    text-align: center;
    bottom: 0%;
    left: 50%;
    /* Adjusted left to center the nav */

}

nav li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
    left: 100px;
}

nav a {
    text-decoration: none;
    color: black;
    /* Set the default text color */
    /* Adjust padding for better visibility */
}

nav a:hover {
    background-color: darkblue;
    /* Dark blue background on hover */
    color: white;
    /* White text color on hover */
    padding: 10px 10px;
}

#header-content img {
    width: 238px;
    height: 146px;
    margin-top: 10px;
    vertical-align: bottom;
    /* Add this line to align with the bottom of the header content */
    display: inline-block;
}

#banner {
    background-image: url("images/home-banner.jpg");
    background-size: cover;
    width: 100%;
    height: 440px;
    margin: 0;
    /* Reset margin to remove white space */
}

#color-bar {
    margin-top: 0px;
    background-color: #a32973;
    width: 100%;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    /* Set line-height equal to the height of the color bar */
}

#color-bar h3 {
    margin: 0;
    /* Reset margin to remove white space */
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 30px;
}

#wrapper-white {
    width: 960px;
    height: auto;
    position: relative;
    left: 0;
    right: 0;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;

   
    overflow: auto;
    display: flex;
    gap:  40px;
    /* Use flexbox layout */
   
    /* Add space between section and book-details */
}

#wrapper-white section {
    width: 576px;
    margin: 20px 0px 5px 5px;

}

#wrapper-white section h1 {
    font-size: 36px;
    font-family: 'Goudy Bookletter 1911', serif;
    ;
    /* Replace 'Your Font Family' with the actual font family you want to use */
    color: #a32973;
    text-transform: uppercase;
    /* Replace #333333 with your desired hex color for the heading */
}

#wrapper-white section p {
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    /* Replace 'Your Font Family' with the actual font family you want to use */
    color: #000;
    /* Replace #666666 with your desired hex color for the paragraph text */
}

.book-details {
    width: 250px;
    height: 400px;
    margin: 10px 0px 5px 0px;
    /* Adjusted margin to 54px */
    text-align: center;
    border: 3px solid #16325a;
    padding: 5px;
    position: relative;
}

.book-details h2 {
    font-family: 'Goudy Bookletter 1911', serif;
    color: #a32973;

}

.uppercase {
    text-transform: uppercase;
}

.book-details img {
    height: 229px;
    width: 151px;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 55px;
    transition: transform 0.3s ease;
    position: relative;
    
}

.shop-box:hover img {
    transform: scale(1.1);
    /* Increase the size on hover */
}

#wrapper-shop {
    background-color: #f4f3f0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin-top: 50px;
    flex-wrap: wrap;
    margin-bottom: auto;

}

#shop-content {

    width: 960px;
    height: auto;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    padding-bottom: 170px;
    margin-bottom: auto;

}

.shop-box {
    width: 300px;
    text-align: center;
    margin-top: 90px;
    

}

.shop-box h3 {
    font-family: 'Goudy Bookletter 1911', serif;
    ;
    font-size: 28px;
    color: #a32973;
    margin-bottom: 10px;
}

.shop-box p {
    font-family: 'Lato', sans-serif;
    font-size: 14px;

}

#shop-content {
    width: 960px;
    height: auto;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    padding-bottom: 170px;
}

.shop-box img {
    width: 300px;
    height: 149px;
    border-radius: 5%;
    opacity: 0.7; /* Initial opacity */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Add opacity transition */
}

.shop-box:hover img {
    transform: scale(1.1);
    opacity: 1; /* Increase the opacity on hover */
}


.shop-box a {
    background-color: #a32973;
    padding: 3px 10px;
    text-decoration: none;
    color: #fff;
    border-radius: 5%;
 
}

footer {
    background-color: #16325a;
    width: 100%;
    height: auto;
}

#footer-content {
    position: relative;
    margin-left: auto;
    margin-right: auto;

 display: flex;
    height: auto;

    width: 960px;
    justify-content: space-between;




}

#footer-content h3 {
    font-family: 'Goudy Bookletter 1911', serif;
    ;
    text-transform: uppercase;
    font-size: 16px;
    
    color: #fff;
    
}

#footer-content p {
    font-family: 'Goudy Bookletter 1911', serif;
    ;
    font-size: 16px;
    color: #fff;
    opacity: 70%;
    line-height: 1.5;
    
}



#footer-right {
    
    text-align: right;

}
#footer-right h3 {
    text-align:right;

}
aside .book-details {
    opacity: 1;
    transition:all linear 1s;
}
aside .book-details:hover {
    opacity: 0;
    transition: linear 1s;
}
.mask {
    width: 290px;
    height: 430px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    background-color: #a32973;
    opacity: 0;
    transition: linear 2s;
}
.mask:hover {
    opacity: 1;
}
.mask:hover h2 {
    font-size: 32px;
    color: #fff;
    margin-top: 25%;
    opacity: 1;
}
.mask h2,
.mask p,
.mask .learn {
     opacity: 0;
}
.mask:hover h2 {
    font-size: 32px;
    color: #fff;
    margin-top: 25%;
    opacity: 1;
}
.mask:hover p{
    font-size: 20px;
     color: #fff;
     margin-bottom: 40px;
     opacity: 1;
}
.mask .learn {
    background-color: #16325a;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    /* Initial opacity, adjust as needed */
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 34px;
    transition: opacity 5s ease 0.3s; /* Add transition with delay */
}

.mask:hover .learn {
    opacity: 1;
}