html, body {
    overflow: auto;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: 'Atma', sans-serif !important;
    font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.1rem;
}

.shadow-inset-white {
    box-shadow: inset 0px 0px 7px -3px #d8d8d8;
}

.font-bold{
    font-weight: 500 !important;
}

.font-semibold,
.font-medium{
    font-weight: 400 !important;
}

.app-title {
    background: -webkit-linear-gradient(white, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "lato", sans-serif;
    letter-spacing: 0.05rem;
    text-shadow: 0 4px 26px rgb(255 255 255 / 50%), 0 3px 20px rgb(255 255 255 / 40%);
}

.small-container {
    max-width: 1124px !important;
}

.gradient {
    background-image: radial-gradient(circle at 85% 1%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 96%,transparent 96%, transparent 100%),radial-gradient(circle at 14% 15%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 60% 90%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 79% 7%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 78%,transparent 78%, transparent 100%),radial-gradient(circle at 55% 65%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 52%,transparent 52%, transparent 100%),linear-gradient(135deg, rgb(37, 56, 222),rgb(96, 189, 244));
}

.gradient-2 {
    background-image: radial-gradient(circle at 40% 91%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 50%,rgba(229, 229, 229,0.04) 50%, rgba(229, 229, 229,0.04) 100%),radial-gradient(circle at 66% 97%, rgba(36, 36, 36,0.04) 0%, rgba(36, 36, 36,0.04) 50%,rgba(46, 46, 46,0.04) 50%, rgba(46, 46, 46,0.04) 100%),radial-gradient(circle at 86% 7%, rgba(40, 40, 40,0.04) 0%, rgba(40, 40, 40,0.04) 50%,rgba(200, 200, 200,0.04) 50%, rgba(200, 200, 200,0.04) 100%),radial-gradient(circle at 15% 16%, rgba(99, 99, 99,0.04) 0%, rgba(99, 99, 99,0.04) 50%,rgba(45, 45, 45,0.04) 50%, rgba(45, 45, 45,0.04) 100%),radial-gradient(circle at 75% 99%, rgba(243, 243, 243,0.04) 0%, rgba(243, 243, 243,0.04) 50%,rgba(37, 37, 37,0.04) 50%, rgba(37, 37, 37,0.04) 100%),linear-gradient( 135deg, rgb(34 124 237),rgb(149 89 215));
}

.ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 22px;
    margin-right: -50px;
    margin-top: 15px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari prior 9.0 */
    transform: rotate(45deg); /* Standard syntax */
}

.text-shadow {
    text-shadow: 3px 2px 22px rgba(0,0,0,0.52);
}

.modal {
    transition: opacity 0.25s ease;
}

.highlight-cta::before {
    content: "👇";
    font-size: 3rem;
    transform: scaleX(-1);
    right: 350px;
    top: -80px;
    z-index: 100;
    position: absolute;
    animation: up-down 1s infinite;
}

.highlight-cta .hands:before, .highlight-cta .hands:after {
    content: "👇";
    position: absolute;
    font-size: 2rem;
    opacity: 0;
    transition: 0.1s ease-in-out;
}

.highlight-cta .hands:before {
    transform: rotate(-60deg);
    left: -450px;
    top: -10px;
}

.highlight-cta .hands:after {
    transform: rotate(60deg);
    right: 30px;
    top: -40px;
}

.highlight-cta:hover .hands:before {
    opacity: 1;
}

.highlight-cta:hover .hands:after {
    opacity: 1;
}

    @keyframes up-down {
        50% {
        margin-top: -20px;
    }
}
body.modal-active {
    overflow-x: hidden;
    overflow-y: visible !important;
}

/* width */
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #edf2f7;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 100vh;
    border: 3px solid #edf2f7;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }

.cta-button p {
    display: inline-block;
    background: #6366f1;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1NGZlOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRjNDZjZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #554fe8), color-stop(100%, #4c46ce));
    background-image: -moz-linear-gradient(#554fe8, #4c46ce);
    background-image: -webkit-linear-gradient(#554fe8, #4c46ce);
    background-image: linear-gradient(#6366f1, #4f53f2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    text-shadow: 0 -1px 1px rgb(7 51 34 / 80%);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -o-transition: -o-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

.cta-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 5px 0 #312d85, 0 10px 15px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 5px 0 #312d85, 0 10px 15px rgb(0 0 0 / 35%);
    box-shadow: 0 5px 0 #3833a2, 0 10px 15px rgb(0 0 0 / 35%);
    -moz-transition: box-shadow 0.2s ease-in-out;
    -o-transition: box-shadow 0.2s ease-in-out;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out;
}

    .cta-button.cta-red {
        box-shadow: 0 5px 0 #a23333, 0 10px 15px rgb(0 0 0 / 35%);
        -webkit-box-shadow: 0 5px 0 #a23333, 0 10px 15px rgb(0 0 0 / 35%);
        -moz-box-shadow: 0 5px 0 #a23333, 0 10px 15px rgb(0 0 0 / 35%);
    }

        .cta-button.cta-red p {
            background-image: linear-gradient(#bd3e31, #e32020);
            text-shadow: 0 -1px 1px rgb(148 148 148 / 80%);
        }

    .cta-button:hover p {
        background-image: linear-gradient(#7174f0, #6063ee);
    }

    .cta-button.cta-red:hover p {
        background-image: linear-gradient(#bd5e54, #e23838);
    }

    .cta-button:active {
        -moz-box-shadow: 0 5px 0 #312d85, 0 7px 10px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 0 5px 0 #312d85, 0 7px 10px rgba(0, 0, 0, 0.25);
        box-shadow: 0 5px 0 #312d85, 0 7px 10px rgba(0, 0, 0, 0.25);
    }

    .cta-button.cta-red:active {
        -moz-box-shadow: 0 5px 0 #a83028, 0 7px 10px rgb(0 0 0 / 25%);
        -webkit-box-shadow: 0 5px 0 #a83028, 0 7px 10px rgb(0 0 0 / 25%);
        box-shadow: 0 5px 0 #a83028, 0 7px 10px rgb(0 0 0 / 25%);
    }

        .cta-button:active p {
            -moz-transform: translateY(4px);
            -ms-transform: translateY(4px);
            -webkit-transform: translateY(4px);
            transform: translateY(4px);
        }
.postitguess-card {
    /*    border-image-source: linear-gradient(to left, #4c44d0, #46335f);
    border-image-slice: 1;
    border-width: 3px;*/
    border: 4px solid #313131;
    box-shadow: inset 0px 0px 5px 1px #717171c9, 3px 3px rgb(0 0 0 / 16%), 8px 8px rgb(0 0 0 / 30%);
    background-color: #fcfcfc;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.postitguess-card-transparent {
    background-color: #08080861;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(var(--glass-blur,40px));
    backdrop-filter: blur(var(--glass-blur,40px));
    background-image: linear-gradient( 88deg,rgb(255 255 255/var(--glass-opacity,1%)),rgb(0 0 0 / 9%)),linear-gradient(var(--glass-reflex-degree,100deg),rgb(255 255 255/var(--glass-reflex-opacity,4%)) 0%,rgb(0 0 0 / 5%) 0);
    box-shadow: 0 0 0 1px rgb(255 255 255/var(--glass-border-opacity,10%)) inset,0 0 0 2px rgb(0 0 0/5%);
}

.animation-up-down {
    animation: MoveUpDown 1s linear infinite;
    position: relative;
}

@keyframes MoveUpDown {
    0%, 100% {
        top: -8px;
    }

    50% {
        top: 0px;
    }
}

#loading-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at center center, transparent,rgb(0,0,0)),linear-gradient(122deg, rgba(80, 80, 80,0.05) 0%, rgba(80, 80, 80,0.05) 50%,rgba(6, 6, 6,0.05) 50%, rgba(6, 6, 6,0.05) 100%),linear-gradient(140deg, rgba(26, 26, 26,0.05) 0%, rgba(26, 26, 26,0.05) 50%,rgba(155, 155, 155,0.05) 50%, rgba(155, 155, 155,0.05) 100%),linear-gradient(247deg, rgba(130, 130, 130,0.05) 0%, rgba(130, 130, 130,0.05) 50%,rgba(81, 81, 81,0.05) 50%, rgba(81, 81, 81,0.05) 100%),linear-gradient(174deg, rgba(65, 65, 65,0.05) 0%, rgba(65, 65, 65,0.05) 50%,rgba(181, 181, 181,0.05) 50%, rgba(181, 181, 181,0.05) 100%),linear-gradient(366deg, rgba(8, 8, 8,0.05) 0%, rgba(8, 8, 8,0.05) 50%,rgba(120, 120, 120,0.05) 50%, rgba(120, 120, 120,0.05) 100%),linear-gradient(152deg, rgba(135, 135, 135,0.05) 0%, rgba(135, 135, 135,0.05) 50%,rgba(63, 63, 63,0.05) 50%, rgba(63, 63, 63,0.05) 100%),radial-gradient(circle at center center, hsl(127,1%,24%),hsl(127,1%,24%));
    left: 0;
    top: 0;
}

label.required:after {
    content: " *";
    color: red;
}

#loading-text {
    display: block;
    position: absolute;
    top: 49%;
    left: 50%;
    color: #999;
    width: 100px;
    color: white;
    height: 32px;
    margin: -40px 0 0 -45px;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 18px;
}

.form-radio:checked {
    background-color: #5d5cee !important;
}

#loading-content {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 170px;
    margin: -85px 0 0 -85px;
    border: 3px solid #F00;
}

    #loading-content:after {
        content: "";
        position: absolute;
        border: 3px solid #0F0;
        left: 15px;
        right: 15px;
        top: 15px;
        bottom: 15px;
    }

    #loading-content:before {
        content: "";
        position: absolute;
        border: 3px solid #00F;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
    }

#loading-content {
    border: 3px solid transparent;
    border-top-color: #4D658D;
    border-bottom-color: #4D658D;
    border-radius: 50%;
    -webkit-animation: loader 2s linear infinite;
    -moz-animation: loader 2s linear infinite;
    -o-animation: loader 2s linear infinite;
    animation: loader 2s linear infinite;
}

    #loading-content:before {
        border: 3px solid transparent;
        border-top-color: #D4CC6A;
        border-bottom-color: #D4CC6A;
        border-radius: 50%;
        -webkit-animation: loader 3s linear infinite;
        -moz-animation: loader 2s linear infinite;
        -o-animation: loader 2s linear infinite;
        animation: loader 3s linear infinite;
    }

    #loading-content:after {
        border: 3px solid transparent;
        border-top-color: #84417C;
        border-bottom-color: #84417C;
        border-radius: 50%;
        -webkit-animation: loader 1.5s linear infinite;
        animation: loader 1.5s linear infinite;
        -moz-animation: loader 2s linear infinite;
        -o-animation: loader 2s linear infinite;
    }

.form-radio:focus {
    outline: 0;
    box-shadow: none !important;
    border: none !important;
}

@keyframes box-shadow-blink {
    0% {
        box-shadow: 0 0 30px white;
    }

    50% {
        box-shadow: none;
    }

    100% {
        box-shadow: 0 0 30px white;
    }
}

@-webkit-keyframes box-shadow-blink {
    0% {
        box-shadow: 0 0 30px white;
    }

    50% {
        box-shadow: 0 0 0;
    }

    100% {
        box-shadow: 0 0 30px white;
    }
}

.box-shadow-blink {
    -webkit-animation: box-shadow-blink 1s linear infinite;
    -moz-animation: box-shadow-blink 1s linear infinite;
    -ms-animation: box-shadow-blink 1s linear infinite;
    -o-animation: box-shadow-blink 1s linear infinite;
    animation: box-shadow-blink 1s linear infinite;
    animation-direction: alternate-reverse;
}

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

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

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

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#content-wrapper {
    color: #FFF;
    position: fixed;
    left: 0;
    top: 20px;
    width: 100%;
    height: 100%;
}

#content {
    width: 800px;
    height: 1000px;
    margin: 0 auto;
    text-align: center;
    background-color: #888;
}