* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    align-items: center;
    display: flex;
    flex-direction: column;
}

h1, p {
    text-align: center;
}

.video-background,
#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-background {
    position: fixed;
    inset: 0;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    z-index: -1000;
    overflow: hidden;
}

#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* ВАЖНО для iPhone */
    position: absolute;
    top: 0;
    left: 0;
}

.header {
    background-color: black;
    width: 100%;
    padding: 5px;
    margin: 0px;
}

.header p {
    color: white;
    margin: 0px;
}


.Vas_Mi { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 316px;
    min-height: 100vh;
    max-width: 100%;
}

.Vas_Mi_text {
    display: flex;
    width: 100%;
    /* height: 426px; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Vas_Mi div:first-child{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 0px;
}

.Vas_Mi p, .Vas_Mi h1 {
    font-family: "kudry_weird-headline";
    font-size: 190px;
    font-weight: 100;
    height: 0px;
    margin: 0px;
    width: 100%;
}

.Vas_Mi h1 {     
    color: #5d463c;
    z-index: -100; 
}
.Vas_Mi p {position: relative;}
.Vas_Mi p:first-child {
    color: #ffffff;
    top: -109px;
}

.Vas_Mi p:last-child{
    color: #ffffff;
    top: 49px;
}

.timer {
    display: flex;
    flex-direction: row;
    bottom: 500px;
    align-content: center;
    justify-content: center;
    width: 100%;
    font-family: "kudry_weird-headline";
    font-size: 60px;
    font-weight: 100;
    color: #ffffff;
    flex-wrap: wrap;
    animation: identifier 5s;
}
    
.timer .days {
    width: 92px;
}
.hours, .minutes, .seconds {
    width: 78px;
}

@keyframes identifier {
    from {
        opacity: 0%;
        transform: scale(0.5);
    }
    30% {
        opacity: 0%;
        transform: scale(0.5);
    }
    to {
        opacity: 100%;
        transform: scale(1);
    }
}

/* .Vas_Mi img{ */
    /* background-image: url("../IMG/Vasa.png"); */
    /* height: 920px; */
    /* position: absolute; */
    /* z-index: -100; */
/* } */
/* .Vas_Mi .Vas { */
    /* top: 800px; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
/* } */
/* .Vas_Mi .Mi { */
    /* top: 800px; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
/* } */
/* .Vas_Mi .boho { */
    /* width: 1436px; */
    /* height: auto; */
    /* top: 713px; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
/* } */


.box_one, .form {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 25px;
    margin: 15px;
    margin-top: 0px;
    width: 95%;
}

.box_one p, .box_one h2 {
    text-align: center;
}
.box_one p {
    color: #b89789;
    font-size: 36px;
    font-family: sans-serif;
    padding-bottom: 30px;
    margin: 0px;
}

.box_one h2 {
    font-family: "kudry_weird-headline";
    font-size: 80px;
    font-weight: 100;
    color: #b89789;
}
 .othe_text {
    background-color: #a9916b61;
    border-radius: 10px;
    width: 100%;
}

.Border {
    display: flex;
    gap: 25px;
    flex-direction: column;
    align-items: center;
    border: thick double;
    color: #b89789;
    border-radius: 25px;
    padding: 15px;
}

.Border:last-child {
    gap: 25px;
}

.map_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.map_block p {
    width: 40%;
    font-size: 33px;
    font-weight: 100;
}

.map {
    background-color: #b89789;
    padding: 5px;
    border-radius: 25px;
    width: min-content;
}

.map iframe {
    border-radius: 20px;
}

.back_jem, .back_jem_bottom {height: 0px;}

.back_jem img, .back_jem_bottom img{
    position: relative;
    width: 40px;
    min-height: 40px;
    height: auto;
    /* left: var(--x); */
    /* top: var(--y); */
}

.back_jem_bottom {
    display: flex;
    justify-content: end;
}

.sink {
    position: relative;
    width: 400px;
    height: auto;
    top: -4px;
    left: -3px;
    border-radius: 25px;
}

.sink_box {
    display: flex;
    flex-direction: row-reverse;
    max-height: 0px;
    align-items: end;
}

.back_jem img:nth-child(1) { top: 44px; left: 122px;}
.back_jem img:nth-child(2) { top: 15px; left: -10px;}
.back_jem img:nth-child(3) { top: 197px; left: -63px;}
.back_jem img:nth-child(4) { top: 9px; left: 79px;}
.back_jem img:nth-child(5) { top: 116px; left: -118px;}
.back_jem_bottom img:nth-child(1) { bottom: 59px; right: 20px;}
.back_jem_bottom img:nth-child(2) { bottom: 181px; right: -6px;}
.back_jem_bottom img:nth-child(3) { bottom: 193px; right: 90px;}
.back_jem_bottom img:nth-child(4) { bottom: 54px; right: 304px;}
.back_jem_bottom img:nth-child(5) { bottom: 120px; right: 48px;}


.timing {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 0px;
    width: 75%;
    border-bottom: 1px solid #ffffff;
}

.block_obj {
        position: relative;
        width: 16px;
        height: 16px;
        background-color: #ffffff;
        border-radius: 3000px;
        color: #ffffff;
}

.timing p, .timing h1, .timing_2 h1, .timing p {
    width: max-content;
    text-align: left;
}

.timing h1 {
    font-family: "kudry_weird-headline";
    font-size: 50px;
    font-weight: 100;
    margin: 0px;
    margin-bottom: 5px;
}

.timing p {
    font-size: 30px;
    font-weight: 100;
}

.block_obj div { position: relative; }
.block_obj:nth-child(1) div, .block_obj:nth-child(3) div {
    top: -200px;
    left: -95px;
}

.block_obj:nth-child(2) div, .block_obj:nth-child(4) div {
    top: 40px;
    left: -96px;
}

.form h1 {
    font-family: "kudry_weird-headline";
    font-size: 65px;
    font-weight: 100;
    margin: 0px;
    margin-bottom: 5px;
}

.form p {
    text-align: center;
    font-size: 26px;
    font-weight: 100;
    margin: 0px;
}

.dress {
    display: flex;
    flex-wrap: wrap;
    width: 450px;
    gap: 15px;
    justify-content: center;
}
.dress img{
    border-radius: 500px;
    width: 80px;
    height: 80px;
}

.info_form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.info_form p:first-child {
    font-size: 24px;
}
.info_form span {
    padding: 4px 35px 4px 35px;
    background-color: #ffefe8;
    border: thick double;
    color: #b89789;
    width: fit-content;
    transition: transform 0.3s ease;
}

.info_form span:hover {
    transform: scale(1.1);
}

.select_info_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.select_info {
    display: flex;
    flex-direction: column;
    background-color: #ffefe89a;
    /* border: thick double; */
    color: #b89789;
    width: 95%;
    border-radius: 25px;
    padding: 25px;
    gap: 20px;
    margin-bottom: 50px;
    margin-top: 50px;
    backdrop-filter: blur(10px);
    align-items: center;
}

.select_info  div {width: 100%;}

.select_info p, .select_info h1, .select_info label {
    color: #a08173;
    margin: 0px;
    font-weight: 100;
}
.select_info h1 {
    font-family: "kudry_weird-headline";
    font-size: 42px;
}
.select_info p, label{
    font-size: 24px;
}
.select_block p {
    text-align: left;
}

.select_info div:nth-child(2) label {
    font-size: 24px;
    color: #a08173;
}

.select_info div:nth-child(2) input {
    font-size: 24px;
    border: solid 1px;
    color: #a08173;
    background-color: #ffffff59;
    padding: 5px;
}

.select_info div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.select_block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.select_block input {
    width: 25px;
    height: 25px;
}

button {
    font-size: 20px;
    width: 20%;
    padding: 5px;
    border: solid 1px;
    color: #a08173;
    background-color: #ffffff59;
    transition: transform 0.3s ease-in-out;
}

button:hover {
    transform: scale(1.1);
}

.img_123 {
    width: 100%;
    max-height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -10;
}

.img_123 img {
    position: relative;
    width: 450px;
    top: 234px;
}

.the_end {
    display: flex;
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.the_end h1, .the_end p {
    font-size: 90px;
    color: #ffffff;
    font-family: 'kudry_weird-headline';
    font-weight: 200;
    margin: -13px;
}

.img_anim {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    overflow: hidden;
}
.img_anim  img {
    width: 150px;
}

.img_anim  img:first-child {
    animation: 3s ease-in-out infinite alternate anim_1;
}

.img_anim  img:last-child {
    animation: 3s ease-in-out infinite alternate anim_2;
}   

.img_end {
    display: none;
    width: 100%;
}

.img_end img {
    width: 100%;
}

.img_end div {
    position: relative;
    Z-INDEX: -100;
    overflow: hidden;
}

@keyframes anim_1 {
    from {
        transform: translate(50px);
    }
    to {
        transform: translate(150px);
    }
}
@keyframes anim_2 {
    from {
        transform: translate(-50px);
    }
    to {
        transform: translate(-150px);
    }
}

.map iframe {
    width: 400px;
    height: 300px;
}

.timing_2 {
    display: none;
    flex-direction: row;
    width: 100%;
    height: 50vh;
    gap: 50px;
    margin: 100px;
    color: #ffffff;
}

.timing_2 div:first-child {
    width: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 1000px;
    border-right: 1px solid #ffffff;
    margin-left: 5%;
}
.timing_2 div:last-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.timing_2 p {
    font-size: 36px;
    font-weight: 100;
}

.timing_2 h1 {
    font-family: "kudry_weird-headline";
    font-size: 60px;
    font-weight: 100;
}
.timing_2 p, .timing_2 h1 {
    margin: 0px;
}
@font-face {
              font-family: "kudry_weird-headline";
              src: url("../font/kudry_weird-headline.otf")  format('opentype');
              font-style: normal; 
                font-weight: normal;
            }


@media (max-width: 1000px) {
    .map { width: 90%; }
    .map iframe {
    width: 100%;
    height: 200px;
    }

    .sink_box, .back_jem, .back_jem_bottom {
        display: none;
    }

    .box_one p {
        font-size: 16px;
    }

    .map_block p {
        font-size: 16px;
        width: 100%;
    }

    br {display: none;}
    .timing {display: none;}
    .block_obj {
        position: relative;
        display: flex;
        width: 16px;
        height: 16px;
        right: 8px;
        background-color: #ffffff;
        border-radius: 3000px;
        color: #ffffff;
    }

    .form h1 {
        font-size: 32px;
    }
    .form p {
        font-size: 16px;
    }
    .info_form p:first-child {
    font-size: 16px;
    }
    .Border {
        padding: 25px;
    }

    .select_info h1 {
        font-size: 32px;
    }
    .select_info p, label {
        font-size: 16px;
    }
    .select_info div:nth-child(2) label {
        font-size: 16px;
    }
    .select_info div:nth-child(2) input {
        font-size: 16px;
    }
    .select_block input {
        width: 12px;
        height: 12px;
    }
    button {
        font-size: 16px;
        width: 35%;
        padding: 5px;
    }
    .dress img {
        width: 50px;
        height: 50px;
    }
    .timing_2 {
        display: flex;
        height: 35vh;
    }
    .img_end {
        display: block;
        max-height: 1280px;
    }
    .the_end {
        justify-content: flex-end;
    }

    .Vas_Mi p, .Vas_Mi h1  {
        font-size: 70px;
    }
    .Vas_Mi p, .Vas_Mi h1  {
        width: auto;
    }
/*-----------------------------------------------------------*/
    .timer .days {
        width: auto;
    }
    .hours, .minutes, .seconds {
        width: auto;
    }

    .timer {
        font-size: 24px;
    }
    .box_one h2 {
        font-size: 32px;
    }
    .timing_2 h1 {
        font-size: 28px;
    }
    .timing_2 p {
        font-size: 16px;
    }
    .timing_2 div:first-child {
        height: 35vh;
    }
    .dress {
        width: 230px;
        gap: 12px;
    }
    .the_end h1, .the_end p {
        font-size: 42px;
    }
    .img_anim img {
            width: 72px;
    }

    @keyframes anim_1 {
        from {
            transform: translate(20px);
        }
        to {
            transform: translate(80px);
        }
    }
    @keyframes anim_2 {
        from {
            transform: translate(-20px);
        }
        to {
            transform: translate(-80px);
        }
    }
    .img_123 {
        display: none;
    }

    .box_one, .form, .select_info {
        padding: 12px;
        width: 90%;
    }
    .Vas_Mi p:last-child {
        top: 18px;
    }
    .Vas_Mi p:first-child {
        top: -46px;
    }
    .Vas_Mi {
        gap: 120px;
    }
}