:root { --ccp_red: #DE2910; --ccp_yellow: #FFDE00; } html { scroll-behavior: smooth; } a { outline: none !important; font-weight: bold; text-decoration: none; } a:link { color: #1e0aff } a:visited { color: #180cff } a:hover { color: #606; } a:active { color: #900; outline: none; } h1 { font-size: 320%; margin: .5em 0 0 .5em; } h2 { font-weight: bold; font-size: 200%; margin: .5em 0 0 .5em; } h3 { font-weight: normal; text-transform: uppercase; font-size: 150%; letter-spacing: 0.15em; margin: .5em 0 0.8em; } h4 { font-weight: normal; font-size: 150%; letter-spacing: 0.1em; margin: 1.5em 0 0.8em; } h5 { font-weight: normal; font-style: italic; font-size: 150%; margin: 1.5em 0 0.8em; } h6 { font-weight: bold; font-size: 100%; letter-spacing: 0.1em; margin: 1.5em 0 0.8em; } body { font-family: georgia, serif; line-height: 1.6; margin: 0; background: #eeeeee; color: rgb(10, 10, 10); } /* Navigation Bar */ nav { min-width: 70%; padding: 1em 0 1em 0; } nav ul { display: flex; list-style-type: none; margin: 0; padding: 0; } nav ul li { flex: 3; color: var(--ccp_yellow) } nav ul li a { text-align: center; display: block; padding: 1em; background-color: var(--ccp_red); } nav ul li a:link { color: inherit } nav ul li a:active { color: inherit } nav ul li a:visited { color: inherit } nav ul li a:hover { color: inherit } /* Landing Page*/ #landing { display: flex; flex-direction: column; height: 100vh; align-items: center; } #search { position: absolute; top: 50%; left: 50%; transform: translate(-50%); display: flex; gap: 10px } #search * { text-align: center; font-size: xx-large; border-radius: 10px; border: solid black; padding: 5px; } #risk { background-color: white; } #down-arrow { position: absolute; top: calc(100vh - 60px); left: calc(50% - 14px); width: 0; height: 30px; border: 2px solid; border-radius: 2px; } #down-arrow:after { content: " "; position: absolute; top: 12px; left: -10px; width: 16px; height: 16px; border-bottom: 4px solid; border-right: 4px solid; border-radius: 4px; transform: rotateZ(45deg); } #down-arrow:link { color: black } #down-arrow:active { color: black } #down-arrow:visited { color: black } #down-arrow:hover { color: black } /* Text */ #text { display: flex; flex-flow: column wrap; max-width: 60em; margin-right: auto; margin-left: auto; font-size: 150%; } #text h3 { text-align: center; }