@font-face {
    font-family: "HelvaticaSign";
    src: url("fonts/HelveticaBoldCondensed.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: black;
    overflow: hidden;
}

.wrapper {
    overflow: hidden;
}

.lines {
    width: 100%;
    height: 100%;
    position: absolute;
}

.line {
    background-image: url(img/police-line_4.png);
    background-repeat: repeat-x;
    background-size: contain;
    height: 26px;
    margin: auto;
    display: block;
    position: absolute;
    animation: scroll-right 12s linear infinite;
    animation-fill-mode: forwards;
}

.danger {
    background-image: url(img/police-line_3.png);
}

.forklift {
    position: relative;
    width: 500px;
    height: 700px;
    background-image: url(img/forklift.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation: forklift-anim 16s linear infinite;
}

.crane {
    position: relative;
    width: 1100px;
    height: 2000px;
    background-image: url(img/crane.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.background_img_container {
    position: absolute;
    z-index: -1;
}

.context_container {
    position: absolute;
    z-index: 10;
}

.red_sign {
    position: relative;
    width: 280px;
    height: 700px;
    background-image: url(img/red_sign.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.red_sign p {
    margin: 0;
    padding: 100px 30px 0 16px;
    color: #000;
    transform: rotateY(9deg) rotateX(348deg) rotateZ(358deg);
    font-family: HelvaticaSign, Helvatica;
    font-size: x-large;
    text-align: center;
}

.backbutton {
    z-index: 11;
    width: 200px;
    transform: rotateZ(177deg) rotateX(18deg);
    left: 30px;
    position: relative;
    transition: transform .1s;
}

    .backbutton:hover {
        transform: rotateZ(184deg) rotateX(18deg) translateX(-5px) translateY(-2px) scale(1.1,1.1);
    }

@keyframes scroll-right {
    0% {
        transform: translateX(50);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes forklift-anim {
    0% {
        transform: translateX(-120%);
    }

    49% {
        transform: translateX(300%);
    }

    50% {
        transform: translateX(300%) rotateY(180deg);
    }

    100% {

        transform: rotateY(180deg) translateX(120%);
    }
}