@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");

/**
 * Reset CSS
 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  box-sizing: border-box;
}

/**
 * Class & Tag Styles
 */
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #10141b;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
}

.error-text {
  color: #d887a8;
  font-weight: 700;
  font-size: 20rem;
  letter-spacing: 1rem;
  position: relative;
  user-select: none;
  transition: 0.5s linear;
}

.error-text::before,
.error-text::after {
  content: "404";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  top: 0;
}

.error-text::before {
  color: #d887a8;
  left: 0.5rem;
  opacity: 0.8;
  transition: 0.5s linear;
}

.error-text::after {
  color: #ffffff;
  left: -0.5rem;
  transition: 0.5s linear;
}

/**
 * Media Queries:
 * Animations are for mobile only.
 */
@media screen and (min-width: 769px) {
  .error-text:hover {
    color: #7e5a7b;
  }
  .error-text:hover::before {
    opacity: 0;
  }
  .error-text:hover::after {
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .error-text {
    animation: main-effect 2.5s infinite;
    font-size: 10rem;
    letter-spacing: 0.2rem;
  }
  .error-text::before {
    animation: before-effect 2.5s infinite;
    left: 0.2rem;
  }

  .error-text::after {
    animation: after-effect 2.5s infinite;
    left: -0.2rem;
  }
}

/**
 * 3D Animations
 */
@keyframes main-effect {
  0% {
    color: #d887a8;
  }
  50% {
    color: #7e5a7b;
  }
  100% {
    color: #d887a8;
  }
}

@keyframes before-effect {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes after-effect {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}