/*@font-face {
    font-family: black;
    src: url(../fonts/Merriweather-Black.ttf);
}
@font-face {
    font-family: blackItalic;
    src: url(../fonts/Merriweather-BlackItalic.ttf);
}
@font-face {
    font-family: bold;
    src: url(../fonts/Merriweather-Bold.ttf);
}
@font-face {
    font-family: boldItalic;
    src: url(../fonts/Merriweather-Blackitalic.ttf);
}
@font-face {
    font-family: italic;
    src: url(../fonts/Merriweather-Italic.ttf);
}
@font-face {
    font-family: light;
    src: url(../fonts/Merriweather-Light.ttf);
}
@font-face {
    font-family: lightItalic;
    src: url(../fonts/Merriweather-LightItalic.ttf);
}
@font-face {
    font-family: regular;
    src: url(../fonts/Merriweather-Regular.ttf);
}
*/








body {
    margin:0;
    padding:0;
    font-size: 10px;
    background:url('../img/1/background.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.girl-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}










@media (min-width:900px) {
.logo {
    width: 410px;
    margin-top:25px;
}
.main {
    margin-top:68px;
    width: 88.5%;
    height: 805px;  
    border:35px solid white;
    border-radius: 120px;
    background: url('../img/2/background.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.main__top {
    width:107%;
    position: absolute;
    left:-4.5%;
    top:-75px;
    height: 270px;
}
.main-timer {
    width: 351px;
    height: 126px;
    border-radius: 30px;
    background-image: linear-gradient(135deg, #bb6b16 0%, #ffbb39 100%);
    z-index: 2;
    margin-top: -55px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.main-timer-container {
    width:320px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.main-timer__content {
    width:145px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.main-timer__dots {
    color: white;
    font-family: regular;
    font-size: 60px;
}
.main-tiemr__block {
    width: 68px;
    height: 95px;
    border-radius: 20px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-timer__hours-hour {
    font-size: 60px;
    font-family: bold;
    color: #393939;
}
.main-timer__minutes-minute {
    font-size: 60px;
    font-family: bold;
    color: #ff0000;
}
.main-counter {
    position: absolute;
    top:130px;
    right:55px;
}
.main-counter__top {
    text-align: end;
    font-family: bold;
    font-size: 60px;
    color: white;
}
.main-counter-count {
    text-align: end;
    font-family: bold;
    font-size: 60px;
    color: white;
}
.main__snow {
    position: absolute;
    top: 140px;
    left: 400px;
    width: 100px;
    transform: translate(-100%, -100%);
}
.main__girl {
    position: absolute;
    bottom:0;
    left:30%;
    z-index:5;
    transition: left .2s;
}
.main__leftSnow {
    position: absolute;
    bottom:0;
    border-radius: 75px 0px 0px 120px;
    left:0;
    z-index:2;
    width:300px;
}
.main__rightSnow {
    position: absolute;
    bottom:0;
    border-radius: 0px 60px 120px 0px;
    margin-right:-0px;
    z-index:2;
    right:0;
    width:300px;
}
.main__oalph {
    width:360px;
    position: absolute;
    bottom:0;
    left: 100px;
    z-index:1;
}
.main__button {
    width: 570px;
    height:110px;
    border-radius:120px;
    border:10px solid white;
    position: absolute;
    bottom:-75px;
    background:#a02839;
    display:flex;
    justify-content: center;
    align-items:center;
    cursor:pointer;
    z-index:6;
}
.main__button-inside {
    width:550px;
    height: 90px;
    display:flex;
    justify-content: center;
    align-items:center;
    background: rgb(178,81,95);
    border-radius:120px;
    font-family: bold;
    font-size: 30px;
    color: white;
    background: linear-gradient(180deg, rgba(178,81,95,1) 0%, rgba(162,41,58,1) 100%);
}
}





















@media (min-width:100px) and (max-width:899px) {
    .logo {
        width: 70%;
        margin-top:25px;
        max-width: 370px;
    }
    .main {
        margin-top:68px;
        width: 100%;
        height:505px;  
        border-top:20px solid white;
        border-bottom:20px solid white;
        background: url('../img/2/background.png');
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }
    .main__top {
        width:108%;
        position: absolute;
        left:-40px;
        top:-45px;
        height: 170px;
    }
    .main-timer {
        width: 251px;
        height: 90px;
        border-radius: 30px;
        background-image: linear-gradient(135deg, #bb6b16 0%, #ffbb39 100%);
        z-index: 2;
        margin-top: -55px;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .main-timer-container {
        width:220px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-timer__content {
        width:100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-timer__dots {
        color: white;
        font-family: regular;
        font-size: 60px;
    }
    .main-tiemr__block {
        width: 48px;
        height: 75px;
        border-radius: 10px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-timer__hours-hour {
        font-size: 60px;
        font-family: bold;
        color: #393939;
    }
    .main-timer__minutes-minute {
        font-size: 60px;
        font-family: bold;
        color: #ff0000;
    }
    .main-counter {
        position: absolute;
        top: 50px;
        right:25px;
    }
    .main-counter__top {
        text-align: end;
        font-family: bold;
        font-size: 30px;
        color: white;
    }
    .main-counter-count {
        text-align: end;
        font-family: bold;
        font-size: 30px;
        color: white;
    }
    .main__snow {
        position: absolute;
        top: 140px;
        left: 200px;
        width: 70px;
        z-index: 0;
    }
    .main__girl {
        position: absolute;
        bottom:0;
        left:30%;
        z-index:5;
        width: 60%;
    }
    .main__leftSnow {
        position: absolute;
        bottom:0;
        left:0;
        z-index:2;
        width:30%;
    }
    .main__rightSnow {
        position: absolute;
        bottom:0;
        z-index:2;
        right:0;
        width:30%;
    }
    .main__oalph {
        width:40%;
        position: absolute;
        bottom:0;
        left: 20px;
        z-index:1;
    }
    .main__button {
        width: 80%;
        height:110px;
        border-radius:120px;
        border:10px solid white;
        position: absolute;
        bottom:-110px;
        background:#a02839;
        display:flex;
        justify-content: center;
        align-items:center;
        cursor:pointer;
        z-index:6;
    }
    .main__button-inside {
        width:95%;
        height: 90px;
        display:flex;
        justify-content: center;
        align-items:center;
        background: rgb(178,81,95);
        border-radius:120px;
        font-family: bold;
        font-size: 30px;
        color: white;
        background: linear-gradient(180deg, rgba(178,81,95,1) 0%, rgba(162,41,58,1) 100%);
    }
}
.main__button {
    text-decoration: none;
}