@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

#header-content{ width: 80%; margin: 0 auto; position: relative;}

nav{position: absolute; bottom: 20px; right: 120px;}
nav li{ display: inline-block; padding: 10px 20px;}
nav a{text-decoration: none; color: #16325a;}
nav a:hover{background-color: #16325a; color: white; padding: 10px 20px;}

#banner{background-image: url(images/home-banner.jpg); height: 440px; width: 100%;}

#color-bar{background-color: #a32973; color: white; text-align: center; padding: 10px; }
#color-bar h3{ font-size: 25px; }
#wrapper-white{width: 80%; margin: 20px auto; display: flex;}
section{width: 580px; }
section h1{font-size: 36px; color: #a32973; text-transform: uppercase; padding: 10px 0;}
section p{ font-size: 16px; line-height: 1.5; margin-top: 10px; padding: 10px; font-family: lato;}
aside{width: 300px; height: 300px; float: right; position: relative; border: 3px solid #16325a; text-align: center; padding: 20px 14px 14px;}

aside .book-details { opacity: 1;}
aside .book-details:hover {opacity: 0; transition: linear 1s;}
.mask { width: 328px; height: 334px; position: absolute; top: 0; left: 0;
     text-align: center; background-color: #a32973; opacity: 0; transition: linear 2s;}
.mask:hover { 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:hover .learn { background-color: #16325a; color: #fff; font-family: lato; font-size: 20px;
    opacity: 1; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 34px;}

.uppercase{ text-transform: uppercase;}
aside h2{color: #a32973; font-size: 25px; padding: 10px 0; margin: 20px;}
#wrapper-shop{background-color: #f4f3f0; margin-bottom: 20px; padding:30px;}
#shop-content{width: 80%; margin: 0 auto; display: flex; text-align: center;}
.shop-box{width: 300px; margin-left:15px;}
#shop-content h3{font-size: 28px; text-transform: uppercase; color: #a32973;}
#shop-content p{ font-size: 14px; line-height: 1.5; margin-bottom: 10px; font-family: lato;}
#shop-content a{text-decoration: none; color: #fff; background-color: #a32973; padding:5px; font-family: lato;}

footer{width: 100%; background-color: #16325a; color: white; padding: 20px 0;}
#footer-content{ width: 960px; margin: 0 auto; display: flex; justify-content: space-between;}
footer h3{color: #fff; font-size: 16px; text-transform: uppercase;}
footer p{font-size: 16px; color: #fff; opacity: 70%; line-height: 1.5; font-family: lato;}
#footer-right{text-align: right;}