@font-face {
    font-family: 'A Little Pot';
    src: url('static/ttf/alittlepot.ttf');
}
@font-face {
    font-family: 'Multi Light';
    src: url('static/ttf/multi_light.ttf');
}
body {
    background-color: rgb(245, 245, 245);
}
.box {
    position: relative;
    display: none;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    height: 800px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.box div {
    display: inline-block;
    position: fixed;
    width: inherit;
    height: inherit;
    background-repeat: no-repeat;
}
#voor, #achter {
    background-color: rgb(110, 126, 113);
}
#links, #rechts {
    background-color: rgb(255, 255, 255);
}
#voor {
    display: block;
}
#voor #wolk,
#achter #wolk {
    background-image: url('static/img/wolk.png');
    background-size: 1675px 878px;
    background-position: -504px -0px;
    transform: scaleY(-1);
}
#voor #olifant {
    background-image: url('static/img/olifant.png');
    background-size: 329px 416px;
    background-position: 400px 240px;
    transform: scaleX(-1) rotate(-4deg);
}
#voor #aap {
    background-image: url('static/img/aap.png');
    background-size: 106px 161px;
    background-position: 560px 160px;
    transform: scaleX(-1);
}
#voor #luipaard {
    background-image: url('static/img/luipaard.png');
    background-size: 521px 291px;
    background-position: 340px 18px;
    opacity: 0.7;
}
#voor #takken_onder {
        clip: rect(auto, auto, auto, auto);
}
#voor #takken_onder div {
        margin-top: 60px;
        margin-left: 140px;
        transform: rotate(157deg);
}
#voor #takken_onder div img {
        width: 952px;
        height: 584px;
}

#voor #tak_onder {
        clip: rect(auto, auto, auto, auto);
}
#voor #tak_onder div {
        margin-top: 490px;
        margin-left: -645px;
        transform: rotate(-1deg) scaleX(-1);
}
#voor #tak_onder div img {
        width: 178px;
        height: 376px;
}

#voor #takken_linksboven,
#achter #takken_linksboven {
        clip: rect(auto, auto, auto, auto);
}
#voor #takken_linksboven div,
#achter #takken_linksboven div {
        margin-top: -100px;
        margin-left: -50px;
        transform: rotate(-22deg);
}
#voor #takken_linksboven div img,
#achter #takken_linksboven div img {
        width: 581px;
        height: 357px;
}

#voor #takken_rechtsboven,
#achter #takken_rechtsboven {
        clip: rect(auto, auto, auto, auto);
}
#voor #takken_rechtsboven div,
#achter #takken_rechtsboven div {
        margin-top: -50px;
        margin-left: 200px;
        transform: rotate(19deg);
}
#voor #takken_rechtsboven div img,
#achter #takken_rechtsboven div img {
        width: 544px;
        height: 334px;
}
#voor #tak_middenboven,
#achter #tak_middenboven {
        clip: rect(auto, auto, auto, auto);
}
#voor #tak_middenboven div,
#achter #tak_middenboven div {
        margin-top: -190px;
        margin-left: -370px;
        transform: rotate(132deg);
}
#voor #tak_middenboven div img,
#achter #tak_middenboven div img {
        width: 178px;
        height: 376px;
}
#voor #tak_rechtsboven,
#achter #tak_rechtsboven {
        clip: rect(auto, auto, auto, auto);
}
#voor #tak_rechtsboven div,
#achter #tak_rechtsboven div {
        margin-top: -670px;
        margin-left: 180px;
        transform: rotate(-154deg);
}
#voor #tak_rechtsboven div img,
#achter #tak_rechtsboven div img {
        width: 178px;
        height: 376px;
}
#voor #naam {
        font-family: A Little Pot;
        font-size: 72pt;
        color: rgb(58, 80, 86);
        margin-top: 320px;
        margin-left: 380px;
}
#voor #datum {
        font-family: Multi Light;
        font-size: 14pt;
        font-weight: bold;
        color: rgb(58, 80, 86);
        margin-top: 430px;
        margin-left: 525px;
}

#links #luipaard {
    background-image: url('static/img/luipaard.png');
    background-size: 521px 291px;
    background-position: 340px 90px;
    opacity: 0.8;
    transform: scaleX(-1);
}
#links #tak {
        clip: rect(auto, auto, auto, auto);
}
#links #tak div {
        margin-top: -490px;
        margin-left: -145px;
        transform: rotate(-36deg) scaleY(-1);
}
#links #tak div img {
        width: 178px;
        height: 376px;
}
#links #tekst {
        font-family: A Little Pot;
        font-size: 24pt;
        text-align: center;
        color: rgb(101, 121, 120);
        margin-top: 360px;
        margin-left: 250px;
        width: 300px;
}
#links #adres {
        font-family: Multi Light;
        font-size: 16pt;
        color: rgb(108, 96, 80);
        text-align: center;
        width: 600px;
        margin-top: 630px;
        margin-left: 100px;
}
#rechts #tak {
        clip: rect(auto, auto, auto, auto);
}
#rechts #tak div {
        margin-top: -440px;
        margin-left: 545px;
        transform: rotate(-78deg);
}
#rechts #tak div img {
        width: 178px;
        height: 376px;
}
#rechts #aap {
    background-image: url('static/img/aap.png');
    background-size: 106px 161px;
    background-position: 630px 90px;
}
#rechts #tekst {
        font-family: Multi Light;
        font-size: 16pt;
        color: rgb(108, 96, 80);
        text-align: center;
        width: 400px;
        margin-top: 70px;
        margin-left: 200px;
}
#rechts #voornaam {
        font-family: A Little Pot;
        font-size: 64pt;
        color: rgb(149, 166, 131);
        margin-top: 200px;
        margin-left: 200px;
}
#rechts #naam {
        font-family: A Little Pot;
        font-size: 36pt;
        color: rgb(101, 121, 120);
        line-height: 1.3;
        margin-top: 320px;
        margin-left: 360px;
}
#rechts #naam span {
        display: inline-block;
        margin-left: 65px;
}
#rechts #datum {
        font-family: Multi Light;
        font-size: 14pt;
        color: rgb(108, 96, 80);
        text-align: center;
        width: 400px;
        margin-top: 460px;
        margin-left: 200px;
}
#rechts #info {
        font-family: A Little Pot;
        font-size: 17pt;
        color: rgb(108, 96, 80);
        text-align: center;
        width: 390px;
        height: 130px;
        margin-top: 530px;
        margin-left: 205px;
        display: flex;
}
#rechts #info div {
        flex: 0 0 130px;
        position: static;
        height: 130px;
        text-align: center;
        background-size: 50px auto;
        background-position: center;
}
#rechts #info div span {
        position: relative;
        display: inline-block;
        top: 110px;
}
#rechts #info #tijd {
    background-image: url('static/img/tijd.png');
}
#rechts #info #gewicht {
    background-image: url('static/img/gewicht.png');
}
#rechts #info #lengte {
    background-image: url('static/img/lengte.png');
}

#achter #aap {
    background-image: url('static/img/aap.png');
    background-size: 106px 161px;
    background-position: 410px 280px;
    transform: scaleX(-1);
}

#achter #naam {
        font-family: A Little Pot;
        font-size: 72pt;
        color: rgb(58, 80, 86);
        width: 600px;
        text-align: center;
        margin-top: 400px;
        margin-left: 100px;
}

#terug {
    margin-left: -490px;
}
#verder {
    margin-left: 420px;
}
#verder,
#terug {
    position: fixed;
    top: 400px;
    left: 50%;
    font-size: 32pt;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 25px 10px;
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
    color: rgb(58, 80, 86);
    cursor: pointer;
}
#verder.uit,
#terug.uit {
    color: rgb(183, 200, 185);
    cursor: not-allowed;
}