/*  TERMINAL MONOCHROME  */
:root{
  --bg:#000;
  --fg:#808080;          /* grey */
  --grey:#555;
  --radius:0;
  --font:'Courier New',Courier,monospace;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html{
  scroll-behavior:auto;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  line-height:1.4;
  text-shadow:0 0 2px var(--fg);
}
a{
  color:var(--fg);
  text-decoration:underline;
}
a:hover{
  background:var(--fg);
  color:var(--bg);
  text-shadow:none;
}
.btn{
  display:inline-block;
  padding:.4rem .8rem;
  border:1px solid var(--fg);
  background:transparent;
  color:var(--fg);
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  transition:none;
}
.btn:hover{
  background:var(--fg);
  color:var(--bg);
  text-shadow:none;
}

/*  Nav  */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:3rem;
  padding:0 1rem;
  border-bottom:1px solid var(--fg);
  font-weight:bold;
  text-transform:uppercase;
}
nav span{
  display:flex;
  gap:1rem;
  align-items:center;
}

/*  Hero  */
#hero{
  min-height:calc(100vh - 3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
  border:1px solid var(--fg);
  margin:1rem;
  box-shadow:inset 0 0 10px var(--fg);
}
.hero-icon{
  font-size:4rem;
  color:var(--fg);
  text-shadow:0 0 5px var(--fg);
}
#hero h1{
  margin-bottom:1rem;
  font-size:clamp(2rem,5vw,3rem);
  text-transform:uppercase;
  letter-spacing:2px;
}
#hero p{
  margin-bottom:1.5rem;
  font-size:1.1rem;
  opacity:.9;
}
#hero strong{
  display:block;
  margin-bottom:2rem;
  font-size:1rem;
  opacity:.8;
}
#hero .social{
  display:flex;
  gap:1rem;
  justify-content:center;
}

/*  Footer  */
footer{
  text-align:center;
  padding:1.5rem 0;
  font-size:.8rem;
  opacity:.7;
  border-top:1px solid var(--grey);
}