:root { --background-color: #193360; --nav-background-color: #14284c; --logo-background-color: #0e1e38; } * { box-sizing: border-box; word-wrap: break-word; } html, body { padding: 0; margin: 0; background-color: var(--background-color); color: white; font-family: sans-serif; line-height: 150%; } a { color: #22bb22 !important; text-decoration: none; } a:hover { text-decoration: underline; cursor: pointer; } a:visited { color: #bb66ff !important; } a.imgLink div { position: relative; text-align: center; color: white; } a.imgLink:hover { text-decoration: none; } a.imgLink div { position: relative; text-align: center; color: white !important; font-size: 0; transform: scale(1); transition: transform .5s; text-shadow: 2px 2px black; } a.imgLink:hover div { font-size: 200%; transform: scale(.9); transition: font-size .5s, transform .5s; } a.imgLink div h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); } header { background-color: var(--logo-background-color); padding: 0 !important; } header a#navToggle { color: white !important; font-size: 64px; display: none; background-color: var(--nav-background-color); padding: 20px 100px 20px 0; text-decoration: none !important; text-align: right; } nav { padding: 10px 0 10px 0; background-color: var(--nav-background-color); } nav ul { list-style: none; text-align: center; } nav ul li { display: inline-block; padding: 0 2vw 0 2vw; font-size: 125%; } nav ul li a { color: white !important; text-decoration: none; } nav ul li a.active { text-decoration: underline; text-decoration-style: double; } nav ul li a:visited { color: white !important; } header { text-align: center; padding: 10px 0 0 0; } header img { max-width: 200px; max-height: 200px; width: 90vw; margin-bottom: 10px; } main { max-width: 950px; min-height: 100vh; height: auto; width: 90%; margin: auto; padding: 10px 0 0 0; } footer { background-color: var(--nav-background-color); height: 100px; } iframe.osm { width: 500px; height: 500px; max-width: 90vw; max-height: 90vw; margin: auto; display: block; } div.newBanner { display: block; position: fixed; top: 30px; left: -40px; background-color: #DD0000; text-align: center; transform: rotateZ(-45deg); transition: transform .5s; z-index: 1; } div.newBanner:hover { transform: rotateZ(-45deg) scale(1.4); transition: transform .5s; } div.newBanner a { color: white !important; padding: 100px 50px 100px 50px; } div.newBanner a:hover { text-decoration: none; } h3.topic { margin-bottom: 0; } p.topic { margin-top: 0; } a.red-text { color: #DD0000 !important; } a.green-text { color: #00DD00 !important; } .text-left { text-align: left; } @media only screen and (max-width: 885px) { header a#navToggle { display: block; } header nav { display: none; } nav ul li { display: block; font-size: 200%; padding: 30px 100px 30px 0; text-align: right; } a.imgLink div { font-size: 200%; } }