body {
	margin: 0;
	padding: 0 80px;
	background: #1B2024;
    font-family: "Marck Script", cursive;
	font-size: 15px;
	color: #8F8F8F;
    margin-bottom: 20px;
    background-image: url('img/flowers2.png') ;
    background-repeat: no-repeat;
    background-size:contain;
    background-clip: inherit;
    
}

@media (max-width: 780px) {
    body {
      margin-bottom: 0;
      padding: 0 40px;
    }
  }
  /* @media (max-width: 570px) {
    body {
      margin-bottom: 0;
      padding: 0 40px;
    }
  } */
  @media (max-width: 417px) {
    body {
      margin-bottom: 0;
      padding: 0 20px;
    }
  }
body .inframe{
    padding: 0;
}

.img-head-photo{
    max-height: 400px;
    border-radius: 30px;
    box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),  /* мягкая основная тень */
    0 8px 30px rgba(0, 0, 0, 0.1);  /* дополнительная рассеянная */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 780px) {
    .img-head-photo {
        max-height: 300px;
    }
  }

  @media (max-width: 531px) {
    .img-head-photo {
        max-height: 250px;
    }
  }

  @media (max-width: 460px) {
    .img-head-photo {
        max-height: 220px;
    }
  }

  @media (max-width: 415px) {
    .img-head-photo {
        max-height: 180px;
    }
  }
.photo-head{
    text-align: center;
    margin-top: 50px;
}
.background-color{
    background-color: rgb(255, 218, 172);
}

.floating-right{
    animation: myAnimRight 2s ease-in-out 1 normal forwards;
}

/* @media (max-width: 780px) {
           {
       
    }
  } */

  @media (max-width: 780px) {
    .floating-right {
        animation: myAnimRight780 2s ease-in-out 1 normal forwards;
    }
  }
  
@keyframes myAnimRight {
	0% {
		transform: translateX(150px);
        opacity: 0%;
	}

	100% {
		transform: translateX(-10px);
        opacity: 100%;
	}
}

@keyframes myAnimRight780 {
	0% {
		transform: translateX(100px);
        opacity: 0%;
	}

	100% {
		transform: translateX(0px);
        opacity: 100%;
	}
}

.floating-left{
    animation: myAnimLeft 2s ease-in-out 1 normal forwards;
}

@media (max-width: 780px) {
    .floating-left {
        animation: myAnimLeft780 2s ease-in-out 1 normal forwards;
    }
  }

@keyframes myAnimLeft {
	0% {
		transform: translateX(-100px);
        opacity: 0%;
	}

	100% {
		transform: translateX(10px);
        opacity: 100%;
	}
}

@keyframes myAnimLeft780 {
	0% {
		transform: translateX(-150px);
        opacity: 0%;
	}

	100% {
		transform: translateX(0px);
        opacity: 100%;
	}
}

.img-head-photo-vadim {
margin-bottom: 100px; 
transform: translateX(150px);
}

.img-head-photo-milana {
    margin-top: 100px; 
    transform: translateX(-150px);
    }

.text-names{
    padding-top: 50px;
    text-align: center;
}
.text-names-stroke{
    font-family: "Marck Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    color: black;
    }
    @media (max-width: 780px) {
        .text-names-stroke {
            font-size: 65px;
 }
}
@media (max-width: 570px) {
    .text-names-stroke {
        font-size: 50px;
}
}

@media (max-width: 460px) {
    .text-names-stroke {
        font-size: 45px;
}
}
@media (max-width: 377px) {
    .text-names-stroke {
        font-size: 38px;
}
}
    
.ornament-svg{
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 50px 0;
}

.ornament-block{
    text-align: center;
    overflow: hidden;
}

.img-hearts{
    width: 300px;
}
@media (max-width: 780px) {
    .img-hearts{
        width: 250px;
}
}
@media (max-width: 317px) {
    .img-hearts{
        width: 200px;
}
}

.block-hearts{
    align-items: center;
    display: flex;
    flex-direction: column;
   
}

 .block-hearts a{
        font-family: Arial, Helvetica;
        color: black;
        font-size: 45px;
        margin: 50px 0;
    text-align: center;
    background-color: rgb(255, 233, 206);
    border-radius: 20px;
    padding: 10px 20px;
}

@media (max-width: 570px) {
    .block-hearts a{
        margin-bottom: 15px;
}
}

@media (max-width: 470px) {
    .block-hearts a{
        margin-bottom: 10px;
}
}

@media (max-width: 317px) {
    .block-hearts a{
        margin-bottom: 0px;
}
}

@media (max-width: 780px) {
    .block-hearts a {
        font-size: 35px;
}
}

@media (max-width: 540px) {
    .block-hearts a {
        font-size: 30px;
}
}

    @media (max-width: 470px) {
        .block-hearts a {
            font-size: 25px;
    }
    }
 .text-friends-title{
    font-family: "Marck Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    color: black;
 } 

 @media (max-width: 470px) {
    .text-friends-title{
        font-size: 37px;
}}
 
 .text-friends {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    margin: 0 auto;
    max-width: 700px;
    margin-bottom: -50px;
 }
 .text-friends a{
    margin-bottom: 80px;
 }

 @media (max-width: 540px) {
    .text-friends a{
        margin-bottom: 40px;
}}
 .text-friends-baze{
    /* font-family: Arial, Helvetica; */
        color: black;
        font-size: 45px;
    text-align: center;
 }
 @media (max-width: 540px) {
    .text-friends-baze{
        font-size: 30px;
}}
 .text-friend-calendar{
    max-width: 900px;
    margin: 0 auto;

 }

 @media (max-width: 470px) {
    .text-friend-calendar{
        width: 100%;
}
}
.dislocation-block{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 .dislocation{
    font-family: "Marck Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    color: black;
    background-color: rgb(255, 233, 206);
    border-radius: 20px;
    padding: 5px 15px;
    max-width: 500px;

 }

 @media (max-width: 780px) {
    .dislocation{
        font-size: 40px;
}}

@media (max-width: 540px) {
    .dislocation{
        font-size: 35px;
}}
 
 .dislocation-adress{
    font-family: Arial, Helvetica;
    color: black;
    font-size: 35px;
    margin: 50px 0;
text-align: center;
 }

 @media (max-width: 780px) {
    .dislocation-adress{
        font-size: 40px;
        margin: 30px 0;
}}

@media (max-width: 540px) {
    .dislocation-adress{
        font-size: 30px;
}}
.dislocation
 .text-friends-date{
    background-color: rgb(255, 233, 206);
    border-radius: 20px;
    padding: 5px 15px;
    margin-bottom: 0px !important;
 }

.yandex-map{
    margin: 0 auto;
    max-width: 800px;
}

@media (max-width: 780px) {
    .yandex-map {
        margin: 0 -40px;
    }
  }

  @media (max-width: 417px) {
    .yandex-map {
        margin: 0 -20px;
    }
  }