404.html

<script>
  var allposts = [];
  function redirectToCorrectPage() {
  	{% for post in site.pages %}
  		allposts.push("{{ post.url }}".split('.')[0]);
  	{% endfor %}
  	var url = window.location.pathname;
  	// strip trailing /
  	if (url.slice(-1) === "/") {
  		 url = url.slice(0, -1);
  	}
  	var allpostsUpperCase = allposts.map(function(value) {
  	  	// strip trailing /
  	  	if (value.slice(-1) === "/") {
  			     value = value.slice(0, -1);
  	  	}
  		return value.toUpperCase();
  	});
    var i = allpostsUpperCase.indexOf(url.toUpperCase());
    if (i != -1) {
      window.location = allposts[i];
    }
    else {
      var i = allpostsUpperCase.indexOf('/EN' + url.toUpperCase());
      if (i != -1) {
        window.location = allposts[i];
      }
    }
  }
  window.onload = redirectToCorrectPage;
</script>

 <div id="clouds">
            <div class="cloud x1"></div>
            <div class="cloud x1_5"></div>
            <div class="cloud x2"></div>
            <div class="cloud x3"></div>
            <div class="cloud x4"></div>
            <div class="cloud x5"></div>
        </div>
        <div class='c'>
            <div class='_404'>404</div>
            <hr>
            <div class='_1'>THE PAGE</div>
            <div class='_2'>WAS NOT FOUND</div>
            <a class='btn' href='/'>BACK TO L RMN</a>
        </div>

<style>
    @import url(https://fonts.googleapis.com/css?family=opensans:500);

    body {
        background: #232830;
        color:#fff;
        font-family: 'Open Sans', sans-serif;
        min-height: 100% !important;
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
        top: -50px;
    }

    .c {
        text-align: center;
        display: block;
        position: relative;
        margin: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    ._404 {
        font-size: 220px;
        position: relative;
        display: inline-block;
        z-index: 2;
        letter-spacing: 15px;
    }

    ._1 {
        text-align:center;
        display:block;
        position:relative;
        letter-spacing: 12px;
        font-size: 4em;
        line-height: 80%;
    }

    ._2 {
        text-align:center;
        display:block;
        position: relative;
        font-size: 20px;
    }

    .text {
        font-size: 70px;
        text-align: center;
        position: relative;
        display: inline-block;
        margin: 19px 0px 0px 0px;
        /* top: 256.301px; */
        z-index: 3;
        width: 100%;
        line-height: 1.2em;
        display: inline-block;
    }

    .btn {
        background-color: rgb( 255, 255, 255 );
        position: relative;
        display: inline-block;
        width: 358px;
        padding: 5px;
        z-index: 5;
        font-size: 25px;
        margin:0 auto;
        color:#232830;
        text-decoration: none;
        margin-right: 10px;
        border: 2px solid white;
        transition: 0.3s;
    }

    .btn:hover {
        background-color: #232830;
        color: white;
    }

    .right {
        float:right;
        width:60%;
    }

    hr {
        padding: 0;
        border: none;
        border-top: 5px solid #fff;
        color: #fff;
        text-align: center;
        margin: 0px auto;
        width: 420px;
        height:10px;
        z-index: -10;
    }

    hr:after {
        content: "";
        display: inline-block;
        position: relative;
        top: -0.75em;
        font-size: 2em;
        padding: 0 0.2em;
        background: #232830;
    }

    .cloud {
        width: 350px; height: 120px;
        background-image: url("https://i.imgur.com/KOz2fIKt.png");
        background: linear-gradient(top, #FFF 100%);
        background: -webkit-linear-gradient(top, #FFF 100%);
        background: -moz-linear-gradient(top, #FFF 100%);
        background: -ms-linear-gradient(top, #FFF 100%);
        background: -o-linear-gradient(top, #FFF 100%);

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

        position: absolute;
        margin: 120px auto 20px;
        z-index:-1;
        transition: ease 1s;
    }

    .cloud:after, .cloud:before {
        content: '';
        position: absolute;
        background-image: url("https://i.imgur.com/KOz2fIKt.png");
        z-index: -1
    }

    .cloud:after {
        width: 100px; height: 100px;
        top: -50px; left: 50px;

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

    .cloud:before {
        width: 180px; height: 180px;
        top: -90px; right: 50px;

        border-radius: 200px;
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
    }

    .x1 {
        top:-50px;
        left:100px;
        -webkit-transform: scale(0.3);
        -moz-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0.9;
        -webkit-animation: moveclouds 35s linear infinite;
        -moz-animation: moveclouds 35s linear infinite;
        -o-animation: moveclouds 35s linear infinite;
    }

    .x1_5{
        top:-80px;
        left:250px;
        -webkit-transform: scale(0.3);
        -moz-transform: scale(0.3);
        transform: scale(0.3);
        -webkit-animation: moveclouds 47s linear infinite;
        -moz-animation: moveclouds 47s linear infinite;
        -o-animation: moveclouds 47s linear infinite;
    }

    .x2 {
        left: 250px;
        top:30px;
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.6;
        -webkit-animation: moveclouds 55s linear infinite;
        -moz-animation: moveclouds 55s linear infinite;
        -o-animation: moveclouds 55s linear infinite;
    }

    .x3 {
        left: 250px; bottom: -70px;

        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.8;

        -webkit-animation: moveclouds 55s linear infinite;
        -moz-animation: moveclouds 55s linear infinite;
        -o-animation: moveclouds 55s linear infinite;
    }

    .x4 {
        left: 470px; bottom: 20px;

        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        transform: scale(0.75);
        opacity: 0.75;

        -webkit-animation: moveclouds 58s linear infinite;
        -moz-animation: moveclouds 58s linear infinite;
        -o-animation: moveclouds 58s linear infinite;
    }

    .x5 {
        left: 200px; top: 300px;

        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.8;

        -webkit-animation: moveclouds 40s linear infinite;
        -moz-animation: moveclouds 40s linear infinite;
        -o-animation: moveclouds 40s linear infinite;
    }

    @-webkit-keyframes moveclouds {
        0% {margin-left: 100%;}
        100% {margin-left: -100%;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 100%;}
        100% {margin-left: -100%;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 100%;}
        100% {margin-left: -100%;}
    }
</style>