*{margin:0;padding:0;} .header{ display: flex; justify-content: space-between; background: #001b2d; width: 100%; height: 75px; } .headerStart{ display: flex; align-items:center; text-decoration: none; margin-left: 25px; width: 275px; } .headerStart img{ max-height: 75%; } .headerLogo{ color: white; font-size: 25px; margin-left: 10px; } .mobileHomeButton{ display: none; } .headerEnd{ display: flex; align-items: center; justify-content: flex-end; margin-right: 25px; } .headerEnd > *{ margin-left: 20px; } .headerEnd a{ color: rgb(255, 99, 107); } body{ display: flex; flex-direction: column; align-items: center; } ol{ list-style: decimal inside none; } ol > *{ margin: 10px; } .content{ padding: 50px; width: 75%; } .content > *{ margin: 15px; } /* HELP PAGE */ .helpMenu{ position: fixed; top: 75px; left: 0; padding: 100px 50px; } .helpMenu ul{ list-style-type: none; } .indent{ margin-left: 20px; } .helpContent{ text-align: center; width: 50%; padding: 50px; } .helpContent h2, .helpContent h3, .helpContent h4{ margin: 20px 0; } .helpContent h2{ font-size: 25px; } .helpContent p{ margin: 15px 0; text-align: left; font-size: 20px; } @media screen and (max-width: 1400px){ @media (orientation: portrait){ .helpMenu{ position: static; padding: 0; } .helpContent{ padding: 0; width: 90%; } .helpContent h2, .helpContent h3, .helpContent h4{ text-align: center; } .helpContent p{ text-align: justify; } .content{ width: 90%; } } @media (orientation: landscape){ body{ align-items: flex-end; } .helpMenu{ position: absolute; margin: 0; padding: 10px 25px; width: 25%; } .helpContent{ margin: 0; padding: 10px; width: 65%; } } }