#root{max-width:100svw;margin:0 auto;padding:2rem;text-align:center;font-family:Arial,Helvetica,sans-serif}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}main{position:absolute;top:0;left:0;width:100vw;font-family:Arial,Helvetica,sans-serif}header{width:100%;background-color:#fff;color:#5c5c5c;box-sizing:border-box;display:grid;grid-template-columns:1fr 2fr 1fr;grid-auto-rows:auto;gap:.5rem;padding:1rem}header>div{display:flex;justify-content:center;align-items:center;padding:.5rem;text-align:center;flex-wrap:wrap}header img{height:3rem}.title{font-size:2rem;color:#1a1919}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.main_section{background-color:#68ff81;padding:1rem;color:#5c5c5c}.main_section ul{width:100%;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:0}.main_section li{height:3rem;display:flex;align-items:center;justify-content:center;font-size:.9rem;background-color:#fff;color:#575757;border-radius:.5rem;box-shadow:0 0 5px #000000bf;cursor:pointer;transition:all .2s ease-in-out}.main_section li:hover{background-color:green;color:#fff}@media (max-width: 768px){header{grid-template-columns:1fr;text-align:center}}@media (max-width: 480px){.main_section .title{position:relative;top:auto;left:auto;text-align:center}}footer{width:100%;background-color:#fff;color:#575757;font-weight:700;box-sizing:border-box;height:auto;display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;padding:1rem 0;overflow-wrap:break-word}@media (max-width: 480px){footer{grid-template-columns:1fr;text-align:center}}@media (max-width: 320px){header{grid-template-columns:1fr!important}section{grid-template-columns:1fr!important}}@media (max-width: 480px){header{grid-template-columns:1fr!important}section{grid-template-columns:1fr!important}}