#book {
    position: relative;
    background-color: #ffcc00;
    color: #1a1a1a;
    height: 48vw;
}

@media only screen and (min-height: 50vw) {
    #book {
        height: 72vw;
    }
}

@media only screen and (min-height: 100vw) {
    #book {
        height: 120vw;
    }
}

#vanFront {
    position: absolute;
    bottom: 0;
    animation-name: approach;
    animation-delay: 0s;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

@keyframes approach {
    from {
        left: 7.218561vw;
        width: 24.06187vw;
        height: 29.316095vw;
    }
    to {
        left: 0;
        width: 38.498992vw;
        height: 46.905752vw;
    }
}

@media only screen and (min-height: 50vw) {
    @keyframes approach {
        from {
            left: 16.843309vw;
            width: 24.06187vw;
            height: 29.316095vw;
        }
        to {
            left: 0;
            width: 57.748488vw;
            height: 70.358628vw;
        }
    }
}

@media only screen and (min-height: 100vw) {
    @keyframes approach {
        from {
            left: 37.969065vw;
            width: 24.06187vw;
            height: 29.316095vw;
        }
        to {
            left: 1.87626vw;
            width: 96.24748vw;
            height: 117.26438vw;
        }
    }
}

#collection {
    float: right;
    width: 50vw;
    height: 48vw;
}

@media only screen and (min-height: 50vw) {
    #collection {
        width: 35vw;
        height: 72vw;
    }
}

@media only screen and (min-height: 100vw) {
    #collection {
        width: 100vw;
        height: 120vw;
    }
}

#collection h1 {
    text-align: left;
    padding-top: 12.215vw;
}

@media only screen and (min-height: 50vw) {
    #collection h1 {
        text-align: right;
        padding-right: 4vw;
    }
}

@media only screen and (max-width: 576px) {
    #collection h1 {
        padding-top: 14.43vw;
    }
}

#collection p {
    margin: 0 4vw 1vw 0;
}