.not-found {
  width: 100%;
  height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  .name {
    position: absolute;
    top: 25px;
    left: 30px;
    font-weight: 700;
    color: $blue;
    font-size: 1.5rem;
    @include mobile {
      top: 20px;
      left: 25px;
      font-size: 1.25rem;
    }
  }
  h1 {
    font-size: 4rem;
    margin: 10px 0;
  }
  h2 {
    font-size: 1.5rem;
    @include mobile {
      font-size: 1.25rem;
    }
    @include small-mobile {
      font-size: 1.1rem;
    }
  }
  a {
    font-weight: 700;
    color: $blue !important;
    position: relative;
    display: inline-block;
    &:after {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 3px;
      background: $blue;
      content: '';
      opacity: 0;
      transition: height 0.3s, opacity 0.3s, transform 0.3s;
      transform: translateY(-10px);
    }
    &:hover:after,
    &:focus:after {
      height: 3px;
      opacity: 1;
      transform: translateY(-5px);
    }
  }
}