body { font-family: monospace; font-size:20px; line-height:1.5; position:relative; color: #fff; background-color:#2e4051; } a { color:#fff; text-decoration: underline 2px dotted white; } a:hover { text-decoration: underline 2px solid white; } :focus { border-bottom: none; outline: 2px dashed white; } .layout { max-width: 1000px; margin: 0 auto 200px; } .big-text-header { font-size: 70px; line-height: 1; text-align: center; display: flex; justify-content: center; } .big-text-header__text { font-size: 1em; padding: 10px; } .layout__left-col { display: flex; flex-direction: column; align-items: center; } .left-nav { min-width: 180px; } .left-nav__categories { padding: 0; margin: 0; list-style-type: none; } .left-nav__category { margin-bottom: 16px; } .left-nav .category-label { padding-left: 16px; } .left-nav__list { font-family: monospace; list-style-type: none; padding: 0; margin: 0; font-size: 20px; line-height: 1; } .left-nav__block { margin: 4px 4px 12px 4px; background-color: #2e2f51; position: relative; border: 2px solid; border-color: #2e2f51; } .left-nav__list-link, .left-nav__list-link:visited { color: #fff; padding: 6px; display: block; } @media screen and (min-width: 800px) { .layout__columns { display: flex; } .layout__left-col { align-items: start; } .left-nav { margin-right: 24px; } }