body{ padding: 0; margin: 0; color: #fff; font-family: 'SF UI Text', sans-serif }
*{ box-sizing: border-box }


.page{ display: flex; min-height: 100%; max-height: 100%; overflow: hidden; width: 100%; text-decoration: none; color: inherit; position: relative; padding: 25px 75px 60px }

.top{ position: absolute; display: flex; align-items: center; top: 25px; right: 75px }
.settings{ width: 20px; height: 20px; background: url("../img/settings.svg") no-repeat center / contain }
.switch{ width: 32px; height: 13px; border-radius: 99px; background: #C4C4C4; position: relative; margin-right: 14px }
.switch > div{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; background: url("../img/switch.svg") no-repeat center / contain }

.bottom{ position: absolute; left: 75px; right: 75px; bottom: 60px }
.time-line{ width: 100%; height: 2px; background: #969696; position: relative }
.time-line > div{ width: 16px; height: 16px; background: #D4381F; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%) }
.time-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px }
.time-top > div:nth-child(1){ font-size: 12px; line-height: 110%; letter-spacing: 0.01em; font-weight: 400 }
.time-top > div:nth-child(1) span{ color: #CDCDCB }
.fullscreen{ width: 14px; height: 14px; background: url("../img/fullscreen.svg") no-repeat center / contain }
.loader{ position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.loader > div:nth-child(1){ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/loader.svg") no-repeat center / contain; animation: rotate 1s linear infinite }
@keyframes rotate {
    0%{ transform: rotate(0deg) }
    100%{ transform: rotate(360deg) }
}



.modal{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(0, 0, 0, .6); align-items: center; justify-content: center; display: none; text-decoration: none }
@keyframes show {
    0%{ transform: translateY(-100%); opacity: 0 }
    100%{ transform: translateY(0); opacity: 1 }
}
.modal-content{ width: calc(100% - 30px); max-width: 350px; border-radius: 20px; background: rgba(249, 249, 249, 0.95); animation: show 0.5s; transform: translateY(0); opacity: 1 }
.modal-top{ padding: 16px 30px 10px; display: flex; flex-direction: column; align-items: center; text-align: center }
.modal-title{ color: #000; font-size: 18px; font-weight: 500; max-width: 252px }
.modal-text{ color: #000; font-size: 17px; font-weight: 400; margin-top: 14px }
.modal-timer{ font-weight: 300; margin-top: 4px; color: #D2413C }
.modal-btns{ display: flex; align-items: center; border-top: 0.5px solid rgba(0, 0, 0, .3) }
.modal-btn{ padding: 13px 0; text-align: center; color: #0079FA; font-size: 19px; width: 50% }
.modal-btn:nth-child(2){ border-left: 0.5px solid rgba(0, 0, 0, .3) }
.recommended{ color: #039E23; margin-top: 8px }
.modal-btns > div:nth-child(1){ color: rgba(255, 0, 0, 0.65) }

@media (max-width: 525px) {
    .modal-content{ max-width: 318px }

    .top{ top: 40px; right: 30px }
    .bottom{ left: 35px; right: 35px; bottom: 55px }
}
body {
    background-image: url("../img/bg.jpg");
    background-size: cover;
}
.modal-title span {
    font-weight: bold;
    color: red;
    font-size: 21px;
}