@font-face {
    font-family: "SF Pro";
    font-weight: 1000;
    src: url("../font/SF-Pro-Display-Medium.otf") format("opentype");
}

@font-face {
    font-family: "SF Pro Bold";
    font-weight: 1000;
    src: url("../font/SF-Pro-Display-Bold.otf") format("opentype");
}

@font-face {
    font-family: "SF Pro Heavy";
    font-weight: 1000;
    src: url("../font/SF-Pro-Display-Heavy.otf") format("opentype");
}

@font-face {
    font-family: "SF Pro Light";
    font-weight: 1000;
    src: url("../font/SF-Pro-Display-Light.otf") format("opentype");
}


* {
    padding: 0;
    margin: 0
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    height: 100vh;
}

body {
    background: black;
    width: 100%;
    font-family: SF Pro;
    height: 100vh;
    overflow: hidden;
}

.bg {
    background-image: url(../image/web/bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-color: #000005;
}

main {
    margin: auto;
    width: calc(800px + ((100vh - 850px) / 2));
}

.design {
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 1;
}

.design img {
    width: 100%;
}

.design .wheel {
    width: 100%;
    padding-top: 100px;
    position: absolute;
    z-index: -1;
}

.design .glow {
    width: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 80px;
    z-index: -1;
}

.design .wheel-carousel {
    width: 42%;
    height: 100%;
    margin: auto;
    animation: Rotate360 6s linear infinite;
    -webkit-animation: Rotate360 6s linear infinite;
}

.design .cerector {
    position: relative;
    width: 100%;
    display: block;
    z-index: -1;
}

.design .jackpot {
    position: absolute;
    top: 82.5%;
    left: 15px;
    width: 100%;
    color: #fff;
}

.jackpot-number {
    font-weight: bold;
    position: relative;
    display: block;
    background: linear-gradient(180deg, #FFF 20%, #FFE982 50%, #FFD200 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 41px;
    height: 49px;
    font-family: SF Pro Heavy;
    overflow: hidden;
}

.jackpot-number::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    text-shadow: 1px -2px 0px rgb(176 176 176 / 50%), 0px -1px 2px rgb(0, 0, 0);
    /* text-shadow: 1px -2px 0px rgb(255, 0, 0, 0.4), 0px -2px 2px rgb(51 51 51); */
    z-index: -1;
}

.jackpot-number>div {
    display: inline-block;
    word-break: break-all;
    overflow: hidden;
    vertical-align: top;
    position: relative;
}

.jackpot-number span {
    display: block;
    background: linear-gradient(180deg, #FFF 20%, #FFE982 50%, #FFD200 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jackpot-number div {
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.jackpot-number div.total-number-8 {
    animation-name: totalNumber8;
    margin: 0 -8px 0 -5px;
}

.jackpot-number div.total-number-9 {
    animation-name: totalNumber9;
    margin-right: -6px;
}

.jackpot-number div.total-number-10 {
    animation-name: totalNumber10;
    margin: 0 -6px;
}

.jackpot-number div.total-number-11 {
    animation-name: totalNumber11;
    margin-left: -6px;
}

.jackpot-number div span {
    position: relative;
    display: block;
}

.jackpot-number div span::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    text-shadow: 1px -2px 0px rgb(176 176 176 / 50%), 0px -1px 2px rgb(0, 0, 0);
    /* text-shadow: 1px -2px 0px rgb(255, 0, 0, 0.4), 0px -2px 2px rgb(51 51 51); */
    z-index: -1;
}

.animated-digit {
    display: inline-block;
    transition: transform 1s ease-in-out;
}

.design .jackpot img {
    width: 350px;
}

.download-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 56%;
    margin: auto;
}

.download-container .download-image {
    width: 65%;
    animation: DownloadZoonInOut 2.5s ease infinite;
    -webkit-animation: DownloadZoonInOut 2.5s ease infinite;
    cursor: pointer;
}

.qr-container {
    width: 21.5%;
    text-align: center;
}

.qr-container img {
    border-radius: 10px;
}

.qr-container p {
    margin: 0;
    color: #ffffffd4;
    font-size: 13px;
    white-space: nowrap;
    margin-bottom: 7px;
    font-family: SF Pro Light;
}

.qr-container img {
    width: 100%;
}

footer {
    width: 40%;
    margin: auto;
    text-align: center;
    margin-top: .3rem;
    padding-bottom: .2rem;
}

footer p {
    font-size: 12px;
    color: #ffffffd4;
    font-family: SF Pro Light;
    margin: 0;
}

footer img {
    width: 50%;
    margin-top: .2rem;
}

@keyframes DownloadZoonInOut {
    0% {
        transform: scale(1.02);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.02);
    }
}

@-webkit-keyframes DownloadZoonInOut {
    0% {
        transform: scale(1.02);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.02);
    }
}

@keyframes Rotate360 {
    0% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes Rotate360 {
    0% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes totalNumber8 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 700%;
    }
}

@keyframes totalNumber9 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 800%;
    }
}

@keyframes totalNumber10 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 900%;
    }
}

@keyframes totalNumber11 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 1000%;
    }
}