.div,
.div * {
  box-sizing: border-box;
}


    .video-bg {
      position: fixed; /* чтобы не скролилось */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1; /* чтобы было под контентом */
    }

    .video-bg video {
      width: 100%;
      height: 100%;
      object-fit: cover; /* заполняет экран */
    }



@font-face {
  font-family: "TenorSans-Regular";
  src: url("TenorSans-Regular.woff2") format("woff2"),
       url("TenorSans-Regular.woff") format("woff"),
       url("TenorSans-Regular.ttf") format("truetype"),
       url("TenorSans-Regular.svg") format("svg");
}

@font-face {
  font-family: "Kindentosca-Regular";
  src: url("Kindentosca.woff2") format("woff2"),
       url("Kindentosca.woff") format("woff"),
       url("Kindentosca.ttf") format("truetype"),
       url("Kindentosca.svg") format("svg");
}
.div {
  display: flex;
  flex-direction: column;
  gap: 0vw;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  padding-top: 31.2vw;
  padding-bottom: 9.067vw;
}
.text-01 {
  color: #6a5041;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
}
.text-02 {
  color: #6a5041;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 21.333vw;
  font-weight: 400;
  position: relative;
  margin-top: 21.6vw;
  
}
.text-03 {
  color: #6a5041;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 10.196vw;
  font-weight: 400;
  position: relative;
  
}
.text-04 {
  color: #6a5041;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 21.333vw;
  font-weight: 400;
  position: relative;
}
.text-05 {
  color: #6a5041;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
  margin-top: 26.133vw;
  
}
.text-06 {
  color: #6a5041;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 19.2vw;
  font-weight: 400;
  position: relative;
  -webkit-text-stroke: 0.267vw #fff6e3;
}
.text-07 {
  color: #6a5041;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
}
.group-91 {
  flex-shrink: 0;
  width: 8.8vw;
  height: 6.133vw;
  position: relative;
  overflow: visible;
  margin-top: 5vw;
  animation: verhniz 2s ease infinite;
  
}

@keyframes verhniz {
  0% {
    transform: translateY(0);
  }

  50% {
        transform: translateY(-5vw);

  }
  100% {
    transform: translateY(0);
  }
  
}

@keyframes verhniz2 {
  0% {
    transform: translateY(0);
  }

  50% {
        transform: translateY(2vh);

  }
  100% {
    transform: translateY(0);
  }
  
}


.frame-335 {
  background: rgba(255, 255, 255, 0.59);
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.533vw;
  padding: 9.067vw 1.333vw 9.067vw 1.333vw;
  display: flex;
  flex-direction: column;
  gap: 2.667vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  margin-top: 7vw;
  width: 95vw;
  
}
.photo-2026-04-29-18-30-36-1 {
  flex-shrink: 0;
  width: 90.933vw;
  height: 124.533vw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 341/467;
}
.text-08 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
  margin-top: 3vw;
  
}
.text-09 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 10.667vw;
  font-weight: 400;
  position: relative;
  margin-top: -5vw;
  
}
.text-10 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  text-wrap: nowrap;
}
.text-11 {
  color: #88634d;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  margin-top: 7vw;
  
}
.text-12 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  margin-top: 7vw;
  
}
.c-5567-a-573-f-7233-dd-3-f-5-d-769391227-e-7-c-512-bc-547-f-6-ca-713152-f-6-cddde-094-c-447-photoroom-1 {
  flex-shrink: 0;
  width: 22.667vw;
  height: 22.667vw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
  scale: 1.5;
}
.frame-339 {
  background: rgba(255, 255, 255, 0.59);
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.533vw;
  padding: 4.267vw 2.4vw 4.267vw 2.4vw;
  display: flex;
  flex-direction: column;
  gap: 2.667vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
    width: 95vw;

}
.text-13 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
  margin-top: -4vw;
  
}
.text-14 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
}
.text-15 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
}
._75-bb-8-ed-7-012-e-43-c-1-b-63-b-17693-c-15-baac-1 {
  border-radius: 7.467vw;
  flex-shrink: 0;
  width: 89.867vw;
  height: 60vw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 337/225;
}
.text-16 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
  margin-top: -6vw;
  
}
.text-17 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
  margin-top: 7vw;
  
}
.frame-336 {
  display: flex;
  flex-direction: column;
  gap: 0vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 43.467vw;
  position: relative;
  margin-top: -75vw;
  margin-right: 40vw;
  
  
}

.heart{
  width: 10vw;
  animation: heart3 2s ease infinite,
  heart2 7s  infinite;
}

@keyframes heart1 {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5
  }
}
@keyframes heart2 {
  0%{
    opacity: 0;
    transform: translate(-5vw, -5vw);
  }

  12.5%{
        transform: translate(0,5vw);
    opacity: 1;

  }
  25%{
    transform: translate(10vw,30vw);
        opacity: 1;

  }
  37.5%{
    transform: translate(10vw,30vw);
        opacity: 1;


  }
  50%{
        transform: translate(-10vw,60vw);
            opacity: 1;


  }
  62.5%{
            transform: translate(-10vw,60vw);
                opacity: 1;


  }

  75%{
            transform: translate(10vw,85vw);
                opacity: 1;


  }

  87.5%{
            transform: translate(10vw,85vw);
                opacity: 1;


  }

  100% {
                transform: translate(15vw,95vw);
                opacity: 0;

  }
}
.text-18 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
  align-self: stretch;

  margin-right: 15vw;
  
}
.text-19 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  margin-right: 15vw;
  
}
.text-20 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 2.667vw;
  line-height: 3.467vw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-337 {
  display: flex;
  flex-direction: column;
  gap: 0vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 43.467vw;
  position: relative;
  margin-left: 50vw;
  margin-top: -15vw;
  
  
}
.text-21 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
}
.text-22 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  font-weight: 400;
  position: relative;
}
.text-23 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 2.667vw;
  line-height: 3.467vw;
  font-weight: 400;
  position: relative;
}
.frame-338 {
  display: flex;
  flex-direction: column;
  gap: 0vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 43.467vw;
  position: relative;
  margin-right: 50vw;
  margin-top: -10vw;
  
  
}
.text-24 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
}
.text-25 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  font-weight: 400;
  position: relative;
}
.text-26 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 2.667vw;
  line-height: 3.467vw;
  font-weight: 400;
  position: relative;
}
.text-27 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
}
.text-28 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  font-weight: 400;
  position: relative;
}
.text-29 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 2.667vw;
  line-height: 3.467vw;
  font-weight: 400;
  position: relative;
}
.c-5567-a-573-f-7233-dd-3-f-5-d-769391227-e-7-c-512-bc-547-f-6-ca-713152-f-6-cddde-094-c-447-photoroom-2 {
  flex-shrink: 0;
  width: 22.667vw;
  height: 22.667vw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
    scale: 1.5;

}
.frame-340 {
  background: rgba(255, 255, 255, 0.59);
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.517vw;
  padding: 6.133vw 1.867vw 10.133vw 1.867vw;
  display: flex;
  flex-direction: column;
  gap: 2.667vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
    width: 95vw;

}
.text-30 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
}
.text-31 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
  margin-top: -7vw;
  margin-left: 15vw;
  
  
}
.text-32 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
}
.text-33 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
}
.text-34 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
}
.c-5567-a-573-f-7233-dd-3-f-5-d-769391227-e-7-c-512-bc-547-f-6-ca-713152-f-6-cddde-094-c-447-photoroom-3 {
  flex-shrink: 0;
  width: 22.667vw;
  height: 22.667vw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
    scale: 1.5;

}
.frame-341 {
  background: rgba(255, 255, 255, 0.59);
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.517vw;
  padding: 6.133vw 3.733vw 10.933vw 3.733vw;
  display: flex;
  flex-direction: column;
  gap: 6.4vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 95vw;
  position: relative;
}
.text-35 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
}
.text-36 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
}
.text-37 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  align-self: start;
}
.text-38 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  line-height: 5.333vw;
  font-weight: 400;
  position: relative;
  align-self: start;
}
.text-39 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  align-self: start;
}
.text-40 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  line-height: 5.333vw;
  font-weight: 400;
  position: relative;
  align-self: flex-start;
}
.frame-310 {
  background: #87624c;
  border-radius: 5.333vw;
  padding: 2.667vw 8vw 2.667vw 8vw;
  display: flex;
  flex-direction: row;
  gap: 2.667vw;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 10.933vw;
  position: relative;
  margin-top: 4vw;
  
}
.text-41 {
  color: #ffffff;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  letter-spacing: 0.06em;
  font-weight: 400;
  position: relative;
}
.text-42 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  align-self: start;
}
.text-43 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 3.733vw;
  line-height: 5.333vw;
  font-weight: 400;
  position: relative;
    align-self: start;

}
.frame-312 {
  background: #87624c;
  border-radius: 5.333vw;
  padding: 2.667vw 8vw 2.667vw 8vw;
  display: flex;
  flex-direction: row;
  gap: 2.667vw;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 10.933vw;
  position: relative;
}
.text-44 {
  color: #ffffff;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  letter-spacing: 0.06em;
  font-weight: 400;
  position: relative;
}
.photo-2026-04-29-20-36-28-1 {
  flex-shrink: 0;
  width: 89.6vw;
  height: 122.667vw;
  position: relative;
  object-fit: cover;
}
.text-45 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
  margin-top: 7vw;
  
}
.frame-344 {
  background: rgba(255, 255, 255, 0.59);
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.517vw;
  padding: 6.933vw 5.333vw 6.933vw 5.333vw;
  display: flex;
  flex-direction: column;
  gap: 2.667vw;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  margin-top: 7vw;
    width: 95vw;

  
}
.text-46 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
    align-self: center;

}
.text-47 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
  align-self: center;
}
.text-48 {
  color: #45352b;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4vw;
  line-height: 5.867vw;
  font-weight: 400;
  position: relative;
    align-self: center;

  
}
.text-49 {
  color: rgba(69, 53, 43, 0.7);
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  font-weight: 400;
  position: relative;
}
.text-50 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  font-weight: 400;
  position: relative;
  margin-top: 5vw;
  
}
.text-51 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  line-height: 5.6vw;
  font-weight: 400;
  position: relative;
}
.text-52 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  font-weight: 400;
  position: relative;
  margin-top: 5vw;
  
}
.text-53 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  line-height: 5.6vw;
  font-weight: 400;
  position: relative;
}
.text-54 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  font-weight: 400;
  position: relative;
  margin-top: 5vw;
  
}
.text-55 {
  color: rgba(69, 53, 43, 0.7);
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  font-weight: 400;
  position: relative;
}
.frame-311 {
  background: #87624c;
  border-radius: 5.333vw;
  padding: 2.667vw 8vw 2.667vw 8vw;
  display: flex;
  flex-direction: row;
  gap: 2.667vw;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
    align-self: center;
  cursor: pointer;
  margin-top: 7vw;
  
}
.text-56 {
  color: #ffffff;
  text-align: center;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.267vw;
  letter-spacing: 0.06em;
  font-weight: 400;
  position: relative;
}
.text-57 {
  color: #45352b;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 6.4vw;
  font-weight: 400;
  position: relative;
    align-self: center;
    margin-top: 7vw;
    

}
.text-58 {
  color: #87624c;
  text-align: center;
  font-family: "Kindentosca-Regular", sans-serif;
  font-size: 8.533vw;
  font-weight: 400;
  position: relative;
    align-self: center;
    margin-top: -4vw;
    

}

    .timer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4.349vw;
      font-size: 8.533vw;
      font-weight: 500;
      font-family: 'TenorSans-Regular';
      color: #87624C;
      margin-top: 5vw;
      
    }

    .time-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 12.222vw;
    }

    .time-box span {
      font-size: 3.7vw;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 5px;
      color: #87624C;
      
    }

    .divider {
      font-size: 9.6vw;
      margin-top: -3.175vw;
      color: #87624C;
    }


    .subtitle {
  font-family: "BonaNova-Regular", sans-serif;
  font-size: 12.80vw;
  margin-top: -9vw;
  color: #87624C;


    }


    .frame-20 {
  border-style: solid;
  border-color: #74482D;
  border-width: 0.26vw;
  padding: 2.93vw 2.40vw 2.93vw 2.40vw;
  display: flex;
  flex-direction: row;
  gap: 2.66vw;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 72.53vw;
  height: 10.40vw;
  position: relative;
    color: rgba(69, 53, 43, 0.7);
  text-align: start;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 4.26vw;
  font-weight: 300;
  position: relative;
}

::-webkit-input-placeholder{
  color: rgba(69, 53, 43, 0.7);
}



.convert {
  padding: 14.7vh 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0; 
    z-index: 105;
}
.convert-01 {
  color: #a37848;
  text-align: left;
  font-family: "TenorSans-Regular", sans-serif;
  font-size: 2.95vh;
  font-weight: 400;
  position: relative;
  z-index: 3;
}
.convert-02 {
  color: #862e35;
  text-align: left;
  font-family: "Annabelle-Regular", sans-serif;
  font-size: 3.94vh;
  font-weight: 400;
  position: relative;
  margin-top: -1vh;
  left: 9vw;
    z-index: 3;


}
.top111{
  position: absolute;
  z-index: 2;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.bot111{
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.other111{
  position: absolute;
  z-index: 3;
  width: 100vw;
  height: 70vh;
  top: 30vh;
}
.convert-03 {
  flex-shrink: 0;
  height: 20.35vh;
  position: relative;
  object-fit: cover;
  aspect-ratio: 162/173;
  margin-top: 10vh;
    z-index: 3;

}
.convert-04 {
  flex-shrink: 0;
  width: 6.16vw;
  height: 2.63vh;
  position: relative;
  overflow: visible;
    z-index: 3;
    margin-top: -7vh;

}
.convert-05 {
  color: #a37848;
  text-align: left;
  font-family: "Annabelle-Regular", sans-serif;
  font-size: 2.95vh;
  font-weight: 400;
  position: relative;
    z-index: 3;

}




.moved-up {
  /* Анимация подъёма верхнего элемента */
  transform: translateY(-100vh);
  transition: transform 0.5s ease;
}

.moved-down {
  /* Анимация опускания нижнего элемента */
  transform: translateY(100vh);
  transition: transform 0.5s ease;
}

.fade-out {
  /* Плавное исчезновение контейнера */
  opacity: 0;
  transition: opacity 0.7s ease;
}


    #musicBtn {
  position: fixed;
      background-image: url(music_13551742.png);

  background-size: cover;
  top: 5.3vw;
  right: 5.3vw;
  width: 13.3vw;
  height: 13.3vw;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background-color 0.3s;
  z-index: 9;
  border-style: solid;
  border-width: 0.5vw;

}

#musicBtn:hover {
  transform: scale(1.1); 
}

#musicBtn.playing {
    background-image: url(speaker_11773102.png);



}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-out 1 forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translatey(20vw);}
  to { opacity: 1; }
}
@keyframes coll {
  from { opacity: 0; transform: translatey(20vw);}
  to { opacity: 1; }
}