@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');
/* .lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
  } */
 /* .goudy-bookletter 1911-regular {
    font-family: "Goudy Bookletter 1911", serif;
    font-weight: 400;
    font-style: normal;
  } */  
header{width: 100%; }

#header-content{max-width: 960px; margin:0 auto;position:relative; }

nav{position:absolute; bottom: 20px; right:120px;background-color: white; display: flex; 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) ; width:100%;height:440px;}

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

#wrapper-white{margin:20px auto; text-align: center; width:960px; display: flex;}

section{width: 580px;text-align: center; margin:10px}

section h1{font-size: 36px; color: #a32973; padding:10px 0; text-transform: uppercase; text-align: left; font-family: "Goudy Bookletter 1911", serif;} 

section p{font-size:16px; line-height: 1.5; margin-top: 10px; text-align: left;padding:10px;font-family: "Lato", sans-serif;}

aside { width: 300px;border: 3px solid #16325a; text-align: center; margin: 20px;position: relative;}

aside h2{color: #a32973;font-size: 25px;padding:10px 0; margin-bottom: 10px;font-family: "Goudy Bookletter 1911", serif; }

.uppercase{text-transform: uppercase;}

#wrapper-shop{background-color: #f4f3f0;  margin-bottom:20px; padding:30px; ;}

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

.shop-box{width: 300px; margin-left:10px;}

#shop-content h3{color: #a32973; font-size: 28px; text-transform: uppercase;padding:5px 0;font-family: "Goudy Bookletter 1911", serif;}

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

#shop-content a{color:white; background-color: #a32973; text-decoration:none; padding:5px; }

#shop-content img{opacity: .70;}
#shop-content img:hover {opacity:100%; transition: opacity 2s;}

footer{background-color: #16325a; text-align: center;color:white; padding: 20px 0; width: 100%;}

#footer-content{ text-align: center;align-content: center;margin: 0px auto; width: 960px; display:flex; justify-content: space-between;}

#footer-left{ text-align: left;  }

#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;color: white;font-family: Lato; font-size: 20 px; opacity: 1;
text-transform: uppercase;text-align: center;text-decoration: none;padding:16px 34px;}