html, body {
    height: 100%;
    width: 100%;
}

* {
    transition: all 150ms ease-out;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 2em;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

.margins {
    max-width: 700px;
    width: calc(100% - 48px);
    box-sizing: border-box;
    margin: auto;
    background: #fff;
    padding: 0 0 2em;
}

.language-picker {
    box-sizing: border-box;
    width: min(700px, calc(100% - 48px));
    margin: 0.75rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.language-picker summary {
    cursor: pointer;
}

.language-picker details {
    position: relative;
}

.language-options {
    position: absolute;
    right: 0;
    top: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    box-sizing: border-box;
    width: min(25rem, calc(100vw - 48px));
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #f5f5f5;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 1rem #0002;
    z-index: 2;
}

.language-picker a {
    color: #333;
}

.language-picker a[aria-current="page"] {
    font-weight: 700;
    text-decoration: none;
}

.screenshot-note {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}

h1 {
    font-weight: 800;
    font-size: 4em;
    letter-spacing: -5px;
    line-height: 0.8em;

    span {
        font-weight: 100;
    }

    .logo {
        margin-left: 1rem;
    }
}

.logo {
    display: inline-block;
    width: 2em;
    height: 1.5em;
    background: url(/img/logo2.svg) no-repeat;
    background-size: contain;
    margin-bottom: -0.5em;
}

.logo-small {
    display: inline-block;
    width: 3em;
    height: 3em;
    background: url(/img/logo2-small.svg) no-repeat;
    background-size: contain;
    margin-bottom: 0.25em;
    margin-right: 0.5em;
}

.tldr {
    letter-spacing: -0.25px;
    font-size: 1.25rem;
}

.button {
    border-radius: 1000px;
    padding: 1em 2em;
    display: inline-block;
    text-decoration: none;
    background: #eee;
    outline-color: rgba(220, 220, 220, 0.3);
    color: #000;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.25rem;
    outline-width: 0;
    outline-style: solid;

    &:hover, &:active {
        outline-width: 0.25rem;
    }

    &.windows {
        outline-color: rgba(255, 38, 96, 0.3);
        background: #ff2660;
        color: #fff;
        background-image: url("data:image/svg+xml,%3csvg width='256px' height='257px' viewBox='0 0 256 257' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='rgba(255, 255, 255, 0.99)' d='M0 36.357L104.62 22.11l.045 100.914-104.57.595L0 36.358zm104.57 98.293l.08 101.002L.081 221.275l-.006-87.302 104.494.677zm12.682-114.405L255.968 0v121.74l-138.716 1.1V20.246zM256 135.6l-.033 121.191-138.716-19.578-.194-101.84L256 135.6z'/%3e%3c/svg%3e");
        background-size: 1.25em;
        background-repeat: no-repeat;
        background-position: left 1em top 1em;
        padding-left: 3em;
    }

    &.buy {
        outline-color: rgba(0, 0, 0, 0.3);
        background: #000000;
        color: #fff;
    }
}

.buttons {
    margin: 4rem 0rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    > a + a {
        margin-left: 1rem;
    }

    @media (max-width: 800px) {
        flex-direction: column;

        > a + a {
            margin: 1rem 0 0 0;
        }
    }
}

.foot {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #000;
    }
}

h2, h3 {
    line-height: 1.3;
}

h2 {
    margin-top: 2em;
}

.product-details dt {
    font-weight: 600;
    margin-top: 1em;
}

.product-details dd {
    margin-left: 0;
}

.guide {
    padding-top: 2em;
}

.guide h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.guide li + li {
    margin-top: 0.75em;
}

.guide pre {
    padding: 0.75em 1em;
    background: #f5f5f5;
    overflow-x: auto;
}

.guide code {
    
}

.guide .foot {
    margin-top: 3em;
}

@media (max-width: 480px) {
    h1 {
        font-size: 3em;
        letter-spacing: -3px;
    }
}
code {
    font-family: Consolas, monospace;
    font-size: 0.95em;
    background: #f5f5f5;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
}