<!-- By Lorenzo Satta Chiris -->

<section></section>
<div class="container">
  <h1 class="h1" id="firstH1">404</h1>
  <h1 class="h1 wave">404</h1>
</div>

<div id="background-wrap">
  <div class="x1">
    <div class="cloud"></div>
  </div>

  <div class="x2">
    <div class="cloud"></div>
  </div>

  <div class="x3">
    <div class="cloud"></div>
  </div>

  <div class="x4">
    <div class="cloud"></div>
  </div>

  <div class="x5">
    <div class="cloud"></div>
  </div>
</div>

<div class="container2">
  <span>Page not Found</span>
  <span class="drop"></span>
</div>

<svg>
  <defs>
    <filter id="gooey">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -20" result="gooey" />
      <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
    </filter>
  </defs>
</svg>

<button class="button"><a href="https://codepen.io/DevLorenzo" target="_blank">Return Home</a></button>
/* Style */

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #22c5ff;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
}

.h1 {
  font-size: 150px;
  color: #d4f1f9;
  margin-top: 0px;
}

.h2 {
  font-size: 60px;
  color: blue;
  margin-top: -10px;
}

/* clouds */

#background-wrap {
  bottom: 0;
  left: 0;
  padding-top: 50px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

/* ANIMATIONS */

.x1 {
  -webkit-animation: animateCloud 35s linear infinite;
  -moz-animation: animateCloud 35s linear infinite;
  animation: animateCloud 35s linear infinite;

  -webkit-transform: scale(0.65);
  -moz-transform: scale(0.65);
  transform: scale(0.65);
}

.x2 {
  -webkit-animation: animateCloud 20s linear infinite;
  -moz-animation: animateCloud 20s linear infinite;
  animation: animateCloud 20s linear infinite;

  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x3 {
  -webkit-animation: animateCloud 30s linear infinite;
  -moz-animation: animateCloud 30s linear infinite;
  animation: animateCloud 30s linear infinite;

  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.x4 {
  -webkit-animation: animateCloud 18s linear infinite;
  -moz-animation: animateCloud 18s linear infinite;
  animation: animateCloud 18s linear infinite;

  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}

.x5 {
  -webkit-animation: animateCloud 25s linear infinite;
  -moz-animation: animateCloud 25s linear infinite;
  animation: animateCloud 25s linear infinite;

  -webkit-transform: scale(0.55);
  -moz-transform: scale(0.55);
  transform: scale(0.55);
}

/* OBJECTS */

.cloud {
  background: #fff;
  background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(5%, #fff),
    color-stop(100%, #f1f1f1)
  );
  background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );

  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud:after {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}

/* Wave text fill */

.wave {
  background-image: url("https://webdevtrick.com/wp-content/uploads/water-wave-blue.png");
  -moz-background-clip: text;
  -o-background-clip: text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0px 0px rgba(0, 0, 0, 0.3);
  animation: wave-animation 1s infinite linear,
    loading-animation 12s forwards linear alternate;
  background-size: 200px 100px;
  background-repeat: repeat-x;
  opacity: 1;
}

.h1 + .h1 {
  margin-top: -270px;
}

@keyframes wave-animation {
  0% {
    background-position: 0 bottom;
  }
  45% {
    background-position: 100px bottom;
  }
  55% {
    background-position: 100px bottom;
  }
  100% {
    background-position: 200px bottom;
  }
}
@keyframes loading-animation {
  0% {
    background-size: 200px 0px;
  }
  100% {
    background-size: 200px 200px;
  }
}
@media (max-width: 765px) {
  .loading,
  .loading2 {
    font-size: 50pt;
  }
}

@import url("https://fonts.googleapis.com/css?family=Poppins:900&display=swap");

:root {
  --blue: #0a2bc5;
  --yellow: #ffcc2f;
}

.container2 {
  font-family: "Poppins", sans-serif;
  filter: url("#gooey");
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
}

.liquid-1 {
  position: relative;
}

span {
  letter-spacing: 10px;
  font-size: 8rem;
}

.drop {
  position: absolute;
  background: var(--yellow);
  width: 22px;
  height: 22px;
  border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;
  animation: 8s move ease infinite;
}

.drop:after {
  width: 17px;
  height: 17px;
  content: "";
  position: absolute;
  background: var(--yellow);
  border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;
  left: 25px;
  top: 3px;
  animation: 6s drop_effect ease infinite;
}

svg {
  position: absolute;
}

@keyframes move {
  0%,
  100% {
    transform: translate(560px);
  }

  50% {
    transform: translate(-570px);
  }
}

@keyframes drop_effect {
  0% {
    left: 0px;
  }
  5% {
    left: 35px;
  }
  45% {
    left: 0px;
  }
  50% {
    left: 0px;
  }
  55% {
    left: -30px;
  }
  95% {
    left: 0px;
  }
  100% {
    left: 0px;
  }
}

/* Button */

@import url("https://fonts.googleapis.com/css?family=VT323");

* {
  box-sizing: border-box;
}

.button {
  text-decoration: none;
  max-width: 2200px;
  max-height: 100px;
  flex: 1;
  padding: 25px 50px;
  margin: 25px;
  border-radius: 999px;
  border: 5px solid blue;
  font-family: "VT323", monospace;
  font-size: 25px;
  text-shadow: 0 3px 5px rgba(#000, 0.35);
  white-space: nowrap;
  color: #fff;
  background: transparent;
}

// Make it rain

section {
  width: 100%;
  height: 100vh;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
  animation: rain 0.5s linear infinite;
  opacity: 0;
}

@keyframes rain {
  0% {
    background-position: 0 0;
    opacity: 1;
  }

  100% {
    background-position: 10% 60%;
    opacity: 1;
  }
}
View Compiled
// By Lorenzo Satta Chiris
// https://codepen.io/DevLorenzo

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.