:root{
  --fg:#111;
  --muted:#6b7280;
  --btn-bg:#111;
  --btn-fg:#fff;
  --btn-bg-hover:#000;
  --radius:12px;
}

*{box-sizing:border-box; margin: 0; padding: 0;}

html,body{height:100%}

.error404{
	height: 100%;
  display:grid;
  place-items:center;
  padding:6rem 1rem;
}

.error404__inner{
  text-align:center;
  max-width:720px;
  width:100%;
  margin-inline:auto;
}

.error404__code{
  font-weight:800;
  letter-spacing:0.02em;
  margin:0 0 1rem;
  font-size:clamp(56px, 10vw, 96px);
}

.error404__title{
  margin:0 0 .75rem;
  font-weight:700;
  font-size:clamp(22px, 3.2vw, 36px);
}

.error404__desc{
  margin:0 0 2rem;
  color:var(--muted);
  font-size:clamp(14px, 1.6vw, 18px);
}

.error404__btn{
  display:inline-block;
  padding:.9rem 1.4rem;
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--btn-fg);
  text-decoration:none;
  font-weight:700;
  line-height:1;
  transition:transform .12s ease, background-color .12s ease;
}

.error404__btn:active{transform:translateY(0)}
.error404__btn:focus-visible{
  outline:3px solid #94a3b8;
  outline-offset:3px;
}