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

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


/* font families and colors from style guide*/
/* font-family: 'Goudy Bookletter 1911', serif;
font-family: 'Lato', sans-serif;

blue - #16325a
purple - #a32973
white - #ffffff
grey - #f4f3f0
black - #000000
*/



nav {
    position: relative;
    top: 125px;
    left: 500px;
    font-family: 'Goudy Bookletter 1911', serif;
    text-transform: capitalize;
    font-size: 20px;
}

nav ul {
    display: inline-flex;
    position: relative;
    top: -170px;
}

nav a {
    padding: 10px 15px;
    text-decoration: none;
    margin: 20px;
}

nav a:hover {
    background-color: #16325a;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    margin: 20px;
}

#header-content {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

#header-content img {
    width: 238px;
    height: 146px;
}

#banner {
    background-color: #ffffff;
    background-image: url(images/home-banner.jpg);
    height: 441px;
    background-repeat: round;
}

#color-bar {
    background-color: #a32973;
    color: #ffffff;
    text-align: center;
    padding: 15px 0;
}

#color-bar h3 {
    font-size: 24px;
}

#wrapper-white {
    background-color: #ffffff;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
}

section {
    width: 580px;
    float: left;
}

section h1 {
    font-size: 36px;
    color: #a32973;
    padding-top: 40px;
    padding-bottom: 10px;
}

section p {
    font-size: 16px;
    padding-bottom: 15px;
}

aside {
    width: 300px;
    text-align: center;
    float: right;
}  

/* Clear floats after the columns */
.aside:after, .section:after {
  content: "";
  display: table;
  clear: both;
}

aside h2 {
    color: #a32973;
    font-size: 24px;
    padding: 10px 0 15px 0;
}

aside img {
    padding-bottom: 25px;
    height: 175px;
}

.book-details {
    margin: 40px 0 10px 0;
    border: 3px solid #16325a;
}

.uppercase {
    text-transform: uppercase;
}

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

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

.shop-box {
    float: left;
    width: 300px;
    text-align: center;
    margin: 10px;
}

.shop-box img {
    width: 300px;
    height: 149px;
}

.shop-box h3 {
    color: #a32973;
    font-size: 28px;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 10px;
}

.shop-box p {
    font-size: 14px;
    margin-bottom: 25px;
}

.shop-box a {
    color: #ffffff;
    background-color: #a32973;
    font-size: 14px;
    padding: 10px 15px;
    margin-bottom: 25px;
    text-decoration: none;
}

footer {
    background-color: #16325a;
    color: #ffffff;
}
#footer-content {
    width: 960px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

#footer-left {
    float: left;
    padding: 15px 395px 20px 0;
}

#footer-left h3, #footer-right h3 {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 16px;
    text-transform: capitalize uppercase;
    margin-top: 10px;
}

#footer-left p, #footer-right p {
    margin-bottom: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    opacity: 70%;
}

#footer-right {
    float: right;
    text-align: right;
    padding-top: 15px;

}

html {
    overflow-x: hidden;
}