:root{--black:#1a1a1a;--white:#dadada;--red:#a80000;--app-width:1200px}*{box-sizing:border-box}a{text-decoration:none}.body-width{width:min(100%,var(--app-width))}body.theme-dark{--bg-color:var(--black);--txt-color:var(--white)}body.theme-light{--bg-color:var(--white);--txt-color:var(--black)}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--txt-color)}#root{width:100vw;min-height:100vh;min-height:100dvh;justify-items:center;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-row-gap:1em;row-gap:1em;background-color:#ff0}#root>header{margin-top:1em;display:flex;align-items:center}#root>header nav{margin-inline:.5em}#root>header nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:2em}#root>header nav ul li{margin:0;padding:0}#root>header nav ul li a{display:flex;align-items:center;justify-content:flex-start;gap:.4em;font-size:1.2em;text-transform:uppercase;transition:color .5s;color:var(--black)}#root>header nav ul li a span{font-size:1.2em}#root>header nav ul li a:hover{color:var(--red)}#root>header nav ul li a:hover span{animation:navHoverEffect .3s ease-in-out 0s infinite}#root>main{background-color:blue}#root>footer{background-color:green;justify-self:normal}@keyframes navHoverEffect{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}to{transform:rotate(0deg)}}