<div class="page" data-dark="true">
  <div class="container">
    <div class="navbar">
      <div class="logo">
        <img
          src="https://s3.amazonaws.com/skriper.dev/cdn/Rocket.png"
          alt="logo"
        />
      </div>
      <div class="links">
        <a href="#about">About</a>
        <a href="#pricing">Pricing</a>
        <a href="#customers">Customers</a>
        <a href="#login" class="action">Login</a>
      </div>
    </div>
    <div class="content-404">
      <div class="title">
        <h1>Page not found</h1>
        <h2>Lost in space</h2>
        <strong
          >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </strong>
      </div>
      <img
        class="image"
        src="https://s3.amazonaws.com/skriper.dev/cdn/astronaut.png"
      />
    </div>
  </div>
</div>

[data-dark="true"] {
  --text-color: #fff;
  --main-color: #6532e1;
  --bg-color: #020113;
}

[data-dark="false"] {
  --text-color: #0f0f0f;
  --main-color: #6532e1;
  --bg-color: #fafafa;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}
body {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
  height: 100%;
}
.container {
  width: 100%;
  padding: 40px;
  max-width: 1000px;
  position: relative;
  z-index: 1;
}
.page {
  color: var(--text-color);
  position: relative;
  background: var(--bg-color);
  height: 100%;
}
.page .navbar {
  display: flex;
  padding: 20px;
  align-items: center;
}
.page .navbar .logo {
  width: 32px;
  line-height: 32px;
  position: relative;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.page .navbar .logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0px 10px 4px rgba(0, 0, 0, 0.1));
}
.page .navbar .links {
  display: flex;
  margin-left: auto;
}
.page .navbar .links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 32px;
  color: var(--text-color);
  border-radius: 2px;
  font-size: 13px;
}
.page .navbar .links a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.page .navbar .links a.action {
  background: var(--main-color);
  color: #fff;
  margin-left: 25px;
}
.page .navbar .links a.action:hover {
  box-shadow: 0px 10px 20px rgba(150, 46, 255, 0.2);
}
.page .image {
  width: 200px;
  z-index: 0;
  filter: drop-shadow(30px 10px 4px rgba(0, 0, 0, 0.1));
  animation: float 6s ease-in-out infinite;
}

.page .content-404 {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page .content-404 .title {
  padding-right: 20px;
}
.page .content-404 .title h1 {
  font-weight: bold;
  font-size: 40px;
}
.page .content-404 .title h2 {
  font-weight: bold;
  font-size: 25px;
}
.page .content-404 .title strong {
  font-weight: normal;
  font-size: 16px;
  opacity: 0.7;
}
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
@media screen and (max-width: 600px) {
  .page .content-404 {
    flex-direction: column;
  }
  .page .image {
    padding-top: 100px;
  }
}

// JS