blog/src/pages/404.module.scss

@import 'variables';

.wrapper {
  text-align: center;
  margin-bottom: $spacer * 4;
}

.title {
  font-size: $font-size-h3;
  margin-top: 0;
  margin-bottom: $spacer / 4;
}

.text {
  font-size: $font-size-base;
  color: $brand-grey-light;
}

// HAL needs a size
$hal-size: 72px;

.hal9000 {
  width: $hal-size;
  height: $hal-size;
  border-radius: $hal-size;
  background: #444;
  padding: 1.5em;
  margin: $spacer auto;
  position: relative;
  border: 4px solid #ccc;
  box-shadow: inset 0 0 10px #000;

  // eye
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: block;
    background: red;
    box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red,
      0 0 25px red, 0 0 30px red, 0 0 40px red;
    animation: halpulse 7s infinite;
  }

  // gloss
  &::after {
    content: '';
    position: absolute;
    width: $hal-size;
    height: $hal-size;
    border-radius: $hal-size;
    left: 0;
    top: 0;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.07) 40%,
      rgba(255, 255, 255, 0) 41%
    );
  }
}

@keyframes halpulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}