#wtd #nextRoundScreen {
    background-color: #130f40;
}

#wtd #minigame {
    background-color: #b33939;
}

#wtd * {
    padding: 0; margin:0;
    overflow: visible;
    user-select: none;
}

#wtd {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background: rgb(214,48,49);
    background: radial-gradient(circle, rgba(214,48,49,1) 5%, rgba(101,22,23,1) 95%);
    align-items: center;
    justify-content: space-evenly;
    color: white;
    overflow-x: hidden;
    padding:4rem;
}

#wtd h2 {
    margin-bottom: : 5px;
    font-size: calc(36px + 1.5rem);
    font-family: 'Rowdies', cursive;
    font-weight: lighter;
}

#wtd .subtext {
    font-size: calc(20px + 1.5rem);
    font-weight: lighter;
    font-family: 'Righteous', sans-serif;
}

#wtd .textholder {
    text-align: center;
    padding: 0 4rem;
}

#wtd .playericon{
    width: 15rem;
    height: 15rem;
    background-size: cover;
    background-position: center;
}

#wtd .gear{
    font-size: 220px;
}

#wtd .spin {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

#wtd .countdown .button{
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 25px 15px 25px;
    background-color: rgb(44, 0, 74 ,.75)
}

#wtd .gift {
    /* margin-left: 60px !important; */

    position: relative;
    width: 250px;
    height: 250px;
    -webkit-animation: enter-top 1.1s alternate ;
    animation: enter-top 1.1s alternate ;
}

#wtd .gift-cirkel{
    width: 208px;
    height: 208px;
    background-color: #3B3B98;
    border-radius: 300px;
    position: absolute;
    box-shadow:0 1px 2px rgba(0,0,0,0.3);
    margin-left: 50% !important;
    margin-top: 50% !important;
    transform: translate(-50%, -50%);
}

#wtd .gift-cirkel:hover {
    background-image:radial-gradient(#3b3b98, #5c5cf0 70%);
}

#wtd .gift-cirkel::after {
    content:"";
    display:block;
    border:8px dashed white;
    border-radius: 300px;
    width:192px;
    height:192px;
    animation: spin 30s linear infinite;
}

#wtd .gift-box-ribbon-top-1 {
    height: 40px;
    width: 25px;
    background-color: #B53471;
    left: 40%;
    top: -25px;
    transform: translate(-50%) rotate(-45deg);
    position: absolute;
    border-radius: 8px 0px 0px 0px;
    box-shadow:0 0 1px rgba(0,0,0,0.4);
    z-index: -1;
}

#wtd .gift-box-ribbon-top-2 {
    height: 40px;
    width: 25px;
    background-color: #B53471;
    left: 60%;
    top: -25px;
    transform: translate(-50%) rotate(45deg);
    position: absolute;
    border-radius: 0px 8px 0px 0px;
    box-shadow:0 0 1px rgba(0,0,0,0.4);
    z-index: -1;
}


#wtd .gift-cirkel .gift-box {
    width: 45%;
    height: 45%;
    position: absolute;
    z-index: 10;
    box-shadow:0 0 1px rgba(0,0,0,0.4);
    margin-left: 50% !important;
    margin-top: 50% !important;
    transform: translate(-50%, -50%);
}

#wtd .gift-cirkel .gift-box  .gift-box-innerbox {
    position: absolute;
    background-color: #f7f1e3;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    box-shadow:0 0 1px rgba(0,0,0,0.4);
}

#wtd .gift-box-ribbon-tall {
    height: 100%;
    width: 25px;
    background-color: #B53471;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    box-shadow:0 0 1px rgba(0,0,0,0.4);
}

#wtd .gift-box-ribbon-wide {
    height: 25px;
    width: 100%;
    background-color: #B53471;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow:0 0 1px rgba(0,0,0,0.4);
}

/*animations*/

@-webkit-keyframes enter-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes enter-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

#wtdrevamp {
    background-color: #310e68;
    background-image: linear-gradient(316deg, #310e68 0%, #5f0f40 74%);
    color: white;
    font-family: 'Rowdies', cursive;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#wtdrevamp h2 {
    font-size: 4rem;
    margin:0;
}


#wtdrevamp h3 {
    font-size: 2rem;
    font-family: 'Righteous', cursive;
}

#waitingforplayerswrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    justify-content: center;
}

#wtdrevamp .awaitingplayer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    margin: 0.75rem;
    border-radius: calc(100px  + 0.75rem) calc(100px + 0.75rem) 0 0;
    cursor: pointer;
    user-select: none;
}

#waitingforplayerswrapper .awaitingplayer:hover {
    filter:brightness(1.1);
}

#waitingforplayerswrapper .awaitingplayer:active {
    filter:brightness(0.9);
}

#wtdrevamp .awaitingplayer .awaitingicon {
    border-radius: 100%;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .75rem;
}

#wtdrevamp .awaitingplayer .awaitingicon .awaitingiconInner {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-image: url('/img/characters/BuffBernard.png');
    background-size: cover;
}

#wtdrevamp .awaitingplayer .awaitinginfo {
    width: 200px;
    min-height: 100px;
    padding: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#wtdrevamp .awaitingplayer .awaitinginfo h2 {
    font-size: 1.2rem;
    color: #5f0f40;
    font-family: 'Righteous', cursive;
    text-align: center;
}

#wtdrevamp .awaitingplayer .awaitinginfo > h2 {
    font-family: 'Rowdies', cursive;
    font-size: 1.8rem;
}

#wtdrevamp .wtdtitles{
    width: 100%;
}

#wtdrevamp .wtdtitles > h2::before{
    content: "- ";
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}
@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}