rye/krye.io

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
}

:root {
    --section-padding: 1em;
    --section-left-padding: var(--section-padding);
    --section-right-padding: var(--section-padding);
}

a,
a:visited {
    color: inherit;
}

@media screen and (min-width: 768px) {
    body > * {
        margin: auto;
        padding: var(--section-padding) calc((100vw - 768px) / 2 + var(--section-right-padding)) var(--section-padding) calc((100vw - 768px) / 2 + var(--section-left-padding));
    }
}

@media screen and (max-width: 768px) {
    body > * {
        padding: var(--section-padding) var(--section-right-padding) var(--section-padding) var(--section-left-padding);
    }
}