html,
body {

width: 100%;
height: 100%;

margin: 0;
padding: 0;


}

body {

overflow: hidden;

background: #000;

color: #d8d4c8;

font-family:
    "Courier New",
    Courier,
    monospace;

font-size: 12px;


}

/* =========================
RAIN
========================= */

.rain {

position: absolute;

top: 0;
left: 0;

width: 100%;
height: 100%;

pointer-events: none;


}

.rain.back-row {

display: block;

z-index: 1;

bottom: 60px;

opacity: 0.5;


}

.rain.front-row {

z-index: 2;


}

.drop {

position: absolute;

bottom: 100%;

width: 15px;
height: 120px;

pointer-events: none;

animation:
    drop 0.5s linear infinite;


}

@keyframes drop {

0% {
    transform: translateY(0vh);
}

75% {
    transform: translateY(90vh);
}

100% {
    transform: translateY(90vh);
}


}

.stem {

width: 1px;

height: 60%;

margin-left: 7px;

background:
    linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.25)
    );

animation:
    stem 0.5s linear infinite;


}

@keyframes stem {

0% {
    opacity: 1;
}

65% {
    opacity: 1;
}

75% {
    opacity: 0;
}

100% {
    opacity: 0;
}


}

.splat {

display: block;

width: 15px;
height: 10px;

border-top:
    2px dotted
    rgba(255, 255, 255, 0.5);

border-radius: 50%;

opacity: 1;

transform: scale(0);

animation:
    splat 0.5s linear infinite;


}

@keyframes splat {

0% {

    opacity: 1;

    transform: scale(0);

}

80% {

    opacity: 1;

    transform: scale(0);

}

90% {

    opacity: 0.5;

    transform: scale(1);

}

100% {

    opacity: 0;

    transform: scale(1.5);

}


}

/* =========================
404 CONTENT
========================= */

.error-page {

position: absolute;

top: 50%;
left: 50%;

transform:
    translate(-50%, -50%);

z-index: 10;

width: 100%;

text-align: center;


}

.error-text {

display: flex;

flex-direction: column;

align-items: center;


}

/* 404 */

.error-text h1 {

margin: 0 0 18px 0;

color: #ffffff;

font-size: 36px;

font-weight: normal;

letter-spacing: 6px;

line-height: 1;


}

/* it's empty */

.error-text h2 {

margin: 0 0 15px 0;

color: #ffffff;

font-size: 13px;

font-weight: normal;

letter-spacing: 1px;


}

/* description */

.error-text p {

margin: 5px 0;

color: #888888;

font-size: 10px;

line-height: 1.8;

letter-spacing: 0.3px;


}

/* home */

.home-link {

margin-top: 20px;

color: #aaaaaa;

font-size: 10px;

letter-spacing: 1px;

text-decoration: none;

opacity: 0.85;

transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    opacity 0.25s ease;


}

.home-link:hover {

color: #ffffff;

opacity: 1;

text-shadow:
    0 0 4px #ffffff,
    0 0 8px #d8d4c8,
    0 0 14px #d8d4c8;


}

/* =========================
MOBILE
========================= */

@media (max-width: 700px) {

body {

    overflow: hidden;

}


.error-text h1 {

    font-size: 30px;

    letter-spacing: 5px;

}


.error-text h2 {

    font-size: 12px;

}


.error-text p {

    font-size: 9px;

}


.home-link {

    font-size: 9px;

}


}