html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
body {
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #fff;
}

/* Start */
body > div.bag {
    display: flex;
    justify-content: center;
    height: 100vh;
    position: relative;
}
body > div.bag img.bag {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
body > div.bag img.item {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 25%;
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
body > div.bag img.item.found {
    animation: zoom-and-spin 1.5s ease-out;
    z-index: 9;
}
body > div.bag img.item.bad-found {
    animation: pinch-and-spin 1.5s ease-out;
    animation-fill-mode: forwards;
}
body > div.bag > img.item.adress {
    top: 5%;
    height: 15%;
}
body > div.bag > img.item.biljett {
    top: 50%;
    height: 20%;
}
body > div.bag > img.item.bors {
    top: 24%;
    height: 18%;
}
body > div.bag > img.item.kalsong {
    top: 52%;
    height: 18%;
}
body > div.bag > img.item.kam {
    top: 27%;
    height: 14%;
}
body > div.bag > img.item.nalle {
    top: 65%;
    height: 20%;
}
body > div.bag > img.item.skjorta {
    top: 17%;
    height: 28%;
}
body > div.bag > img.item.strumpor {
    top: 60%;
    height: 18%;
}
body > div.bag > img.item.tandborste {
    top: 20%;
    height: 12%;
}

p {
    text-align: center;
}
div.bag + p {
    margin-top: -20px;
    position: relative;
}

@keyframes zoom-and-spin {
    0% { 
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    40% { 
        -webkit-transform: scale(2) rotate(360deg);
        transform: scale(2) rotate(360deg);
    }
    60% { 
        -webkit-transform: scale(2) rotate(360deg);
        transform: scale(2) rotate(360deg);
    }
    100% { 
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}

@keyframes pinch-and-spin {
    0% { 
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    100% { 
        -webkit-transform: scale(0) rotate(360deg);
        transform: scale(0) rotate(360deg);
    }
}

/* Film */
.film {
    background-color: #000;
    display: none;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}
.film video {
    max-height: 100%;
}
.film.film-show {
    display: flex;
}