:root { --highlight-colour: #015a2b; --background-colour: #f1f2f1; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; } body { background-color: var(--background-colour); margin: 0px; min-height: 100vh; display: flex; flex-direction: column; } footer { background-color: var(--highlight-colour); color: var(--background-colour); padding: 16px 8px; margin-top: 30px; } /* navbar */ nav { padding: 0; display: flex; flex-direction: row; } header { background-color: var(--highlight-colour); color: var(--background-colour); display: flex; align-items: center; position: fixed; width: 100%; top: 0; } header a { text-decoration: none; } .image-a { display: flex; } nav a { color: var(--background-colour); padding: 16px 24px; font-weight: bold; } nav a:hover { color: var(--highlight-colour); background-color: var(--background-colour); } header img { height: 36px; width: 36px; margin-bottom: 4px; margin-top: 4px; margin-right: 16px; margin-left: 16px; } #menu-top { display: flex; flex-direction: row; align-items: center; } #navbar-btn { width: 0; height: 0; margin: 0; display: none; } @media screen and (max-width: 700px) { header { flex-wrap: wrap; } header img { height: 40px; margin: 8px 16px; } nav { flex-direction: column; display: flex; transition: max-height 1s ease-out; max-height: 0; overflow: hidden; align-items: stretch; width: 100%; } nav a { width: 100%; } .menu-icon { cursor: pointer; display: flex; justify-content: flex-end; align-items: baseline; padding: 10px 10px; position: relative; user-select: none; visibility: visible; margin-left: auto; } .navicon { background-color: var(--background-colour); display: block; position: relative; width: 18px; height: 2px; } .navicon:before { top: 5px; } .navicon:after { bottom: 5px; } .navicon:before, .navicon:after { background: var(--background-colour); display: block; width: 100%; height: 100%; content: ""; position: absolute; transition: all 0.4s ease-out; } #navbar-btn:checked ~ .menu-icon .navicon { background: transparent; } #navbar-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } #navbar-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } #navbar-btn:checked ~ .menu-icon .navicon:before, #navbar-btn:checked ~ .menu-icon .navicon:after { top: 0; } #navbar-btn:checked ~ nav { max-height: 500px; } } /* end navbar */ h1 { font-size: 40px; line-height: 40px; margin-top: 90px; margin-bottom: 30px; } h2 { margin-top: 40px; font-size: 30px; } h1, h2 { font-family: 'Times New Roman', Times, serif; } .container { display: flex; justify-content: center; } .main { max-width: 700px; padding: 8px; display: flex; flex-direction: column; } .main img { max-width: 100%; } .title { display: flex; align-items: center; padding-top: 60px; } .title img { height: 60px; margin-right: 6px; padding-bottom: 10px; } .spacer { flex-grow: 1; } .action-btn { color: var(--background-colour); background-color: var(--highlight-colour); padding: 20px 100px; text-decoration: none; font-weight: bold; border-radius: 10px; align-self: center; } .action-btn:hover { color: var(--background-colour); background-color: #2d8657; }