@import "style.v2.css";

.content {
  display: block;
  padding: 1.823vw 0 6.25vw;
}

.error-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4.036vw 8.594vw 4.036vw 0;
  background: url("../../assets/img/errors/404-left.webp") left bottom / auto 80% no-repeat, url("../../assets/img/errors/404-right.webp") right bottom / auto 100% no-repeat;
}

.error-content__title {
  font: 500 14.844vw/1.06 var(--font);
}

.error-content__description {
  font: 400 1.25vw/1.35 var(--font);
  max-width: 35.833vw;
  margin-top: .417vw;
}

.error-content__btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25vw;
  margin-top: 3.021vw;
}

.error-content__btn::before {
  width: calc(100% + 1.25vw);
}

.error-content__btn--back {
  padding: 1.458vw;
  position: relative;
  border-radius: 50%;

  svg {
    transform: none;
    width: 1.563vw;
    height: 1.563vw;
  }

  &::after {
    content: "";
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    filter: blur(4px);
    z-index: -1;
    transition: var(--normal);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover {
    background: transparent;
    border-color: var(--black);

    &::after {
      background: var(--green);
    }
  }
}

.error-content__btn--home {
  padding: 1.51vw 2.083vw 1.51vw 2.448vw;
}

.running-line {
  width: 100%;
  height: 7.031vw;
  margin-top: 7.031vw;
  position: relative;
  overflow: hidden;
}

.running-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url("../../assets/img/errors/rrl.svg") repeat-x center;
  background-size: 15.167vw 100%;
  animation: scroll 5s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-15.167vw, 0, 0);
  }
}

@media (max-width: 1280px) {
  .content {
    padding: 0 0 7.552vw;
  }

  .error-content {
    padding: 10.352vw 8.594vw 10.352vw 0;
    background-image: url("../assets/img/errors/404-left-tablet.webp"), url("../assets/img/errors/404-right-tablet.webp");
  }

  .error-content__title {
    font-size: 10.417vw;
  }

  .error-content__description {
    font-size: 2.344vw;
    max-width: 54.427vw;
    margin-top: 1.042vw;
  }

  .error-content__btn-container {
    gap: 3.125vw;
    margin-top: 4.688vw;
  }

  .error-content__btn::before {
    width: calc(100% + 3.125vw);
  }

  .error-content__btn--back {
    padding: 2.214vw;

    svg {
      width: 2.344vw;
      height: 2.344vw;
    }
  }

  .error-content__btn--home {
    padding: 2.214vw 2.995vw 2.214vw 4.036vw;
  }

  .running-line {
    height: 11.068vw;
    margin-top: 7.552vw;
  }

  .running-line::before {
    background-size: 22.526vw 100%;
  }
}

@media (max-width: 767px) {
  .content {
    padding: 6.4vw 0 12.8vw;
    margin-top: 22vw;
  }

  .error-content {
    padding: 6.267vw 22.667vw 6.267vw 0;
    background: url("../../assets/img/errors/404-right-mobile.webp") right bottom / auto 100% no-repeat;
  }

  .error-content__title {
    font-size: 21.333vw;
  }

  .error-content__description {
    font-size: 4.8vw;
    max-width: 68.8vw;
    margin-top: 2.133vw;
  }

  .error-content__btn-container {
    gap: 6.4vw;
    margin-top: 4.688vw;
  }

  .error-content__btn::before {
    width: calc(100% + 6.4vw);
  }

  .error-content__btn--back {
    padding: 4.533vw;

    svg {
      width: 4.8vw;
      height: 4.8vw;
    }
  }

  .error-content__btn--home {
    padding: 4.533vw 6.133vw 4.533vw 8.267vw;
  }

  .running-line {
    height: 15.467vw;
    margin-top: 9.6vw;
  }

  .running-line::before {
    background-size: 32.635vw 100%;
  }
}