/* Эффект анимации кнопки "заполнение снизу-вверх" */
.btn-fill-up {
  --color: #000;     
  --hover: rgba(0, 0, 0, .4);     
  
  background: none;
  align-content: center;
  align-items: center;
  align-self: center;
  border: px solid var(--color);
  border-top-left-radius: 5px; /* радиус границ кнопки*/
  border-top-right-radius: 5px; /* радиус границ кнопки*/
  color: var(--color);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: absolute;
  justify-items: center;
  overflow: hidden;
  display: flex;
  flex-direction: row-reverse;
}

.btn-fill-up:hover {
  color: #000;
  /* Изменено с 50px на 100% */
  box-shadow: inset 0 -100% 0 0 var(--hover);
}

/* Дополнение для плавного старта анимации */
.btn-fill-up::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hover);
  transition: top 0.2s ease;
  z-index: -1;
}

.btn-fill-up:hover::before {
  top: 0;
}
/* 'эффект анимации Grow */
.hvr-grow {
    display: absolute;
    align-content: center;
    align-items: center;
    align-self: center;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.6);
}

.btn_fill2 {   /* 'эффект анимации кнопки */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #183153;
  font-family: "Unbounded", sans-serif;
  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.btn_fill2:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #ffd401;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

.btn_fill2:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

.btn_fill2 span {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 18px 25px;
  color: #fff;
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: 0.3em;
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

.btn_fill2:hover span {
  color: #183153;
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
  /* 'конец эффекта анимации */
  
  /* 'эффект анимации кнопки */
  
.container {
  width: 100%;
  height: 100%;
  --s: 150px; /* control the size */
  --c1: #ff847c;
  --c2: #e84a5f;
  --c3: #fecea8;
  --c4: #99b898;

  background: conic-gradient(
      from 45deg at 75% 75%,
      var(--c3) 90deg,
      var(--c1) 0 180deg,
      #0000 0
    ),
    conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg, #0000 0),
    conic-gradient(from -45deg at 50% 100%, #0000 180deg, var(--c3) 0),
    conic-gradient(
      from -45deg,
      var(--c1) 90deg,
      var(--c2) 0 225deg,
      var(--c4) 0
    );
  background-size: var(--s) var(--s);
}

  /* 'конец эффекта анимации */