@import url('//fonts.googleapis.com/css?family=Bangers&text=Regxpr'); :root { --color-green: #bada55; --color-brown: #6b6659; --color-tan: #cbcbba; --color-black: #000; --color-white: #fff; --color-red: #b3151a; --header-height: 6rem; --content-margin: 2rem; --spacing-margin: 1rem; } html { font-size: 62.5%; } body { margin: 0 var(--content-margin); padding: 0; font-family: sans-serif; background: var(--color-brown); font-size: 1.6rem; } #main { background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); box-shadow: 0 0 1rem var(--color-black); padding: 0 var(--content-margin); margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin)); position: relative; } #main h1 { font-family: 'Bangers', 'cursive'; font-size: 4rem; font-weight: normal; display: inline-block; margin: 0; line-height: var(--header-height); } #main a { text-decoration: none; display: inline-block; } #main ul { line-height: var(--header-height); position: absolute; top: 0; right: var(--content-margin); } #main li a:hover, #main li a:active { text-decoration: underline; } #main li img { display: inline-block; width: 1em; height: 1em; margin-right: 0.5rem; vertical-align: text-top; } footer { margin: var(--spacing-margin) 0; } footer img { vertical-align: text-top; width: 80px; height: 15px; } a { color: inherit; } ul { list-style: none; margin: 0; padding: 0; } li { list-style-type: none; display: inline-block; } .inline-list li { white-space: nowrap; } .inline-list li:after { content: '//'; padding: 0 0.5rem; } .inline-list li:last-child:after { content: ''; } .message { background: var(--color-tan); padding: var(--spacing-margin); margin: var(--spacing-margin) 0; } .message h2 { margin: var(--spacing-margin) 0; } .message h2 img { margin-right: 0.5rem; height: 3rem; width: 3rem; vertical-align: bottom; } .message p { margin: var(--spacing-margin) 0; }