* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
    color: #FFFFFF;
}

body {
    font-size: clamp(1em, 1cqw + 1em, 3em);
    line-height: 1.5;
    color: #333;
    margin: 0;
    background-color: #000;
}

.screen {
    display: flex;
    flex-flow: column;
    height: 100svh;
    padding: 1em 0;
}

.header {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
}

.header .app_name {
    display: flex;
    font-family: Oswald, sans-serif;
    font-weight: 500;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

.header .app_name img {
    width: clamp(1.5em, 2cqw + 1em, 2em);
}

.header .back {
    font-size: 1.3em;
    font-family: system-ui;
    position: absolute;
    left: 0.5em;
}

.content_container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3em 1.4em;
    gap: 2em;
}

.content .description {
    font-size: 1.5em;
    font-weight: 400;
    text-align: center;
    line-height: 1.3em;
}

.highlight {
    color: #CCE96B;
}

.content img {
    width: clamp(5em, 20cqw + 1em, 13em);
}

.footer {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
}

.footer.welcome {
    flex: 1 1 auto;
    justify-content: space-around;
    margin-bottom: 2em;
}

.button {
    background-color: #CCE96B;
    width: 16.8em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    text-decoration: none;
    border-radius: 0.5em;
    position: relative;
    z-index: 10;
}

.button.next-action,
.button.see_result,
.button.email_button {
    margin-bottom: 2em;
}

.button::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 0.5em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #CCE96B;
    animation: button-animation 1s infinite;
}

.img_green_shadow {
    width: 7em;
    height: 7em;
    position: absolute;
    z-index: -1;
    border-radius: 7em;
    box-shadow: 0 0 9em rgba(205, 233, 106, 0.6);
    background-color: rgba(205, 233, 106, 0.13);
}

@keyframes button-animation {
    from {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
    to {
        transform: scaleX(1.1) scaleY(1.5);
        opacity: 0;
    }
}

.button-start {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 10;
    background: #4E5134;
    width: clamp(11em, 55cqw + 1em, 20em);
    height: clamp(11em, 55cqw + 1em, 20em);
    border: 0.2em solid #CCE96B;
    border-radius: 100%;
    flex-direction: column;
    text-align: center;
    gap: 1em;
    color: #CCE96B;
}

.button-start::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    border: 0.2em solid;
    border-radius: 10em;
    animation: button-circle-animation 1s infinite alternate;
}

@keyframes button-circle-animation {
    from {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
    to {
        transform: scaleX(1.3) scaleY(1.3);
        opacity: 0;
    }
}

.button.small {
    width: 8.5em;
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7em;
}

.agreements,
.score_description,
.email_description,
.login_description {
    font-size: 0.7em;
    padding: 1em;
    text-align: center;
    color: #ffffff7a;
}

.agreements a {
    color: #CCE96B;
}

.agreements .sub {
    letter-spacing: 0.2em;
    font-weight: 400;
}

.progress {
    margin: 1em;
    background-color: #1E1E1E;
    border-radius: 0.3em;
}

.progress .bar {
    width: 0%;
    height: 0.3em;
    border-radius: 0.3em;
    background-color: #CCE96B;
}

.process {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    margin: 2em 0 0;
}

.process img {
    position: absolute;
    width: 5.1em;
}

.badge_process {
    width: 11em;
    height: 11em;
}

.step_container {
    display: flex;
    height: 18em;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #1E1E1E;
    border-radius: 1em 1em 0 0;
}

.steps_content {
    display: flex;
    flex-direction: column;
    width: 100vw;
    flex: 1;
}

.steps_content .title {
    font-size: 1.5em;
    font-weight: 400;
    padding: 0.7em;
    color: #CCE96B;
}

.score_text {
    font-size: 1.3em;
    font-weight: bold;
    padding: 1em;
    text-align: center;
}

.score_text {
    padding: 0 1em;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}

.step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    padding: 0 1em;
}

.step lottie-player,
.done lottie-player {
    width: 1.2em;
}

.step lottie-player.hidden {
    opacity: 0;
}

.done {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 1.4em;
}

.score_container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.score_progress {
    font-size: 3em;
    font-weight: 900;
    color: #CCE96B;
}

.email_image_container,
.welcome_image_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.email_img,
.welcome_img {
    width: 9em;
    margin: 1em 0;
}

.email_shadow,
.welcome_shadow {
    position: absolute;
    width: 9em;
    top: 7em;
}

.email_container,
.welcome_container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
}

.welcome_container {
    gap: 0.5em;
}

.email_text {
    font-size: 1.6em;
    text-align: center;
    line-height: 1.3em;
    margin: 0 0.5em;
}

.email_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.email_input {
    position: relative;
}

.email_input input {
    width: 95vw;
    padding: 1.3em;
    margin: 1em;
    border-radius: 0.5em;
    outline: none;
    border: none;
    font-size: 0.85em;
    background-color: #1E1E1E;
}

.email_icon {
    position: absolute;
    right: 1.3em;
    top: 1.1em;
    font-size: 1.3em;
}

.email_icon.error {
    color: #e14141;
    text-shadow: #e14141 0px 0px 1px;
}

.email_icon.success {
    color: #CCE96B;
    text-shadow: #CCE96B 0px 0px 1px;
}

.email_description {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1em;
    font-size: 0.5em;
    padding: 1.5em;
}

.email_submit_error {
    color: red;
    font-size: 0.6em;
    padding: 0.5em 2em;
}

.submit_button {
    outline: none;
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: 1em;
    color: black;
}

.button.wait {
    background: grey;
}

.button.wait::after {
    content: none;
}

.result_circle {
    width: 6.4em;
    height: 6.4em;
    border-radius: 6.4em;
    z-index: -1;
}

.result_circle.red {
    box-shadow: 0 0 9em rgba(214, 69, 160, 0.55);
    background-color: rgba(214, 69, 160, 0.11);
}

.result_circle.blue {
    box-shadow: 0 0 9em rgba(107, 180, 233, 0.57);
    background-color: rgba(107, 180, 233, 0.11);
}

.result_circle.yellow {
    box-shadow: 0 0 9em rgba(234, 150, 51, 0.57);
    background-color: rgba(234, 150, 51, 0.11);
}

.result_circle.green {
    box-shadow: 0 0 9em rgba(205, 233, 106, 0.55);
    background-color: rgba(205, 233, 106, 0.11);
}

.result_title {
    font-size: 1.6em;
    font-weight: 400;
    text-align: center;
    margin-top: 1em;
}

.circle_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.result_circle_shadow {
    position: absolute;
    width: 7.6em;
    top: 4.7em;
}

.result_score {
    position: absolute;
    font-size: 2.6em;
    font-weight: 900;
}

.result_score.red,
.subscription_current_score.red {
    color: #D645A0;
}

.result_score.yellow,
.subscription_current_score.yellow{
    color: #EA9634;
}

.result_score.blue,
.subscription_current_score.blue{
    color: #6BB4E9;
}

.result_score.green,
.subscription_current_score.green{
    color: #CCE96B;
}

.result_container {
    border-radius: 1em;
    padding: 1.5em 1em;
    margin: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1E1E1E;
    font-size: 0.8em;
}

.button.result_button {
    margin-top: 1.5em;
    font-size: 1.1em;
}

hr {
    width: 90vw;
}

.footer.result {
    align-items: flex-start;
    gap: 1.3em;
    margin: 2.7em 0em;
}

.result_text {
    color: #ffffff6e;
}

.result_text_info {
    font-size: 1.7em;
    font-weight: bold;
}

.result_info_container {
    width: 90svw;
    margin: 0em 1em;
}

.result_anonimizing_info {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: bold;
}

.result_anonimizing_value {
    color: #CCE96B;
}

.result_anonimizing_value.bad {
    color: #e14141;
}

.country_container {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.country_container .fi {
    width: 2em;
    height: 1.3em;
    box-shadow: 0px 0px 0.1em;
    background-size: cover;
    border-radius: 0.3em;
}

.result_fingerprint_container {
    display: flex;
    gap: 1.2em;
    flex-direction: column;
    background-color: #1E1E1E;
    border-radius: 0.5em;
    padding: 1em;
}

.result_fingerprint_container img {
    width: 1.6em;
}

.result_fingerprint_header {
    display: flex;
    gap: 0.7em;
}

.result_fingerprint_info_container {
    font-size: 1.1em;
}

.result_fingerprint_info_container .title {
    font-weight: bold;
}

.result_info_container .map {
    width: 17em;
    height: 9.2em;
    border: none;
}

.welcome_title {
    font-size: 1.6em;
    text-align: center;
}

.welcome_text {
    text-align: center;
    margin: 0px 0.5em;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
}

.welcome_login_description {
    padding: 1.5em;
}

.welcome_text_login {
    text-align: left;
    color: #ffffff7a;
    font-size: 0.6em;
}

.welcome_text_login.tip_point {
    padding-left: 0.5em;
}

.subscription_discount_label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    margin-bottom: 1em;
    margin-top: 2.9em;
    background: #000000;
}

.subscription_discount_label_fixed {
    position: fixed;
    width: 100vw;
    z-index: 1;
    top: 0;
    margin: 0;
    border-bottom: 0.05em solid grey;
}

.discount_text_container,
.discount_timer {
    color: #CCE96B;
}

.discount_amount {
    font-weight: bold;
    font-size: 1.2em;
    color: #FFFFFF;
}

.discount_text {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.49);
}

.discount_timer {
    border-radius: 1.2em;
    font-size: 0.9em;
    padding: 0.2em 0.9em;
    background-color: #cce96b24;
}

.subscription_tag {
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.49);
}

.subscription_tag_filled {
    background-color: rgba(204, 233, 107, 0.40);
    display: inline;
    padding: 0.1em 1em;
    color: #CCE96B;
    border-radius: 0.3em;
}

.subscription_current_score_circle {
    width: 4.4em;
    height: 4.4em;
}

.subscription_current_score {
    font-size: 2.3em;
}

.subscription_improve_container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em 2.5em;
    gap: 1em;
}

.subscription_improve_container lottie-player {
    max-width: 8em;
}

.max_score {
    font-size: 2.3em;
    font-weight: 900;
    color: #CCE96B;
}

.subscription_title {
    font-size: 1.5em;
    text-align: center;
    line-height: 1.1em;
}

.subscription_full_security_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 0 1.3em;
    max-width: 25em;
    margin: auto;
}

.subscription_full_security_text_container {
    flex: 1 0 auto;
}

.subscription_full_security_shield_icon_container {
    padding: 0.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription_full_security_shield_icon_container .shield_icon_bg {
    width: 2em;
    height: 2em;
    position: absolute;
    background-color: rgba(217, 217, 217, 0.15);
    z-index: -1;
    border-radius: 0.5em;
}

.subscription_full_security_shield_icon_container .shield_icon {
    height: 1em;
}

.subscription_text_small_grey {
    font-size: 0.6em;
    opacity: 0.35;
}

.subscription_text_mid {
    font-size: 0.7em;
}

.subscription_full_security_target_container {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 1.4em 0;
}

.subscription_full_security_target_label {
    font-weight: bold;
    background-color: rgba(217, 217, 217, 0.15);
    padding: 0.55em 0.43em;
    border-radius: 0.7em;
    font-size: 0.7em;
    color: #CCE96B;
}

.subscription_full_security_target_amount_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subscription_full_security_target_amount {
    font-size: 0.7em;
}

.subscription_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em;
}

.subscription_list_plank {
    display: flex;
    align-items: center;
    background-color: #1E1E1E;
    margin-top: 0.8em;
    border-radius: 0.6em;
    max-width: 25em;
    width: 93svw;
    height: 4.3em;
    opacity: 0.5;
    padding: 0 0.7em;
}

.subscription_list_plank.popular {
    position: relative;
}

.subscription_list_plank.popular:before {
    content: "MOST POPULAR 🔥";
    position: absolute;
    color: black;
    top: 0;
    left: 30%;
    font-size: 0.6em;
    width: 40%;
    text-align: center;
    font-weight: 300;
    background-color: #CCE96B;
    border-radius: 0 0em 1em 1em;
}

.subscription_list_plank.active {
    opacity: 1;
    outline: 0.2em solid #CCE96B;
}

.subscription_plank_description_container {
    display: flex;
    flex-direction: row;
    width: 100svw;
    justify-content: space-between;
}

.subscription_plank_description_line {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.subscription_plank_duration {
    font-weight: bold;
    font-size: 1.1em;
}

.subscription_plank_day_price_container {
    display: flex;
    width: 4.95em;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.subscription_plank_day_price_bg {
    position: absolute;
    z-index: -1;
    width: 5em;
}

.subscription_plank_day_price_text {
    font-size: 0.5em;
    color: rgba(0, 0, 0, 0.50);
    line-height: 0.3em;
    padding-bottom: 0.7em;
}

.day_price_container {
    margin-left: 0.3em;
}

.subscription_plank_day_price {
    font-size: 0.8em;
    font-weight: bold;
    color: black;
}

.subscription_plank_old_day_price {
    font-size: 0.5em;
    text-decoration: line-through;
    color: rgba(30, 30, 30, 0.45);
    padding-left: 0.4em;
}

.subscription_plank_price_container {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.subscription_plank_price_text {
    font-size: 0.8em;
}

.subscription_plank_price_text.subscription_plank_price_discount {
    color: #CCE96B;
    font-weight: bold;
}

.subscription_plank_price.sale {
    text-decoration: line-through;
    color: #9998C3;
}

.subscription_plank_duration_description {
    font-size: 0.6em;
    color: #9998C3;
}

.subscription_footer_text {
    font-size: 0.7em;
    text-align: center;
    padding: 1em 0.7em;
    max-width: 30em;
    color: rgba(255, 255, 255, 0.50);
}

.subscription_description_plank {
    background-color: #1E1E1E;
    margin-top: 0.8em;
    border-radius: 0.6em;
    width: 93svw;
    padding: 1em;
    max-width: 32em;
    font-size: 0.55em;
    color: rgba(255, 255, 255, 0.3);
}

.subscription_description_plank a {
    color: #CCE96B;
}

.paywall_agreements {
    margin-bottom: 1em;
}

.close_button {
    width: 1.5em;
    height: 1.5em;
    background-color: rgba(204, 233, 107, 0.2);
    text-align: center;
    border-radius: 50%;
}

.close_button.checkout {
    margin-left: 0.5em;
}

.discount_gift {
    display: flex;
    justify-content: space-between;
    padding-left: 1.1em;
    align-items: center;
    margin-bottom: 1em;
    margin-top: 2.9em;
    border-bottom: 0.05em solid grey;
}

#payment-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

#error-message {
    color: #e14141;
}

#submit_payment:disabled {
    color: white;
    background: grey;
}

#submit_payment:disabled::after {
    content: none;
}

.choose-method {
    flex: 0.9;
    text-align: center;
}

.choose-method .payment-methods {
    font-size: 0.7em;
}

.checkout_header {
    margin-bottom: 1em;
}

.payment_description {
    display: flex;
    width: 90svw;
    flex-direction: column;
}

.total_payment {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.total_payment_text {
    font-weight: bold;
}

.total_payment_amount {
    text-align: right;
}

.total_payment_save {
    color: #CCE96B;
    font-weight: bold;
}

#submit_payment {
    font-size: 1.5em;
    width: 10em;
    height: 2em;
}

.with_gift {
    margin-bottom: 0;
    padding: 0.5em 1em;
}

@media (min-width: 768px) {
    body {
        font-size: clamp(1em, 3cqw + 1em, 3em);
    }
}

@media (max-width: 375px) {
    body {
        font-size: clamp(1em, 1cqw + 1em, 1em);
    }
}