*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    background-image: url("../image/Anna1.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
    color:white;
    font-size: 25px;
    text-align: center;
    background-attachment: fixed;
    

}
.home{
    padding:500px 50px 50px 50px;
    background-image: url("../image/Anna1.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    background-position:top center;
}
.home>h1,
.home>h3,
.home>h2{
    font-size: 100px;
    color: rgba(6, 6, 6, 0.796);
    -webkit-text-stroke: 2px #ffffff;
    font-family:"Vrdznagir" ;
    font-weight: 900;
}

.home>h2{
    font-size: 60px;
    
}

.container{
    display: flex;
    width:100%;
    padding: 100px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 60px;
}
.container>h1{
    padding: 50px;
    width:100%;
}
.invitation{
    padding:100px;
    background-color: rgba(67, 65, 66, 0.927);
    border-radius: 50px;
    width:60%;
    margin:auto;
    line-height: 1.6;
    font-size: 42px;
    flex-wrap: wrap;
}
.invitation>h2{
    font-family: "Vrdznagir";
}
.invitation>p{
    font-size:30px ;
}
.calendar{
    width: 300px;
    height: 500px;
    background-image: url("../image/calendar.png");
    background-size: contain;
    margin: 20px auto;
    background-repeat: no-repeat;
    border-radius:  50px 0px;
    background-color: white;
    background-position: center center;
}
.zags,.zal{
    width: 300px;
    height: 300px;
    border-radius: 50px 0px;
    background-image: url("../image/zags.jpg");
    background-size: contain;
    margin: 20px auto;
    background-position: center center;
    box-shadow: 2px 5px 20px rgb(232, 213, 213);
    border: 5px solid white;
}
.zal{
    background-image: url("../image/zal.jpg");
    border: 5px solid rgb(24, 22, 22);
}
.srtik{
    width: 30px;
}
.hraver{
    padding: 10px 50px;
}
.hraver>p{
    font-size: 22px;
    text-align: left;
}

.header{
    position: relative;
}
.footer{
    background-color: white;
    padding: 50px 100px;
    color:black    
}
.footer1,.footer2{
    width: 50%;
    margin: auto;
    padding: 20px;
    font-family:"Vrdznagir"

}
.footer2>p{
    font-family:"Vrdznagir";
}
.ice{
    position: absolute;
    animation: iceMove 20s linear infinite;
    width:50px;
    top:-500px
    

}
.ice1{
    left:0;
    animation-delay: 1s;
    animation-timing-function: ease;
}
.ice2{
    left:10%;
    animation-delay: 1.5s;
    animation-timing-function: ease-in;
}
.ice3{
    left:20%;
    animation-delay: 2s;
    animation-timing-function: ease-in-out;
    
}
.ice4{
    left:30%;
    animation-delay: 3s;
    animation-timing-function: ease;
}
.ice5{
    left:40%;
    animation-delay: 1s;
}
.ice6{
    left:50%;
    animation-delay: 2s;
}
.ice7{
    left:60%;
    animation-delay: 1.5s;
}
.ice8{
    left:70%;
    animation-delay: 3s;
}
.ice9{
    left:80%;
    animation-delay: 2s;
}
.ice10{
    left:25%;
    animation-delay: 4s;
}
.ice11{
    left:25%;
    animation-delay: 4s;
}
.ice12{
    left:65%;
    animation-delay: 1s;
}
.ice13{
    left:0;
    animation-delay: 5s;
    animation-timing-function: ease;
}
.ice14{
    left:10%;
    animation-delay: 6s;
    animation-timing-function: ease-in;
}
.ice15{
    left:20%;
    animation-delay: 6.5s;
    animation-timing-function: ease-in-out;
    
}
.ice16{
    left:30%;
    animation-delay: 7s;
    animation-timing-function: ease;
}
.ice17{
    left:40%;
    animation-delay: 15s;
}
.ice18{
    left:50%;
    animation-delay: 13s;
}
.ice19{
    left:60%;
    animation-delay: 8s;
}
.ice20{
    left:70%;
    animation-delay: 7s;
}
.ice21{
    left:80%;
    animation-delay: 8.5s;
}
.ice22{
    left:0;
    animation-delay: 9s;
}
.ice23{
    left:45%;
    animation-delay: 10s;
}
.ice24{
    left:75%;
    animation-delay: 9.5s;
}
.hours-text{
    font-size:18px;
}
.yearBth{
    font-size: 72px;
    color:white;
    font-family: "Vrdznagir";
    padding: 30px;
}
.snowmen{
    transform: rotate(-90deg);
    position: fixed;
    top:100px;
    width:200px;
    right: 0;
}
@keyframes iceMove{
    from {
        top:-100px
    }
    to{
        top:1200px;
    }
}
@font-face {
    font-family: "Vrdznagir" ;
    src: url("../font/ofont.ru_Rosarium.ttf");
}
@media only screen and (max-width:1024px) {
    body{
        background-size: cover;
    }
   
 
    .home>h1, .home>h3, .home>h2{
        font-size: 100px;
    }
    .container {
        font-size: 40px;
        padding:50px;
    }
    .invitation{
        width:80%;
        padding:30px;
        margin: 10px auto;

    }
    .yearBth{
        font-size: 60px;
    }

    
}
@media only screen and (max-width:600px) {
    .home{
        width:100%;
        padding: 300px 10px 10px 10px;
    }
    .ice{
        width: 20px;
        opacity: 0.5;
    }
    .home>h1, .home>h3, .home>h2 {
        font-size: 50px;

    }
    .invitation{
        width: 100%;
        margin: 20px 0 0 0;
    }
    .invitation>p{
        font-size: 18px;
    }
    .hraver>p{
        font-size: 16px;
    }
    .calendar{
        width: 95%;
        height: 300px;
        border-radius: 30px 0;
    }
    .hraver{
        padding: 10px;
    }
    .zags,.zal{
        width: 100%;
        height: 200px;
        background-size: cover;

    }
    .day-container,
    .hours-container,
    .minutes-container,
    .seconds-container{
        width:70px;
        border-left:1px solid white ;
        
    }
    .footer{
        padding: 20px;
        font-size: 18px;
    }
    .footer1,
    .footer2{
        width: 100%;
    }
    .container{
        padding: 10px;
        font-size: 30px;
    }
    
    .invitation{
        font-size: 22px;
    }
    .yearBth{
        font-size: 32px;
    }
    .srtik{
        width: 20px;
    }
}