body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    color: red;
}

* {
    font-family: 'Montserrat', sans-serif;
}

/**/
html,
body {
    height: 100%;
    min-height: 680px;
    background-color: #0F1923;
    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center top;

}

.logo img {
    max-height: 30%;
    width: 15%;
}

.lightbox {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
}

.tcdr {
    font-size: 0.7em;
    color: white;
    opacity: 0.8;
    font-weight: normal;
    text-decoration: none;
    margin-top: 30px;
}

.tcdr a {
    color:white!important;
}

.lightbox p {
    background: #FA3D14;
    color: #ffffff;
    padding: 0 10px 0 10px;
    border-radius: 10px;
}
.vHolder{
    color: #fff;
    margin-top: 20px;
    display: block;
    line-height: 1.2em;
    font-weight: normal;

}

#validForDetails {
    font-weight: bold;
}
.status {
    text-align: left;
    display: none;
    font-size: 25px;
    line-height: 40px;
}

#lightboard {
    max-width: 100%;
    text-align: left;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    background: #012E59;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#181a3d", endColorstr="#21374d", GradientType=1);
    color: #fff;
    padding: 15px;
    height: 40px;
}

.poptext {
    font-weight: bold;
    line-height: 1em;
    margin: 0;
    z-index: 10;
    background: url(../images/stars.svg), rgb(15,25,35);
    background: url(../images/stars.svg), rgba(15,25,35, 0.9);
    background-size: cover, contain;
    background-repeat: no-repeat;
    text-align: center;
    position: absolute;
    width: 100%;
    height: calc(100% - 70px);
    top: 70px;
    left: 0;
    right: 0;
    min-height: 610px;
}

.line1 {
    font-size: 200px;
    line-height: 0.8em;
    margin: 0;
    margin-top: 10vh;
}

.prefill {
        margin-top: 5vh!important;
}

.line2 {
    font-size: 45px;
    line-height: 0.8em;
}

.line3 {
    font-size: 38px;
    line-height: 0.8em;
}

.line4 {
    margin-top: 10vh;
    font-size: 80px;
    line-height: 0.8em;
}

.line5 {
    font-size: 96px;
    line-height: 0.8em;
}

.line6 {
    font-size: 40px;
    line-height: 0.8em;
}

.card {
    width: 500px;
    margin: 0 auto;
    max-width: 100%;
    background: url(../images/backboard.png);
    background-size: 0;
    background-position: center;
    width: 800px;
    height: fit-content;
    max-height: 100%;
    background-repeat: no-repeat;
    animation-name: intro;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 0.7s;
}

.board {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 30px 10px 10px 10px;
    box-sizing: border-box;
}

@keyframes intro {
    0% {
        background-size: 0%;
    }

    100% {
        background-size: 100%;
    }
}

#spins {
    width: 100%;
    font-weight: bold;
}

#balance {
    width: 100%;
    font-weight: bold;
}

.button {
    font-weight: bold;
    font-size: 20px;
    padding: 15px;
    color: #ffffff;
    width: 50%;
    text-align: center;
    margin: 0 auto;
    min-height: 20px;
    z-index: 1000;
    cursor: pointer;
    margin-top: 20px;
    background: #FA3D14;
    box-shadow: 0 0 0 0 #FA3D14;
}

.boardpral {
    text-align: center;
}

.speed {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    -webkit-animation: spin 0.2s linear infinite;
    -moz-animation: spin 0.2s linear infinite;
    animation: spin 0.2s linear infinite;
}

.speeed {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    -webkit-animation: spin 0.1s ease-in-out infinite;
    -moz-animation: spin 0.1s ease-in-out infinite;
    animation: spin 0.1s ease-in-out infinite;
}

#spinner {
    max-width: 100%;
    z-index: 1;
    -webkit-filter: drop-shadow(0px 0px 5px #57EBFF);
    filter: drop-shadow(0px 0px 5px #57EBFF);
}

.step0 {
    transform: rotate(92deg);
}

.step1 {
    transform: rotate(40deg);
}

.step2 {
    transform: rotate(130deg);
}

.step3 {
    transform: rotate(-45deg);
}

.step4 {
    transform: rotate(245deg);
}

.step5 {
    transform: rotate(170deg);
}


#pin {
    position: absolute;
    left: 50%;
    margin-left: -4%;
    margin-top: -6%;
    width: 8%;
    z-index: 2;
    padding-top: 10px;
}

#dot {
    position: absolute;
    z-index: 3;
    width: 20%;
    margin-left: calc(40% - 10px);
    margin-top: calc(40% - 10px);
}

.gethyped {
    background: #FA3D14;
    box-shadow: 0 0 0 0 #FA3D14;
    animation: pulse 2s infinite;
}

.dahm {
    animation: laverdamer 2s infinite;
}

.terms {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 0.6em;
    color: #ffffff;
    box-sizing: border-box;
    padding: 0 10px;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(250,61,20, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(250,61,20, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(250,61,20, 0);
    }
}

@keyframes laverdamer {
    0% {
        background: url(../images/stars.svg), rgba(204,0,52 0.9);
    }

    50% {
        background: url(../images/stars.svg), rgba(204,0,52 0.7);
    }

    100% {
        background: url(../images/stars.svg), rgba(204,0,52 0.9);
    }
}


@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@-webkit-keyframes rotating

/* Safari and Chrome */
    {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-30deg);
        -o-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}

@keyframes ticks {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    70% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        -o-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}

.ticks {
    -webkit-animation: rotating 0.2s linear infinite;
    -moz-animation: rotating 0.2s linear infinite;
    -ms-animation: rotating 0.2s linear infinite;
    -o-animation: rotating 0.2s linear infinite;
    animation: rotating 0.2s linear infinite;
}

.epilepsy {
    -webkit-animation: rotating 0.1s linear infinite;
    -moz-animation: rotating 0.1s linear infinite;
    -ms-animation: rotating 0.1s linear infinite;
    -o-animation: rotating 0.1s linear infinite;
    animation: rotating 0.1s linear infinite;
}

#button1,
#button2,
#button3,
#button4,
#button5,
#button6,
.tcdr {
    display: none;
}

.butwhole {
    z-index: 100;
    margin-top: 20px;
    height: 100px;
}

.line1,
.line2,
.line3,
.line4,
.line5,
.line6 {
    color: #FA3D14;
    display: none;
    text-shadow: 0px 3px 0px #000000;
}

.hangman {
    position: absolute;
    left: 5%;
    max-width: 60%;
    animation-name: hangman;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    max-width: 100%;
    max-width: 20vw;
}

.hangman img {
    max-width: 100%;
}

@keyframes hangman {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, 15px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@media screen and (max-width: 992px) {

    .logo img {
        width: 80%!important;
    }    

}