@font-face {
    font-family: "custom_1";
    src: url("font_calibri.ttf");
}

@font-face {
    font-family: "custom_2";
    src: url("font_irishspaghettice.ttf");
}

* {
    margin: 0;
    padding: 0;
    color: black;
    font-family: custom_1, sans-serif;
    font-size: 13px;
    line-height: 1.1em;
    text-align: center;
}

a {
    text-decoration: underline;
    cursor: pointer;
}

body {
    background: url("background.jpg") top left;
    background-size: cover;
}

#content {
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1050px) {
    #content {
        background-image: url("bullfinch.png"), url("stork.png");
        background-repeat: no-repeat;
        background-position: 80% 130px, 100% 90%;
    }
}

#top {
    background: url("title.png") no-repeat center 40px;
}

#top > div.name {
    font-family: custom_2, sans-serif;
    color: #005092;
    font-size: 5em;
    padding-top: 120px;
}

#top > div.contact {
    text-align: right;
    padding-top: 20px;
    padding-right: 20px;
    font-size: 1.3em;
    color: #78241e;
    float: right;
}

div#books {
    padding-top: 70px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

/*preview*/

div#preview {
    display: none;
}

div#preview > div#img-container {
    height: 350px;
}

div#preview > div#img-container > img.shadow {
    box-shadow: 5px 5px 5px grey;
}

div#preview a.arrowLeft {
    display: inline-block;
    background-image: url("arrow_left.png");
    width: 65px;
    height: 40px;
    margin-right: 10px;
}

div#preview a.arrowRight {
    display: inline-block;
    background-image: url("arrow_right.png");
    width: 65px;
    height: 40px;
    margin-left: 10px;
}

div#preview a.back {
    text-align: center;
    font-size: 2em;
}

/*books*/

div#book-1,
div#book-2,
div#book-3,
div#book-4,
div#book-5,
div#book-6 {
    display: inline-block;
    width: 350px;
    padding: 320px 10px 15px 10px;
    float: left;
}

div#books > div > p {
    padding: 0 30px 0 35px;
    text-align: justify;
}

#book-1 {
    background-image: url("cd.png"), url("book_1.png");
    background-repeat: no-repeat;
    background-position: 0 240px, top center;
}

#book-2 {
    background: url("book_2.png") no-repeat top center;
}

#book-3 {
    background: url("book_3.png") no-repeat top center;
}

#book-4 {
    background: url("book_4.png") no-repeat top center;
}

#book-5 {
    background: url("book_5.png") no-repeat top center;
}

#book-6 {
    background: url("book_6.png") no-repeat top center;
}

#bottom {
    padding-top: 20px;
}

#bottom > span {
    font-family: custom_2, sans-serif;
    display: inline-block;
    color: #005092;
    font-size: 4em;
}

#bottom > a {
    font-family: custom_1, sans-serif;
    font-size: 2.2em;
    margin-left: 10px;
    color: #005092;
}