body { font-family: arial, helvetica, sans-serif; --dark-grey: rgba(80, 80, 80, 1); --dark-accent: rgba(100, 100, 100, 1); --medium-grey: rgba(120, 120, 120, 1); --light-accent: rgba(150, 150, 150, 1); --light-grey: rgba(180, 180, 180, 1); --red-accent: rgba(167, 7, 7, 1); --transparent: rgba(0, 0, 0, 0); background-color: var(--light-grey); } button { background-color: var(--light-accent); border: none; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; border-radius: 1em; vertical-align: center; outline: none; cursor: pointer; box-shadow: 0 2px var(--dark-grey); } button:active { transform: translateY(2px); box-shadow: 0 0; } input { background-color: white; border: none; padding: 1em; border-radius: 1em; outline: none; } hr { border: 1px solid var(--light-grey); } a { text-decoration: none; color: black; } a:visited { color: var(--dark-grey); } #header { position: fixed; width: 100%; height: 5em; top: 0%; left: 0%; background-color: var(--medium-grey); z-index: 100; overflow: hidden; } #header #home { position: relative; height: 40%; top: 30%; left: 2em; } #header #search_bar { position: absolute; background-color: white; border: none; padding: 1em; border-radius: 1em; width: 50%; height: 50%; top: 30%; left: 10em; } #header #search_button { position: absolute; height: 50%; top: 30%; left: calc(10em + 50% + 1em); } #header #logo { position: absolute; height: 180%; right: 5%; top: 5%; } #content { position: absolute; width: 80%; height: auto; left: 10%; top: 5em; bottom: 0em; } .tag { border: 1px solid black; background-color: var(--light-accent); padding: 4px; margin: 1px; border-radius: 5px; } @media only screen and (max-width: 800px){ #content { width: 800px; left: 0; } #logo { visibility: hidden; } } #content #footer { position: relative; height: 10em; }