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, .07) 0%,
            rgba(255, 255, 255, .07) 40%,
            rgba(255, 255, 255, 0) 41%
        );
    }
}

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

    50% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}