:root{
  --ink:#000000;
  --paper:#ffffff;
  --shadow:#000000;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:#fff;
  color:#000;
  font-family: Arial, Helvetica, sans-serif;
}

.wrap{
  max-width:980px;
  margin:32px auto 56px;
  padding:0 16px;
}

.title{
  font-family:"Luckiest Guy", system-ui, sans-serif;
  text-align:center;
  font-size:56px;
  letter-spacing:1px;
  margin:8px 0 18px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}

@media (max-width:720px){
  .grid{grid-template-columns:1fr; gap:28px}
}

h2{
  font-family:"Luckiest Guy", system-ui, sans-serif;
  margin:0 0 14px;
  font-size:44px;
  letter-spacing:1px;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.btn{
  display:block;
  text-decoration:none;
  text-align:center;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:18px 20px;
  border-radius:16px;
  font-weight:900;
  letter-spacing:.5px;
  position:relative;
  box-shadow:0 6px 0 var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 0 var(--shadow);
}

.btn:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--shadow);
}

footer{
  margin:28px auto 40px;
  text-align:center;
  color:#666;
  font-size:12px;
}