body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; display: flex; flex-direction: column; min-height: 100vh; align-items: center; background-color: #b9b9b9; width: 100%; } header #top { background-image: url(/assets/bambus.jpg); color: #fff; text-shadow: #363636 5px 4px; padding: 20px; text-align: center; } header { flex-direction: column; } header > * { width: 100%; } header nav { display: flex; align-items: center; flex-grow: 1; background-color: #444444b7; padding: 10px; text-align: center; } header nav > * { display: flex; align-items: center; flex-direction: row; list-style: none; padding: 0; justify-content: center; width: 100%; margin: 0 10px; } header nav > *, header nav > .dropdown > *, header nav > .dropdown > .dropdown-content > * { color: #dfd07a !important; text-decoration: none; white-space: nowrap; width: fit-content; } header nav p, header nav a { text-decoration: none; } nav a:hover { color: rgb(189, 189, 42); } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #585a59; min-width: 100px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #363636; } section { padding: 20px; } footer { background-color: #333333c7; color: #fff; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; } footer, header { text-align: center; padding: 10px 0; display: flex; align-items: center; width: 100%; } footer > * { display: inline; flex: 1; } main { display: flex; flex-grow: 1; align-items: center; flex-direction: column; } h1, h2, h3, h4, h5, h6 { text-align: center; }