:root{--gray-100:#f0f0f0;--gray-200:#ccc;--gray-900:#212121}*,:after,:before{box-sizing:border-box}html{font-size:16px}body{color:var(--gray-900);margin:0;padding:0}nav{width:100%;position:fixed;top:0;left:0;margin:0 auto;padding:12px;background-color:var(--gray-100);border:1px solid var(--gray-200);ul{display:flex;flex-direction:row;margin:0;padding:0;gap:1rem;list-style:none;list-style-type:none}}footer{width:100%;padding:16px;background-color:var(--gray-100);border:1px solid var(--gray-200)}