@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');



header {width: 960px;
margin: 0 auto;
position: relative;}

nav {position:absolute;
bottom:20px;
right: 300px;
}

nav li {display:inline-block;}

nav a {padding:5px 20px; color: #16325a;
text-decoration:none; font-family: 'Goudy Bookletter 1911', serif;
}

nav a:hover {background-color: #16325a;
color: #fff;}

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

#color-bar {background-color: #a32973; color:#fff; 
text-align: center; padding:10px 0; font-family: 'Goudy Bookletter 1911', serif;}

#wrapper-white {width:960px;margin: 30px auto;
display: flex;}

section {width:580px;
padding: 0 10px;}

section h1 {font-size: 36px;
text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif;}

section p {font-size: 16px; line-height: 1.5; margin-top:15px;}

aside {width: 300px; border: 3px solid #16325a; padding:10px 10px;
font-family: 'Lato', sans-serif; position: relative;}

aside h2 {text-align: center; margin:10px 0;
color: #a32973;
font-size: 20px;font-family: 'Goudy Bookletter 1911', serif;}

.uppercase {text-transform: uppercase;}

aside img {display: block; margin: 0 auto;
padding: 10px;}

#wrapper-shop {width: 100%; background-color:#f4f3f0;padding: 50px 0;}

#shop-content { width:960px; margin:0 auto;
display: flex;}

.shop-box { width: 300px; display: block; margin: 0 auto;}

#shop-content h3 {color: #a32973;
text-transform: uppercase;padding: 10px;
font-size: 20px;
font-family: 'Goudy Bookletter 1911', serif;}

#shop-content p {line-height: 1.5;
font-size: 14px;margin: 10px 0 20px 0;
font-family: 'Lato', sans-serif;}

.shop-box a {text-decoration: none; text-align: center; background-color: #a32973;
color: #fff; font-size: 14px; padding:5px; margin-top:20px;}

#footer-content {width: 960px; margin: 0 auto;
display: flex;}

footer{ background-color:#16325a;
color:#fff; padding:20px 0;}

#footer-left {width: 40%; }

#footer-right{width: 40%; 
margin-left: 300px;text-align: left;}

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

#footer-content p {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:#fff;
        margin-bottom: 40px;
        opacity: 1;
    }

    .mask:hover .learn{
        background-color:#16325a;
        color:#fff;
        font-family: 'lato', sans-serif;
        font-size: 20px;
        opacity: 1;
        text-transform: uppercase;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-right: 34px;
        padding-left:34px;
        text-align: center;
        text-decoration:none;
    }