@import url("./title.css");
@import url("./editor.css");
@import url("./input-output.css");
@import url("./modal.css");

@font-face {
    font-family: "syne-mono";
    src: url("./fonts/Syne_Mono/SyneMono-Regular.ttf");
}

html, body {
    background-color: rgb(20 20 20);
    color: rgb(230 230 230);
    font-family: "syne-mono";
    user-select: none;
    position: fixed;
    width: 100%;
    padding: 0;
    margin: 0;
}

.border, .border-left-only, .border-right-only  {
    border: 0.2rem solid rgb(200, 200, 200);
    border-radius: 0.5rem;
    box-sizing: border-box;

    &.border-left-only {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-right: none;
    }

    &.border-right-only {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
}

.container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    min-width: 17.5rem;
    height: 100dvh;
    width: 100dvw;
    gap: 1.25rem;

    @media (min-width: 55rem) {
        flex-direction: row;
    }
}