@font-face {
    font-family: 'Roboto', sans-serif;
}

html, body {
    overflow: hidden;
}

body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    font-family: Unibet;
    text-align: left;
    user-select: none;
}

main {
    position: relative;
}

    main img {
        width: 100%;
        height: auto;
        object-fit: cover
    }

.onex2, .scorer, .boosted, .fb {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.type_1x2 .onex2,
.type_scorer .scorer,
.type_boosted .boosted,
.type_fb .fb {
    display: block;
}

.onex2 .odds {
    position: absolute;
    font-size: 8.6vw;
    top: 60.1%;
    left: 11.9%;
    width: 76.3%;
    height: 16.8%;
    color: #fff;
}

.onex2 .teams {
    position: absolute;
    top: 24.8%;
    left: 11.8%;
    width: 76.3%;
    height: 34%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .onex2 .teams > img {
        width: 20.8vw;
    }


.odds .odds1,
.odds .oddsX,
.odds .odds2 {
    position: absolute;
    width: 27%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.odds .odds1 {
}

.odds .oddsX {
    left: 36.4%;
}

.odds .odds2 {
    left: 72.8%;
}

.vs {
    font-size: 5.5vw;
}

    .vs .text {
        position: absolute;
        top: 35.4%;
        left: 16.4%;
        bottom: 44.6%;
        right: 15.8%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        overflow: hidden;
    }


    .vs .value {
        position: absolute;
        top: 56.4%;
        left: 40.4%;
        bottom: 22.6%;
        right: 35.8%;
        font-size: 10vw;
        color: #fff;
        transform: rotateZ(8deg) rotateY(-20deg) rotateX(20deg);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .vs .teams {
        position: absolute;
        top: 4.7%;
        left: 8.3%;
        bottom: 68.6%;
        right: 8.2%;
        display: flex;
        font-size: 5.5vw;
        justify-content: space-between;
        align-items: center;
    }

        .vs .teams > img {
            width: 13vw;
        }

    .vs.boosted .value {
        top: 55.4%;
        left: 46.4%;
        bottom: 21.6%;
        right: 29.8%;
    }

    .vs.boosted .original-value {
        position: absolute;
        top: 58.4%;
        left: 29.4%;
        bottom: 25.6%;
        right: 51.8%;
        font-size: 7.5vw;
        color: #fff;
        transform: rotateZ(-8deg) rotateY(20deg) rotateX(20deg);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: line-through;
        text-decoration-thickness: 0.6vw;
    }

.stats .data {
    position: absolute;
    top: 36.8%;
    left: 10.6%;
    right: 10.5%;
    bottom: 14.4%;
    color: #fff;
    font-size: 5.4vw;
}

    .stats .data > div {
        display: flex;
        height: 22.6%;
        margin-bottom: 0.8vw;
        align-items: center;
    }

        .stats .data > div .col1, .stats .data > div .col3 {
            flex-basis: 19%;
            text-align: center;
        }

        .stats .data > div .col2 {
            flex-basis: 62%;
            text-align: center;
        }

.stats .teams {
    position: absolute;
    top: 11.2%;
    left: 12%;
    width: 75.8%;
    height: 22%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .stats .teams > img {
        filter: drop-shadow(1px 2px 2px #000);
    }