body{color:#222;font-family:sans-serif;background-color:#f8f8ff;margin:0}header{color:#fff;margin-bottom:1rem;background-color:gray;padding:.3rem;padding-left:1rem}header>nav>ul{display:flex;flex-direction:row;gap:1rem;list-style-type:none}header>nav>ul>li>a{color:#fff;transition:color .15s ease-in-out}header>nav>ul>li>a:hover{color:#ddd}main{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem;padding:1rem}main>p,main>h1,main>ul{margin:0;width:100%}main>section{width:12rem;height:10rem;padding:0}main>section>a{padding:0}main>section>a>button{border-width:.1rem;border-style:solid;border-radius:.5rem;border-color:#000;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s ease-in-out;color:#000;text-decoration:none;background-color:#d3d3d3;text-align:center;padding:.5rem;z-index:-100}main>section>a>button:hover{background-color:#dedede;cursor:pointer}main>section>a>button>h2{}main>section>a>button>p{text-align:left}footer{margin-top:1rem}a{color:#00e;text-decoration:none}