.ps-page { display: flex; width: 100vw; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; @media screen and (min-width: 1200px) { padding: 1vw; flex-direction: row; align-items: flex-start; } &_home { flex-direction: row; flex-wrap: wrap; } &--header { width: 100%; top: 0; left: 0; right: 0; height: auto; position: fixed; } &--section { border: 12px solid black; margin-top: 2rem; margin-bottom: 2rem; max-width: 700px; flex-basis: 100%; font-size: 16px; flex-shrink: 1; pointer-events: all; color: var(--foreground); background: white; word-break: break-word; @media screen and (min-width: 1200px) { margin: 1vw; } &_home { padding: 5vw; } &_full { max-width: unset; width: calc(100% - 8rem); margin: 4rem; min-height: calc(100vh - 8rem); } a { color: var(--accent); border-bottom: 1px solid white; transition: border-bottom 0.1s ease; text-decoration: none; &:hover { border-bottom: 4px solid var(--accent); } } img { width: 230px; margin-top: 1rem; } } &--section-link { position: sticky; top: 0; background-color: var(--background); padding: 1rem; display: flex; justify-content: flex-end; align-items: center; text-align: right; padding-left: 132px; @media screen and (min-width: 1200px) { display: none; border-bottom: 0; } &-icon { margin-left: 8px; } } &--section-contents { margin: 2rem; margin-bottom: 0; font-weight: 500; line-height: 1.4; &:last-child { margin-bottom: 5vw; } pre, code { background-color: var(--background-alt); border-radius: 4px; padding: 4px; } > * { margin-bottom: 0; margin-top: 8px; } > h1, h2 { margin-top: 32px; line-height: 1.5; } } }