body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; --theme-accent: rgb(77, 3, 3); --theme-accent2: rgb(255, 226, 158); --theme-primary: white; --theme-secondary: black; max-width: 100vw; } header { background-color: var(--theme-accent); color: var(--theme-primary); display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; align-items: center; font-weight: bolder; font-size: 18px; font-family: Arial, Helvetica, sans-serif; padding-bottom: 0.5rem; } a { color: var(--theme-accent); } header a { color: var(--theme-accent2); } header>* { margin-left: 0.25rem; margin-right: 0.25rem; } header nav { display: flex; flex-direction: row; align-items: center; } header nav>* { margin-left: 1rem; margin-right: 1rem; } main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; } main article { min-width: 80vw; width: 95vw; max-width: 60rem; font-size: 20px; line-height: 24px; } article { margin-top: 1rem; margin-bottom: 1rem; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; font-family: Verdana, Geneva, Tahoma, sans-serif; width: 70rem; font-size: 26px; line-height: 36px; max-width: 90vw; } article h3, section h3, article h4, section h4, article h5, article p { width: 100%; text-align: left; margin: 15px; } article ul, article ol, article blockquote { width: 90%; margin-top: 5px; } article table {} main article h1 { width: 100%; text-align: center; } footer { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; color: var(--theme-primary); background-color: var(--theme-accent); } footer a { color: white; } hr { color: var(--theme-accent); margin-top: 0.5rem; margin-bottom: 0.5rem; width: 100%; } table { border-collapse: collapse; } th { background-color: var(--theme-accent); color: var(--theme-primary); } th, td { border: 1px solid var(--theme-accent); padding: 5px; } blockquote { border-left: 10px solid var(--theme-accent); padding-left: 5px; }