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

.menssage {
   margin-top: 5px;
   margin-bottom: 5px;

   font-size: 2.5rem;
   font-weight: 700;
   color: var(--error-90);
}

.n__404 {
   width: 700px;
   max-width: 100%;
}

.zero {
   animation: jump 2s infinite;
}

.text__return {
   text-align: center;
   font-size: 22px;
   font-weight: 500;
   line-height: 16px;
   margin-top: 18px;
}

@keyframes firework {
   0% {
      color: var(--secondary-100);
      transform: translateY(0) scale(1);
   }
   20% {
      color: var(--secondary-60);
      transform: translateY(-20px) scale(1.2);
   }
   40% {
      color: var(--secondary-70);
      transform: translateY(-20px) scale(1.2);
   }
   60% {
      color: var(--secondary-80);
      transform: translateY(-20px) scale(1.2);
   }
   100% {
      color: var(--secondary-110);
      transform: translateY(0) scale(1);
   }
}

.text__return .text__link {
   text-decoration: none;
   color: var(--secondary-100);
   font-weight: 700;
   animation: firework 2s infinite;
}

@keyframes jump {
   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translateY(0);
   }

   40% {
      transform: translateY(-30px);
   }

   60% {
      transform: translateY(-15px);
   }
}

@media screen and (max-width: 800px) {
   .menssage {
      margin-top: 120px;
      font-size: 1.8rem;
   }
}

@media screen and (max-width: 500px) {
   .menssage {
      margin-top: 120px;
      font-size: 1.2rem;
   }
}

@media screen and (max-width: 360px) {
   .menssage {
      font-size: 0.9rem;
   }
}
