// * {
//     margin: 0;
//     padding: 0;
// }
@import "styles/normalise.scss";

* {
    box-sizing: border-box;
}

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

body {
    font-family: "Segoe UI", sans-serif;
    line-height: 1.35;
    color: #222;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    &::after {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 32px;
        background: linear-gradient(#000, #0000);
        z-index: 10;
    }
}

#root {
    max-width: #{960px + 16px * 2};
    width: 100%;
    padding: 16px;
}

#gap {
    flex-grow: 1;
}

img {
    max-width: 100%;
}

svg {
    transform: translateZ(0);
}

// We can't fit equal margins either side, so try our best
@media (max-width: #{(960px + 16px * 2) + 260px * 2}) {
    body {
        padding-left: 260px;
    }
    #root {
        max-width: #{800px + 16 * 2};
    }
}

// We have no hope of showing the sidebar
@media (max-width: #{(800px + 16px * 2) + 260px * 1}) {
    body {
        padding-left: 0;
    }
    .sidebar {
        display: none;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #e6e6e6;
    }
}

@import "styles/type.scss";
@import "styles/code.scss";
@import "styles/table.scss";
@import "styles/collapse.scss";
@import "styles/footer.scss";
@import "styles/sidebar.scss";
@import "styles/misc.scss";
@import "styles/nav.scss"; // TODO: Get rid of this
@import "styles/part.scss"; // TODO: Get rid of this