@keyframes title {
    0% {
        transform: rotate3d(1, 1, 1, 90deg) scale(0);
        opacity: 1;
    }
    100% {
        transform: rotate3d(0, 0, 0, 0) scale(1);
        opacity: 1;
    }
}


@keyframes fade-in {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


* {
    image-rendering: auto;
}

body {
    height: 200vh;
    background-color: white;
    background-size: 40%;
}

body h1,h2,h3,h4,h5,h6,p,b,i,a {
    color: black;
}

div.center-column {
    width: 100%;
}

div.content-full {
    margin: 0;
}

div.header {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sprite {
    display: block;
    background-image: url("/images/sketchbook.png");
    background-repeat: no-repeat;
    animation: fade-in 1s 300ms forwards;
    opacity: 0;
}

.road-logo {
    width: 200px;
    height: 40px;
    background-size: cover;
    background-position: 0 35%;
}

.sketchbook-logo {
    width: 890px;
    height: 279px;
    background-position: 0 0;
    animation: title 700ms ease-out forwards;
}

.homepage {
    width: 177px;
    height: 45px;
    background-position: -13px -497px;
}

.journal {
    width: 190px;
    height: 78px;
    background-position: -209px -485px;
}

.guestbook {
    width: 173px;
    height: 52px;
    background-position: -434px -493px;
}

.photography {
    width: 173px;
    height: 51px;
    background-position: -632px -481px;
}

div.nav {
    width: 60%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}


div.nav {
    transform: scale(0.5);
}


div.nav a:hover {
    transform: scale(1.1);
}


div.sketches {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}


div.sketches > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex-grow: 0;
    max-width: 30%;
}

div.sketches img {
    display: block;
}


div#message-writer {
    display: none;
    width: 260px;
    top: 100px;
    left: 16px;
}

button {
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: 0 5px 0 transparent;
    backdrop-filter: blur(16px);
    color: black;
}
button svg {color: black;}

button:hover {
    border: 1px solid black;
    box-shadow: 0 5px 0 black;
    color: black;
}

button:active {
    box-shadow: 0 0px 0 black;
    background-color: black;
    color: white;
}
button:active svg{color: white;}

button#activate-message-writer {
    margin: 16px;
}

/* ================================================================ */


div#flipbook {
    position: relative;
    z-index: 10;
    transform: rotateZ(30deg);
}

div#flipbook div.turn-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: 100% 100%;
    background-image: url("/images/sketchbook-paper.png");
}

div#flipbook div.turn-page.hard.front {
    background-image: url("/images/sketchbook-front.png");
}
div#flipbook div.turn-page.hard {
    background-image: url("/images/sketchbook-cover.png");
}

div#flipbook img {
    max-width: 80%;
    max-height: 80%;
    transition: transform 250ms;
}

div#flipbook img:hover {
    transform: scale(1.1);
}