html, body { height: 100%; width: 100%; margin: 0; text-rendering: optimizeLegibility; font-family: sans-serif; text-align: center; background-image: url('../background.jpg'); background-repeat: no-repeat; background-size: cover; } body { background-position: center; background-attachment: fixed; } #wrapper { height: 92%; display: grid; } #itemlist { display: inline-grid; grid-template-columns: repeat(2, 1fr); margin: auto; } @media only screen and (min-width: 600px) { #itemlist { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 800px) { #itemlist { grid-template-columns: repeat(4, 1fr); } } #itemlist { border-radius: 6px; background-color: rgba(0, 0, 0, .4); font-size: 4em; } #itemlist>* { padding: 15px; margin: 0 auto; } /* link colors */ #itemlist a { color: #fff; } #itemlist a:hover { color: #c4c4c4; } #footer { position: absolute; bottom: 0; width: 100%; } p {color: Cyan;} a { color: LightCyan; }