@import url('https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&display=swap');

.genos-regular {
  font-family: "Genos", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


:root{
    --wp--preset--font-family--genos: "Genos", sans-serif !important;
}



@keyframes counter-animation {
    0% {
        opacity: 0;
        transform: translateY(250px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes incoming-title {
    0% {
        opacity: 0;
        transform: rotateX(-100deg);
        transform-origin: top;
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
        transform-origin: top;
    }
}

@keyframes bounce-in-right {
    0% {
        animation-timing-function: ease-in;
        opacity: .95;
        transform: scale(1);
    }
    20% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: scale(1.1);
    }

    80% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        animation-timing-function: ease-out;
        opacity: .95;
        transform: scale(1);
    }
}

body {
    font-family: var(--wp--preset--font-family--genos);
    color: #0e2149;
}

a:where(:not(.wp-element-button)) {
    font-weight: unset;
    font-size: unset;
    font-family: unset;
    font-style: unset;
    text-decoration: unset;
}

.hvp-add-prediction {
    position: relative;
    display: block;
    width: 100%;
    margin: 4rem 0 0 0;
    font-family: var(--wp--preset--font-family--genos);
    cursor: default;
    @media(min-width: 800px) {
        margin: 0;
    }
    form {
        display: block;
        width: 100%;
        > span {
            display: block;
            width: 100%;
        }
    }
    .predictions {
        display: block;
        margin: 4rem 0 2rem 0;
    }
    .button {
        display: flex;
        justify-content: center;
    }
    input[type=submit] {
        margin: 2rem 0 4rem;
        padding: 1rem;
        /* font-family: var(--wp--preset--font-family--genos); */
        font-size: 1.5rem;
        color: #ffffff;
        border:0;
        border: 1rem solid linear-gradient(180deg, #ca020a 0%, #ca020a 30%,#ff0009 80%, #ff0009 100%);
        border-radius: .8rem;
        background: #e00109;
        background: linear-gradient(180deg, #ff0009 0%, #e00109 30%,#e00109 80%, #ca020a 100%);
        box-shadow: 0 0 2rem #ccc;
        cursor: pointer;
    }
    .counter {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-family: var(--wp--preset--font-family--genos);
        gap: 1%;
        min-height: 1rem;
        width: 100%;
        animation: counter-animation 1s ease 0s 1 normal forwards;
        div {
            display: flex;
            width: 8.5rem;
            max-width: 24%;
            flex-direction: column;
            justify-content: center;
            padding: 1%;
            background: #e6ab00;
            background: linear-gradient(180deg, #ffbe00 0%, #e6ab00 30%,#e6ab00 80%, #dba301 100%);
            color: #ffffff;
            text-shadow: 0 0 .5rem #00000070;
            box-shadow: 0 0 1rem #ccc;
            border-radius: .8rem;
            span {
                width: 100%;
                font-size: 1rem;
                font-weight: 400;
                text-align: center;
                &:first-child {
                    font-size: 3rem;
                    font-weight: 600;
                    animation: bounce-in-right 1s ease 0s infinite normal both;
                    @media(min-width: 800px) {
                        font-size: 5rem
                    }
                }
            }
        }
        &.ending {
            div {
                background: #e00109;
                background: linear-gradient(180deg, #ff0009 0%, #e00109 30%,#e00109 80%, #ca020a 100%);
            }
        }
    }
    .next_race {
        display: block;
        margin-top: 1rem;
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        text-shadow: 0 2rem 2rem #ccc;
        color: #0e2149;
        opacity: 0;
        animation: incoming-title 2s ease .5s 1 normal forwards;
        z-index: 1;
        @media(min-width: 800px) {
            font-size: 3rem;
        }
    }
    .season {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        top: -3rem;
        left: 0;
        font-size: 4rem;
        font-weight: 600;
        line-height: .7;
        color: #86a8ef60;
        text-align: center;
        width: 100%;
        height: 10rem;
        z-index: 1;
        @media(min-width: 800px) {
            top: 0;
            font-size: 8rem;
            transform: rotate(-90deg) translate(calc(-50% + 5rem), calc(-50% + .25rem));
            width: 20rem;
            height: 10rem;
        }
    }
    .championship {
        margin-bottom: 2rem;
        text-align: center;
        font-size: 2rem;
        @media(min-width: 800px) {
            font-size: 3rem;
        }
    }

    .special_predictions {
        display: flex;
        gap: 2rem;
        margin: 6rem 0 0 0;
        background: blue;
        div {
            width: 50%;
            background: red;
        }
    }

    .subscribed_drivers {
        display: flex;
        gap: .8rem 1%;
        flex-wrap: wrap;
        h3 {
            display: flex;
            justify-content: center;
            width: 100%;
            margin: 0 0 2rem 0;
            font-size: 2rem;
            @media(min-width: 800px) {
                font-size: 3rem;
            }
        }
        > div {
            position: relative;
            display: flex;
            width: 100%;
            min-width: 10rem;
            min-height: 4rem;
            padding: .5rem;
            text-align: center;
            color:#0e2149;
            background:#eee;
            border-radius: .8rem;
            cursor: pointer;

            @media(min-width: 480px) {
                width: 46%;
            }
            @media(min-width: 600px) {
                width: calc(33% - 1.25rem);
            }
            @media(min-width: 800px) {
                width: calc(25% - 1.4rem);
            }
            @media(min-width: 1024px) {
                width: calc(18% - 0.25rem);
            }
            @media(min-width: 1200px) {
                width: calc(15% - 0.4rem);
            }
            &:hover {
                box-shadow: 0 0 .5rem #ccc;
                .driver {
                    color: #333333;
                }

                .car {
                    color: #e00109;
                    box-shadow: inset 0 0 .2rem #ccc;
                }
                .team {
                    color: #333333;
                }
            }
            &.selected {
                background:#e00109;
                cursor: default;
                .car {
                    color: #dba301;
                    cursor: default;
                }
                .driver,
                .team {
                    color: #ffffff;
                    cursor: default;
                }
            }
            .car {
                position: absolute;
                top: -15%;
                left: -4%;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2rem;
                height: 2rem;
                margin:0;
                padding:0;
                font-size: 1.5rem;
                font-weight: 700;
                color: #86a8ef;
                background: #fff;
                border-radius: 50%;

            }
            > div:not(.car) {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
            }
            .driver {
                font-weight: 500;
                font-size: 1.5rem;
                white-space: nowrap;                  
                overflow: hidden;
                text-overflow: clip;
                color:#e00109;
                cursor: pointer;
                z-index: 1;
            }
            .team {
                width: 100%;
                font-weight: 400;
                font-size: 1rem;
                text-transform: uppercase;
                color: #dba301;
                z-index: 1;
            }
        }
    }
}

.return_message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0e2149;
    color: #ffffff;
    font-size: 2rem;
}

table.motorracingleague {
    width: 100%;
    cursor: default;
    tr {
        &:nth-child(even) {
            background: #efefef;
        }
        &:hover {
            color: #eeeeee;
            background: #333333;
            a {
                color:#e6ab00;
                text-decoration: none;
            }
        }
    }
}

.motorracingleague_results {
    border-spacing: .1rem;
    border-collapse: separate;
    text-align: center;
    thead {
        font-family: var(--wp--preset--font-family--genos);
        font-size: .6rem;
        border-bottom: .5rem solid #e0010940;
        border-radius: .3rem;
        th{
            /* background: #00000020; */
            padding: .5rem;
            /* box-shadow: 0 0 .5rem #ccc; */
            border-radius: .3rem;
        }
    }
    tbody {
        font-family: var(--wp--preset--font-family--genos);
        tr {
            font-size: .8rem;
            &:nth-child(1) {
                color:#0e2149;
            }
            &:nth-child(2),
            &:nth-child(3) {
                color: #e6ab00;
            }
            &:hover {
                color: #333333;
                background: #86a8ef;
            }
            td,
            th {
                border-radius: .3rem;
                &:first-child,
                &:last-child {
                    font-weight: 600;
                }
            }
            .motorracingleague_player {
                font-weight: 600;
                letter-spacing: .1rem;
            }
        }
    }
}

.motorracingleague_best {
    color: #333333;
    background: #dddddd;
    background: linear-gradient(90deg, #dddddd 0%, #ffffff 30%,#ffffff 80%, #dddddd 100%);
    border-radius: .5rem;
    box-shadow: 0 0 .5rem #ccc;
    margin: 3rem 0;
    tbody {
        tr:first-child{
            color:#333333;
            &:hover {
                color: #333333;
                background: #dddddd;
                background: linear-gradient(90deg, #dddddd 0%, #ffffff 30%,#ffffff 80%, #dddddd 100%);
            }
            > * {
                border-radius: 0;
            }
        }
    }
}

.wp-block-loginout {
    font-family: var(--wp--preset--font-family--genos);
    font-weight: 600;
}