:root {
  --font-family: "Inter", sans-serif;
  --second-family: "Readex Pro", sans-serif;
  --third-family: "SF Pro Display", sans-serif;
  --font3: "UNCAGE", sans-serif;
  --font4: "SF Pro", sans-serif;
}
:root {
	--osnova: #6695ec;
	--zadniy-fon: #f2f2f2;
	--bloki: #fff;
	--nekontrastnyy-tekst: #c8c8d0;
}

.wrapper {
  margin: 0;
  padding: 100px 0;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: #1D1D1D;
  overflow-x: hidden;
  background-image: 
  radial-gradient(closest-side, #6695ec62, #f30ba400),
  radial-gradient(closest-side, #da66ec56, #f30ba400),
  radial-gradient(closest-side, #eb666d55, #aa8ef500),
  radial-gradient(closest-side, #66adeb3b, #aa8ef500),
  radial-gradient(closest-side, #6695ec4b, #feea8300),
  radial-gradient(closest-side, #66ecdc5c, #feea8300);
  background-size: 
  60vmax 40vmax,
  60vmax 70vmax,
  50vmax 60vmax,
  50vmax 70vmax,
  50vmax 50vmax,
  50vmax 60vmax;
  background-position: 
  65vmax 0,
  65vmax 0,
  -20vmax 32vmax,
  -20vmax 35vmax,
  75vmax 100vmax,
  75vmax 110vmax;
  background-repeat: no-repeat;
  animation: movement 25s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

@keyframes movement {
  0% {
    background-position: 
    65vmax 0,
    65vmax 0,
    -20vmax 32vmax,
    -20vmax 35vmax,
    75vmax 100vmax,
    75vmax 110vmax;
  }
  33% {
    background-position: 
    75vmax 0,
    75vmax 0,
    -17vmax 32vmax,
    -17vmax 35vmax,
    75vmax 110vmax,
    75vmax 120vmax;
  }
  66% {
    background-position: 
    65vmax 10vmax,
    65vmax 10vmax,
    -18vmax 32vmax,
    -18vmax 35vmax,
    75vmax 105vmax,
    75vmax 115vmax;
  }
  100% {
    background-position: 
    65vmax 0,
    65vmax 0,
    -20vmax 32vmax,
    -20vmax 35vmax,
    75vmax 100vmax,
    75vmax 110vmax;
  }
}
.content {
  max-width: 1268px;
  width: 100%;
  margin: auto;
  padding: 0 20px;
}

/* main */
.main__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* ---- Date ---- */
.date_of_update {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.date_of_update h1{
  border-radius: 15px;
  padding: 16px 32px;

  font-family: var(--second-family);
  font-weight: 300;
  font-size: 25px;
  color: var(--bloki);
  background: rgba(64, 64, 64, 0.904);
}
/* ------ SECTION -------- */
.update__section {
  position: relative;
}
.update__image {
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 15px;
}
.update__image img {
  width: 100%;
  border-radius: 15px; 
  transition: transform 0.3s ease-in-out;
  max-height: 650px;
  object-fit: contain;
  width: 100%;
}

.update__container h1 {
  margin-top: 32px;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 40px;
  color: var(--bloki);
  z-index: 100;
}
.update__container p {
  margin-top: 16px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 25px;
  color: var(--nekontrastnyy-tekst);
  z-index: 100;
}
.point {
  position: sticky;
  top: -10px; 
  left: 5%; 
  z-index: 10; 
  margin-top: -20px; 
}



/* RESPONSE */
@media (max-width: 1500px) {
  .content {
    max-width: 70vw;
     margin: 0 auto;
  }
  /* ---- Date ---- */
  .date_of_update h1{
    padding: 12px 28px;
    font-size: 24px;
  }
  .update__container p {
    font-size: 22px;
  }
}

@media (max-width: 800px) {
  .content {
    max-width: 80vw;
     margin: 0 auto;
  }
  /* ---- Date ---- */
  .date_of_update h1{
    padding: 10px 28px;
    font-size: 20px;
  }
  .update__container p {
    font-size: 22px;
  }

  /* MAIN */
  /* SECTION */
  .update__container h1 {
    margin-top: 32px;
    font-size: 32px;
  }
  .update__container p {
    margin-top: 16px;
    font-size: 20px;
  }
}

@media (max-width: 600px) {
   .content {
    max-width: 90vw;
     margin: 0 auto;
  }

  /* ---- Date ---- */
  .date_of_update h1{
    font-size: 18px;
  }
  .update__container p {
    font-size: 22px;
  }

  /* MAIN */
  /* SECTION */
  .update__container h1 {
    margin-top: 32px;
    font-size: 30px;
  }
  .update__container p {
    margin-top: 16px;
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  .main {
    margin-top: 90px;
    padding-bottom: 150px;
  }
}