404 Centered

<div class="nuda-err-404c">
  <div class="nuda-err-404c__code">404</div>
  <div class="nuda-err-404c__divider"></div>
  <p class="nuda-err-404c__msg">Page not found</p>
  <p class="nuda-err-404c__sub">The page you're looking for doesn't exist or has been moved.</p>
  <a class="nuda-err-404c__btn" href="#">Go home</a>
</div>

.nuda-err-404c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  text-align: center;
  width: 100%;
  max-width: 260px;
  animation: _nuda-errfade-in .4s ease-out;
}

.nuda-err-404c__code {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #e4ff54;
  line-height: 1;
  font-family: ui-monospace,monospace;
}

.nuda-err-404c__divider {
  width: 32px;
  height: 2px;
  background: rgba(255,255,255,.12);
  margin: 10px 0;
}

.nuda-err-404c__msg {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.nuda-err-404c__sub {
  color: #666;
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 180px;
}

.nuda-err-404c__btn {
  display: inline-block;
  padding: 7px 18px;
  background: #e4ff54;
  color: #09090b;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s,filter .2s;
}

.nuda-err-404c__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

@keyframes _nuda-errfade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-err-404c {
    animation: none;
  }
}