/*--------------------Reset--------------------*/
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
* { padding: 0px; margin: 0px; border: none; outline: none; max-height: 100000px}
h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit;}
input{-webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit;}
img, svg {vertical-align: top; max-width: 100%; height: auto; display: block;}
a,button {display:inline-block; text-decoration:none; color:inherit; box-shadow: none; font: inherit; cursor: pointer;}
.footer a[href^=tel] { color: inherit; text-decoration:inherit; pointer-events: none; display: inline; } 

/*--------------------Fonts--------------------*/
/*@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/NunitoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
*/

/*--------------------General--------------------*/
body {
    min-width: 280px;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    
    color: #292929;
    background: #323232;
    overflow-x: hidden;

    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
}

.main {
    padding: 10px;
    min-height: 100vh;
    /* background-image: url("../img/girls.png");
    background-position: center;
    background-size: cover; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("../img/bg.png");
  background-position: center;
  background-size: cover;
  /* filter: blur(5px); */
  z-index: -1;
}

.modal {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 15px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.modal__image {
    width: 100%;
    max-width: 350px;
}

.title {
    color: #000000;
    font-size: 27px;
    line-height: 1.2;
    text-align: center;
    /* margin-top: 25px; */
}

.btn {
    display: block;
    width: 100%;
    max-width: 270px;
    margin:  0 auto;
    padding: 15px;

    background-color: #ff3aa5;
    color: #ffffff;
    /* font-family: 'Roboto', Arial, Helvetica, sans-serif; */
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
    
    border-radius: 10px;
    user-select:none;
    transition: .3s linear;
    animation: heartbeat 1.3s infinite ease-in-out;
    overflow: hidden;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.1); }
  30% { transform: scale(1); }
  45% { transform: scale(1.2); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

.btn:disabled {
    background-color: #f0c3dd;
    cursor: default;
    animation: none;
}

@media (any-hover: hover) {
    .btn:not(:disabled):hover {
        background-color: #e02f92;
    }
}

/*--------------------Quiz--------------------*/
.screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fadeIn .35s ease;
}

[hidden] { display: none !important; }

/* Final screen: whole screen clickable -> split redirect */
.screen--result { cursor: pointer; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* No heartbeat pulse on the quiz Continue/Finish buttons */
.quiz .btn { animation: none; }

.quiz__step {
    align-self: center;
    color: #ff3aa5;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.quiz__progress {
    width: 100%;
    height: 6px;
    background-color: #f0e6ec;
    border-radius: 100px;
    overflow: hidden;
}
.quiz__progress-bar {
    height: 100%;
    width: 25%;
    background-color: #ff3aa5;
    border-radius: 100px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.quiz__question {
    color: #000000;
    font-size: 22px;
    line-height: 1.25;
    text-align: center;
    font-weight: 700;
}

.quiz__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.quiz__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    background-color: #ffffff;
    color: #292929;
    font-size: 17px;
    line-height: 1.2;
    text-align: left;
    border: 2px solid #e7dfe3;
    border-radius: 12px;
    transition: .2s ease;
    user-select: none;
}

@media (any-hover: hover) {
    .quiz__option:hover {
        border-color: #ff3aa5;
    }
}

.quiz__option.is-selected {
    border-color: #ff3aa5;
    background-color: #fff0f8;
    color: #000000;
    font-weight: 700;
}

.quiz__option::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 14px;
    border: 2px solid #d5cad0;
    border-radius: 50%;
    transition: .2s ease;
}
.quiz__option.is-selected::before {
    border-color: #ff3aa5;
    background-color: #ff3aa5;
    box-shadow: inset 0 0 0 4px #ffffff;
}

/*--------------------Loading--------------------*/
.quiz__loading-title {
    font-size: 24px;
}

.progress {
    width: 100%;
    height: 14px;
    background-color: #f0e6ec;
    border-radius: 100px;
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    width: 0%;
    background-color: #ff3aa5;
    border-radius: 100px;
}
.progress__percent {
    color: #ff3aa5;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}


.footer {
    margin: 0 auto;
    width: 100%;   
    max-width: 500px;
    font-size: 11px;
    padding: 0 10px;
    text-align: center;
    line-height: 1;
    color: #ffffff52;
}
.footer__link{
    display: block;
    margin: 0 auto;
    padding: 10px 5px 5px;
}

/* tablet */
@media screen and (max-width: 1024px) and (max-height: 1366px) {

}


/* landscape (phones)*/
@media (orientation: landscape) and (min-width:480px) and (max-width:950px) and (max-height:500px) {

}

/* Portrait (phones)*/
@media (orientation: portrait) and (max-width:500px) {

}