.tb-404-page{
  padding:36px;

  background:rgb(var(--tb-color3));
  color:rgb(var(--tb-color1));
}

.tb-404-hero{
  text-align:center;
  margin-bottom:80px;
}

.tb-404-big{
  font-size:120px;
  font-weight:900;

  opacity:.06;

  margin-bottom:10px;

  color:rgb(var(--tb-color1));
}

.tb-404-hero h1{
  font-size:36px;
  font-weight:900;

  color:rgb(var(--tb-color1));
}

.tb-404-hero p{
  margin-top:10px;

  color:rgb(var(--tb-color2));
}

.tb-404-actions{
  margin-top:30px;

  display:flex;
  justify-content:center;

  gap:20px;
}


/* =========================================
   PRIMARY BUTTON
========================================= */

.tb-btn-primary{

  background:rgb(var(--tb-color1));

  color:rgb(var(--tb-color3));

  padding:12px 24px;

  border-radius:999px;

  font-weight:700;

  text-decoration:none;

  border:1px solid rgb(var(--tb-color1));

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;

}

.tb-btn-primary:hover{
  transform:translateY(-2px);
}


/* =========================================
   SECONDARY BUTTON
========================================= */

.tb-btn-secondary{

  background:rgb(var(--tb-color4));

  color:rgb(var(--tb-color1));

  padding:12px 24px;

  border-radius:999px;

  font-weight:600;

  text-decoration:none;

  border:1px solid rgb(var(--tb-color1) / .08);

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;

}

.tb-btn-secondary:hover{
  transform:translateY(-2px);
}