/*
 * The 404 component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.not-found-page__wrapper {
  overflow:hidden;
  width:100%;
}

.not-found-page {
  background-color:#181818;
  color:#fff;
  height:calc(var(--mobile-vh)*100);
  position:relative;
  width:100%;
}

.not-found__container {
  align-items:center;
  gap:24px;
  margin-inline:auto;
  margin-top:-5px;
  text-align:center;
}

@media screen and (max-width:1440px) {

  .not-found__container {
    gap:18px;
    margin-top:-4px;
  }
}

@media screen and (max-width:1199px) {

  .not-found__container {
    margin-top:-3px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .not-found__container {
    gap:24px;
    margin-top:-8px;
  }
}

.not-found__text {
  font-size:clamp(96px,0px + 7.5vw,144px);
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .not-found__text {
    font-size:72px;
  }
}

.not-found__figure {
  bottom:0;
  left:0;
  position:absolute;
  right:0;
}

.not-found__figure svg {
  width:100%;
}

.not-found__figure .segment {
  fill:#fff;
  stroke:#fff;
  stroke-width:2px;
  animation:moveUpDown 4s ease-in-out infinite;
}

.not-found__figure .segment:first-child {
  animation-delay:0s;
}

.not-found__figure .segment:nth-child(2) {
  animation-delay:.3s;
}

.not-found__figure .segment:nth-child(3) {
  animation-delay:.6s;
}

.not-found__figure .segment:nth-child(4) {
  animation-delay:.9s;
}

@media screen and (max-width:1199px) {

  .not-found__figure--desktop {
    display:none;
  }
}

.not-found__figure--mobile {
  display:none;
}

@media screen and (max-width:1199px) {

  .not-found__figure--mobile {
    display:block;
  }
}