*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html{height:100%;}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Arial, Helvetica, sans-serif;
  background:#222;
  color:#fff;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.02em;
}

.container{width:90%;max-width:900px;margin:auto;}

main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 0;
}

.header-inner{text-align:center;padding:20px 0;letter-spacing:.05em;}
h1{font-size:3rem;font-weight:600;letter-spacing:.05em;}
h2{font-size:1.4rem;font-weight:500;}
p{max-width:65ch;margin:auto;text-align:center;font-size:.95rem;}

a{color:cyan;text-decoration:underline;text-decoration-color:white;text-underline-offset:2px;}
a:hover{color:white;}
a:active{color:cyan;}

r{color:red;} g{color:green;} b{color:blue;} v{color:fuchsia;}

footer{padding:40px 0;font-size:.9rem;color:#fff;}
.footer-inner{width:90%;max-width:900px;margin:auto;text-align:center;}
.footer-column{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:20px 0;}
.footer-col{white-space:nowrap;font-weight:500;}

@media (max-width:768px){
  h1{font-size:2.2rem;}
}