.ps-page { display: flex; width: 100vw; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; @media screen and (min-width: 1000px) { pointer-events: none; } @media screen and (min-width: 1200px) { padding: 1vw; flex-direction: row; align-items: flex-start; } &_home { flex-direction: row; flex-wrap: wrap; } &--section { border: 12px solid black; margin-top: 10vh; margin-bottom: 10vh; padding: 5vw; 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; } 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 { font-weight: normal; line-height: 1.75; pre, code { background-color: var(--background-alt); border-radius: 4px; padding: 4px; } } &--link { pointer-events: all; color: var(--foreground); background: white; text-decoration: none; text-align: center; font-weight: 900; font-size: 12rem; line-height: 1em; padding: 0.2vw; margin: 2vw; text-shadow: 0.15vw 0px 0px white; transition: text-shadow 0.1s ease; border: 12px solid black; &:hover { text-shadow: 0.3vw 0px 0px var(--accent); } @media screen and (min-width: 700px) { font-size: 8rem; } @media screen and (min-width: 1000px) { font-size: 4rem; } } }