.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background-color:lightblue;
}

header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    float: left;
    padding: 0px 0;
    color: black;
    font-family: 'Dancing Script', cursive;
    font-size: 30px;
}

.container nav {
    float: right;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}

.container nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 25px;
    
    position: relative;
}

.container nav a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
}

.container nav a:hover {
    color: palevioletred;
    
}

.container nav a::before {
    content: '';
    display: block;
    height: 5px;
    width: 0%;
    background-color: palevioletred;
    
    position: absolute;
    top: 0;
    
    transition: all ease-in-out 250ms;
}

.container nav a:hover::before {
    width: 100%;
}

h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 45px;
}

h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 35px;
}

h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 25px;
}

blockquote {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-family: 'Montserrat', sans-serif;
}

button {
    font-family: 'Montserrat', sans-serif;
}


.pagewrapper .book {
    background-color: lightblue;
    padding-top: 35px;
    padding-bottom: 35px;
}

.pagewrapper .book img {
    float: left;
    margin-left: 70px;
}

.pagewrapper .book p {
    font-size: 18px;
    margin-bottom: 25px;
    margin-top: 25px;
    line-height: 38px;
    font-family: 'Montserrat', sans-serif;
}

.pagewrapper .book button {
   cursor: pointer;
    background-color: white;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border: none;
    margin-left: 25px; 
}

.pagewrapper .book button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.pagewrapper button {
    cursor: pointer;
    background-color: lightblue;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border: none;
    margin-left: 25px;
}

.pagewrapper button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.pagewrapper .about {
    padding-bottom: 30px;
    margin-left: 60px;
}


.pagewrapper .about img {
    float: right;
    margin-right: 60px;
    margin-left: 50px;
    margin-bottom: 20px;
    margin-top: 35px;
    
}


.pagewrapper .about p {
    font-size: 18px;
     margin-bottom: 25px;
    margin-top: 25px;
    line-height: 38px;
    margin-right: 50px;
}

.pagewrapper .portfolio {
    margin-top: 40px;
    margin-bottom: 60px;
    margin-left: 60px;
}

.pagewrapper .portfolio img {
    float:right;
    margin-right: 100px;
    margin-left:60px;
}

.pagewrapper .portfolio p {
    font-size: 18px;
     margin-bottom: 25px;
    margin-top: 25px;
    line-height: 38px;
}

.pagewrapper .reviews {
    background-color: lightblue;
    padding-left: 25px;
    padding-bottom: 30px;
    padding-right: 60px;
    padding-top: 10px;
}

.pagewrapper .reviews img {
    float: left;
    margin-left: 100px;
    margin-right: 60px;
    margin-top:40px;
    margin-bottom: 20px;
}

.pagewrapper .reviews p {
    font-size: 18px;
     margin-bottom: 25px;
    margin-top: 25px;
    line-height: 38px;
}

.pagewrapper .reviews button {
    cursor: pointer;
    background-color: white;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border: none;
}

.pagewrapper .reviews button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.pagewrapper .reviews blockquote {
    font-size: 14px;
     margin-bottom: 25px;
    margin-top: 25px;
    line-height: 38px;
    text-transform: uppercase;
}

.footer {
    height: 200px;
    position: relative;
    
}

.footer .panel {
    margin-top: 70px;
    margin-bottom:30px;
}

.footer .panel .social a {
    border: 1px solid gray;
    color: gray;
    width: 55px;
    height: 51px;
    padding-top:5px;
    margin-right: 15px;
    display: inline-block;
    font-size: 45px;
    border-radius: 5px;
    transition: all .3s;
}


.footer .panel .social a:hover{
    color: palevioletred;
    transition: all .3s;
}

.footer .panel a button {
    cursor: pointer;
    background-color: white;
    border: none;
    color:gray;
    width: 300px;
    height: 30px;
    padding-top:5px;
    margin-right: 15px;
    display: inline-block;
    font-size: 15px;
    border-radius: 5px;
    transition: all .3s;
}

.footer .panel a button:hover{
    color: palevioletred;
    transition: all .3s;
}

.footer .footer-bottom {
    background-color: lightblue;
    color: gray;
    text-align: center;
    height: 30px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;
    width: 100%;
    
    
}

.books-header img {
    margin-top:20px;
}

.books-header blockquote {
    font-size: 13px;
    float:right;
    text-transform: uppercase;
    color: gray;
}

.books-header blockquote a {
    text-decoration: none;
    color: gray;
}

.books-header blockquote a:hover {
    color:lightblue;
}

.crown-my-heart {
    padding-top:50px;
    padding-bottom:100px;
    margin-left:75px;
}

.crown-my-heart p{
     font-size: 17px;
    margin-bottom: 25px;
    margin-top: 25px;
    margin-right: 400px;
    line-height: 30px;
    text-align: center;
}

.crown-my-heart h1 {
    margin-bottom: 25px;
    margin-top: 20px;
    margin-right: 400px;
    line-height: 30px;
    text-align: center;
}

.crown-my-heart h3 {
    margin-bottom: 25px;
    margin-top: 25px;
    margin-right: 400px;
    line-height: 30px;
    text-align: center;
}

.crown-my-heart img{
    float: right;
    width: 250px;
    margin-right: 100px;
}

.crown-my-heart button {
    cursor: pointer;
    background-color: lightgray;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border: none;
    margin-left: 25px;
}

.crown-my-heart button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.dragon-pearls {
    background-color: lightgray;
    padding-top:20px;
    padding-bottom:100px;
}

.dragon-pearls p{
     font-size: 17px;
    margin-bottom: 25px;
    margin-top: 25px;
    margin-left: 400px;
    line-height: 30px;
    text-align: center;
    margin-right:75px;
}

.dragon-pearls h1 {
    margin-bottom: 25px;
    margin-top: 25px;
    margin-left: 400px;
    line-height: 30px;
    text-align: center;
    margin-right:75px;
}

.dragon-pearls h3 {
    margin-bottom: 25px;
    margin-top: 25px;
    margin-left: 400px;
    line-height: 30px;
    text-align: center;
    margin-right:75px;
}


.dragon-pearls img {
    float: left;
    width: 250px;
    margin-left: 100px;
}

.dragon-pearls button {
    cursor: pointer;
    background-color: white;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border: none;
    margin-left: 25px;
}

.dragon-pearls button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.portfolio .one img{
    margin-top: 20px;
}

.portfolio blockquote {
    font-size: 13px;
    float:right;
    text-transform: uppercase;
    color: gray;
}

.portfolio blockquote a {
    color: gray;
    text-decoration: none;
}

.portfolio blockquote a:hover {
    color:lightblue;
}

.portfolio nav {
    padding: 30px;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}

.portfolio nav ul {
    list-style: none;
    text-align: center;
}

.portfolio nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 25px;
    position: relative;
}

.portfolio nav a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
}

.portfolio nav a:hover {
    color: palevioletred;

}

.portfolio nav a::before {
    content: '';
    display: block;
    height: 5px;
    width: 0%;
    background-color: lightblue;
    
    position: absolute;
    top: 0;
    
    transition: all ease-in-out 250ms;
}

.portfolio nav a:hover::before {
    width: 100%;
}

.portfolio .two {
    margin-bottom: 25px;
}

.portfolio .two img{
    float:right;
    margin: 25px;
}

.portfolio .two h1 {
    margin-left:25px;
    padding-top:40px;
}

.portfolio .two p {
    font-size: 17px;
    margin-bottom: 25px;
    margin-top: 25px;
    margin-left: 25px;
    line-height: 30px;
    margin-right:400px;
}

.portfolio .two button {
    cursor: pointer;
    background-color: lightblue;
    width: 200px;
    height: 40px;
    font-size: 16px;
    border: none;
}

.portfolio .two button:hover {
    background-color: palevioletred;
    transition: 1s;
}



.portfolio .three {
    background-color: lightblue;
}

.portfolio .three::after {
    content:"";
    display: table;
    clear:both;
}

.portfolio .three img{
    float:left;
    margin: 25px;
}

.portfolio .three h1 {
    margin-right:25px;
    padding-top:40px;
    text-align: center;
}

.portfolio .three p {
    font-size: 17px;
    margin-bottom: 25px;
    margin-top: 25px;
    line-height: 30px;
    margin-right:25px;
}

.portfolio .three button {
    cursor: pointer;
    background-color: white;
    width: 200px;
    height: 40px;
    font-size: 16px;
    border: none;
    margin-bottom: 25px;
}

.portfolio .three button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.reviews .header img {
    margin-top: 20px;
}

.reviews table {
    margin:40px;
}

.reviews table tr {
    height: 150px;
}

.reviews table td {
    line-height: 30px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}

.reviews hr {
    border: none;
    height: 1px;
    background-color: gray;
}

.reviews table button {
    cursor: pointer;
    background-color: lightgray;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border: none;
    margin-top: 25px;
}

.reviews table button:hover {
    background-color: palevioletred;
    transition: 1s;
}

.portfolio .title {
    color: palevioletred;
    padding-bottom: 0px;
}

.portfolio .post h1 {
    color: palevioletred;
}

.portfolio .post img{
    margin-top:20px;
    margin-bottom: 50px;
}

.portfolio .post p {
    font-size: 17px;
    line-height: 35px;
    margin-left:200px;
    margin-right: 200px;
}

.portfolio .post hr {
    border: 20px solid white;
}

.portfolio .post blockquote {
    text-transform: none;
    font-size: 15px;
    color: palevioletred;
    float: none;
    line-height: 20px;
    margin-right: 200px;
    margin-left: 200px;
    text-align: center;
}

@media only screen and (min-width:768px) {
   

}