@import '/base.css';

:root {
    --main-width: 60dvw;
    --list-gap: 0.25em;
    --button-margin: 10%;
}

#logo {
    width: var(--main-img-size);
    border-radius: var(--border-radius);
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);

    padding: var(--section-padding-no-h1);

    overflow-y: auto;
    overflow-x: hidden;
}

main p {
    max-width: 100%;
    overflow-x: auto;
}

.lefttext {
    text-align: left;
    width: fit-content;
    margin-inline: auto;
}

.graytext {
    color: var(--text-dark);
}

.error {
    text-decoration-line: underline;
    text-decoration-color: var(--error);
}

ul {
    list-style: disc inside;
    padding: 0;
    margin: auto;
}

li {
    padding: var(--list-gap) 0;
    max-width: 100%;
    overflow-x: auto;
}

nav {
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);

    padding: var(--section-padding-no-h1);

    overflow-y: auto;
    overflow-x: hidden;
}

nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 var(--button-margin);

    height: var(--button-height);
    padding: 0 1em;
    border: var(--button-border) solid var(--text);
    border-radius: var(--border-radius);
}

@media (min-width: 30em) {
    body #container {
        display: flex;
        align-items: center;

        padding-bottom: 0;
    }

    main {
        padding-bottom: var(--section-bottom-padding);
        min-width: max(20em, 50dvw);
        max-height: var(--section-height-no-h1);
        width: 60vw;
    }

    nav {
        padding-bottom: var(--section-bottom-padding);
        max-height: var(--section-height-no-h1);
        width: calc(100dvw - var(--main-width));
    }
}