.content { justify-content: center; max-height: 100%; } .pointer { align-items: center; justify-content: center; display: flex; height: 100%; width: 10%; max-width: 150px; } .p_left { margin: 5px; height: 40%; width: 100%; clip-path: polygon(100% 0%, 50% 48%, 100% 100%, 50% 100%, 0% 50%, 50% 0); background-color: #A35200; } .p_right { margin: 5px; height: 40%; width: 100%; background-color: #A35200; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%); } .content_wrapper { width: 70%; height: 100%; display: flex; flex-direction: column; } .header { width: 100%; display: flex; justify-content: space-between; font-size: 2em; font-weight: bolder; } .help_content_1 { display: flex; width: 80%; justify-content: space-evenly; margin: 0 auto; } .help_content_1_sub { margin: 10px auto; width: 60%; height: 200px; background-image: url(arrow.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; } .help_content_1_sub>div { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -120%); color: antiquewhite; font-size: 1.5em; margin: auto; } .help_content { overflow: auto; height: 100%; } .boxed { border: 3px #A35200 solid; border-radius: 50px; position: relative; width: 30%; } .boxed:after { content: ""; display: block; padding-bottom: 100%; } .boxed>div { margin: 0; font-size: 1.7em; text-align: center; } .centering { position: relative; } .centering>div { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .help_content_1 { color: antiquewhite; } .help_content_1>div { margin: 10px; } .help_content_2 { display: flex; flex-direction: column; width: 80%; justify-content: space-evenly; margin: 0 auto; } .help_content_2 h2 { margin: 2px 0; margin-top: 20px; } .help_content_2 em { color: #A35200; } .help_content_2 h3 { margin: 5px; color: antiquewhite; } .arrow { width: 20%; background-color: #A35200; clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); font-weight: bolder; font-size: 1.5em; } .arrow>div { text-align: center; } .content_wrapper ul { margin: 10px inherit; color: antiquewhite; font-size: 1.5em; } .content_wrapper li { margin: 10px 10px; } .help_content_1 h2 { color: antiquewhite; margin-top: 2em; font-size: 1.7; } pre { padding: 0; margin-bottom: -20px; } pre code { background-color: #333; border: 1px solid antiquewhite; display: block; padding: 20px; } .commands { font-size: 1.3em; }