* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
}

@font-face {
    font-family: Whimsy ICG Bold;
    src: url("fonts/Whimsy ICG Bold.ttf");
}

@font-face {
    font-family: Coelacanth;
    src: url("fonts/Coelacanth.otf");
}

html {
    font-size: 10px;
}

.header {
    background: url(img/background@3x.jpg) no-repeat center;
    background-size: cover;
    height: 100vh;
    position: relative;
}

img.wheel {
    position: absolute;
    top: 11%;
    left: 32.5%;
    width: 35%;
    background-color: transparent;
}

img.wizard {
    position: absolute;
    top: 65%;
    left: 20%;
    width: 22%;
    transform: translate(-50%, -50%);
    background-color: transparent;
}

img.cross {
    position: absolute;
    top: 23%;
    left: 7%;
    width: 8%;
    transform: translate(-50%, -50%);
    background-color: transparent;
}

img.arrow {
    position: absolute;
    top: 26%;
    right: 5%;
    width: 8%;
    transform: translate(-50%, -50%);
    background-color: transparent;
}

img.spinner {
    position: absolute;
    top: 68%;
    right: 5%;
    width: 8%;
    transform: translate(-50%, -50%);
    background-color: transparent;
}

.spin-text {
    position: absolute;
    top: 78%;
    right: 5%;
    width: 8%;
    font-weight: 600;
    color: #c7a800;
    font-size: 24px;
    letter-spacing: 1px;
    transform: translate(-10px, -50%);
    background-color: transparent;
}

.text {
    text-align: center;
    position: absolute;
    top: 90%;
    left: 50%;
    font-size: 4.5rem;
    width: 42%;
    box-sizing: border-box;
    border-radius: 10rem;
    background-color: black;
    color: #e10084;
    transform: translate(-50%, -50%);
}

.text-new {
    font-family: "Whimsy ICG Bold", sans-serif;
}

.text-next {
    font-family: Coelacanth;
}

.flipped {
    transition: 3s;
    transform-style: preserve-3d;
}

@media (max-width: 102.4em) {
    .text {
        position: absolute;
        width: 60%;
        font-size: 3.7rem;
        top: 90%;
        left: 50%;
    }
    img.wheel {
        width: 32%;
    }
}

@media (max-width: 83em) {
    .text {
        position: absolute;
        width: 60%;
        font-size: 2.8rem;
        top: 90%;
        left: 50%;
    }
}

@media (max-width: 66.7em) {
    .text {
        position: absolute;
        width: 62%;
        font-size: 2.4rem;
        top: 90%;
        left: 50%;
    }
    img.wheel {
        width: 30%;
        left: 35%;
    }
    .spin-text {
        top: 83%;
        left: 86%;
    }
}

@media only screen and (orientation: portrait) {
    .header {
        background: url(img/background_copy.jpg) no-repeat;
        background-size: cover;
    }
    img.wheel {
        position: absolute;
        right: 11%;
        top: 40%;
        width: 50%;
    }
    img.wizard {
        position: fixed;
        top: 9%;
        left: 12%;
        width: 40%;
        transform: translate(-50%, -50%);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    img.cross {
        position: absolute;
        top: 7%;
        left: 67%;
        width: 17%;
        transform: translate(-50%, -50%);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    img.arrow {
        position: absolute;
        top: 83%;
        right: 15%;
        width: 17%;
        transform: translate(-50%, -50%);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    img.spinner {
        position: absolute;
        top: 85%;
        left: 20%;
        width: 15%;
        transform: translate(-50%, -50%);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .text {
        position: absolute;
        /* top: 55%; */
        top: 50%;
        left: -10rem;
        font-size: 2.1rem;
        width: 90%;
        box-sizing: border-box;
        border-radius: 1rem;
        background-color: black;
        color: #e10084;
        transform: rotate(90deg);
    }
    .spin-text {
        top: 86%;
        left: 10%;
        transform: rotate(90deg);
    }
}