@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');
/*font-family: 'Goudy Bookletter 1911', serif;
font-family: 'Lato', sans-serif;*/
header{width:100%;}
#header-content{width:960px;margin:0 auto;position:relative;}
nav{position:absolute;bottom:20px;right:120px;font-family: 'Goudy Bookletter 1911', serif;}
nav li {display: inline-block; padding:10px 20px}
nav a{text-decoration:none;}
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 0;font-family: 'Goudy Bookletter 1911', serif;}
#wrapper-white {;width:960px;display:flex;margin:20px auto;}
section{width:580px}
section h1{font-size:36px;color:#a32973;text-transform: uppercase;padding:10px 0;font-family: 'Goudy Bookletter 1911', serif;}
section p{font-size:16px;line-height:1.5;margin-top:10px;padding-right:10px;font-family: 'Lato', sans-serif;}
aside{
     width: 300px;
     height: 300px;
     float: right;
     position: relative;
     border: 3px solid #16325a;
     padding: 20px 14px 14px;
	text-align: center;}
aside h2{color:#a32973;font-size:25px;padding:10px 0;font-family: 'Goudy Bookletter 1911', serif;}
.uppercase{text-transform:uppercase;}
#wrapper-shop{background-color:#f4f3f0;width:100%; margin-bottom:20px;padding:20px;}
#shop-content{width:960px;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;padding:5px 0;font-family: 'Goudy Bookletter 1911', serif;}
#shop-content p{font-size:14px; margin-bottom:10px;line-height:1.5;font-family: 'Lato', sans-serif;}
#shop-content a{text-decoration: none;color:white;background-color:#a32973; padding:5px;}
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-right{text-align:right}
footer h3{color:white;font-size:16px;text-transform:uppercase;font-family: 'Goudy Bookletter 1911', serif;}
footer p{color:white;font-size:16px;opacity:70%;line-height:1.5;font-family: 'Lato', sans-serif;}


/*---------Transition Effects--------*/
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:white;margin-bottom:40px;opacity:1;}
.mask:hover .learn{background-color:#16325a;font-color:white;font-family: 'Lato', sans-serif;text-transform:uppercase;text-align:center;text-decoration:none;padding:16px 34px;}