@import url('https://fonts.googleapis.com/css?family=Carter+One');

.peg,
.wheelSVG {
    visibility: hidden;
}


body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.centerCircle,
.valueContainer,
.wheelOutline,
.wheelText {
    pointer-events: none;
}

body,
html {
    text-align: center;
}

body{
    background-size:contain;
    overflow-x: hidden;
    overflow-y: visible;
}
body.stars-spin {

    background: url("https://pas4dspin.xyz/assets/spin/media/background.webp") no-repeat center;

}
body.bintang-kemenangan {
    background: url("https://pas4dspin.xyz/assets/spin/media/background_bintang_kemenangan.webp") no-repeat center;
}

body,
html {
    margin: 0;
    padding: 0;
}

#container {
    width: 100vw;
    margin-top: 2rem;

}

.wheelContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding-bottom: 100%;
    overflow: visible;
    margin-top: 20vh;

}

.wheelSVG {
    display: inline-block;
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;

}

.wheelText {
    text-anchor: start;
    font-family: 'Carter One', sans-serif;
    -webkit-user-select: none;
    user-select: none;
    text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;


}

.wheelText tspan {
    text-anchor: middle;
    letter-spacing: 2px;
}

.toast-wheel {
    border-radius: 12px;
    opacity: 0;
    background-color: #E81D62;
    position: absolute;
    overflow: hidden;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    width: 50vw;
    padding: 20px 40px;
    max-width: 1000px;
    display: none;
}

.toast-wheel p {
    clear: both;
    font-family: Montserrat, Arial, sand-serif;
    margin: 23px;
    font-size: 30px;
    color: #ededed;
    letter-spacing: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 32px;
    -webkit-transition: line-height .2s ease;
    transition: line-height .2s ease;
}

#triggerBtn{
    display: none;
}

.no-underline{
    border-bottom: 0;
}
@media only screen and (max-width: 480px) {


    button {
        font-size: 1rem;
        padding: 10px;
        width: 60vw;
    }

    .toast {
        padding: 0;
    }

    .toast p,
    .toast span {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

@media only screen and (min-width: 481px) and (max-width: 800px) {

    .toast {
        padding: 0;
    }

    .toast p,
    .toast span {
        font-size: 1.8rem;
        line-height: 2rem;
    }
}

@media only screen and (min-width: 801px) {

    .toast p,
    .toast span {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

@media only screen and (max-height: 480px) {

    .toast p,
    .toast span {
        font-size: 33px;
        line-height: 35px;
    }

    button {
        font-size: 22px;
        padding: 10px;
        width: 90%;
    }


}


a:link {
    color: #F1DC16;
}

a:visited {
    color: #F1DC16;
}

a:hover {
    color: #F1DC16;
}

a:active {
    color: #F1DC16;
}

.game-button {
    position: relative;
    top: 0;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    font-family: 'Carter One', sans-serif;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: .1em;
    text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px #004a87;
    border: none;
    margin: 15px 15px 30px;
    background: repeating-linear-gradient(45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
    border-bottom: 3px solid rgba(16, 91, 146, 0.5);
    border-top: 3px solid rgba(255, 255, 255, .3);
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 15px 10px;
    box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0, 0, 0, .3);
}

.game-button:hover {
    top: 2px;
    box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button::before {
    content: '';
    height: 10%;
    position: absolute;
    width: 40%;
    background: #fff;
    right: 13%;
    top: -3%;
    border-radius: 99px;
}

.game-button::after {
    content: '';
    height: 10%;
    position: absolute;
    width: 5%;
    background: #fff;
    right: 5%;
    top: -3%;
    border-radius: 99px;
}


.game-button.red {
    background: repeating-linear-gradient(45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
    box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(160, 25, 23, 0.5);
    text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
}

.game-button.red:hover {
    top: 2px;
    box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.orange {
    background: repeating-linear-gradient( 45deg, #ffc800, #ffc800 5px, #ffc200 5px, #ffc200 10px);
    box-shadow: 0 6px 0 #b76113, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #75421f, 0 12px 0 5px #8a542b, 0 15px 0 5px #593116, 0 15px 1px 6px rgba(0,0,0,.3);
    border-bottom: 3px solid rgba(205, 102, 0, 0.5);
    text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px  #c96100;
}
.game-button.orange:hover {
    top:2px;
    box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #75421f, 0 10px 0 5px #8a542b, 0 13px 0 5px #593116, 0 13px 1px 6px rgba(0,0,0,.3);
}


.game-input{
    outline: none;
    border-radius: 8px;
    min-height: 65px;
    border: 5px solid #ff4f4c;
    margin: 15px 15px 30px;
    box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0, 0, 0, .3);
    font-family: 'Carter One', sans-serif;
    font-size: 26px;
    line-height: 1.5em;
    letter-spacing: .1em;
    text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
    color: #fff;
    caret-color: #d72d21;
    padding: 5px;
}

.game-input::placeholder{
    font-family: 'Carter One', sans-serif;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: .1em;
    text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
    color: #fff;
    opacity: .3;
}

.logo-wrapper-mobile{
    max-height: 150px;
}

.spinner-wrapper{
    overflow: visible;
    width: 100%;
}




@media (min-width:320px)  {
    .outer-circle {
        z-index: -2;
        width: 130%;
        top: 35%;
        right: -12.5%;
        margin: auto;
        transform: translateY(-50%);
    }
    @keyframes float {
        0% {
            transform: translateY(-50%) rotate(-20deg);
        }
        50% {
            transform: translateY(-60%) translateX(-10%) rotate(20deg);
        }
        100% {
            transform: translateY(-50%) rotate(-20deg);
        }
    }

    @keyframes drift {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(-10%);
        }
        100% {
            transform: translateX(0);
        }
    }

    .astro {
        z-index: -1;
        width: 50%;
        margin: auto;
        transform: translateY(-50%) rotate(-20deg);
        animation-name: float;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .astro.one {
        top: 0;
        left: -10%;
        animation-name: drift, float;
        animation-duration: 12s, 6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .astro.two{
        top: 0;
        /*left: -10%;*/
         right: -10%;
        animation-name: drift, float;
        animation-duration: 12s, 6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: 3s;
    }
    .wheelContainer {
        margin-top: 10vh;
    }
    .frame-wheel{
        z-index: 2;
        width: 110%;
        top: 38%;
        left: -5%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
}
@media (min-width:481px)  {
    .outer-circle {
        width: 110%;
        top: 45%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
    .wheelContainer {
        margin-top: 10vh;
    }
    .frame-wheel{
        z-index: 2;
        width: 110%;
        top: 38%;
        left: -5%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) {
    .outer-circle {
        width: 140%;
        top: 30%;
        left: -15%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
    .wheelContainer {
        margin-top: 20vh;
    }
    .frame-wheel{
        z-index: 2;
        width: 110%;
        top: 38%;
        left: -5%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
}
@media (min-width:1367px) {
    .outer-circle {
        width: 140%;
        top: 30%;
        left: -15%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
    .wheelContainer {
        margin-top: 20vh;
    }
    .frame-wheel{
        z-index: 2;
        width: 110%;
        top: 38%;
        left: -5%;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
    }
}