:root {
    --grey: #282a35;
    --light-grey: #4d4a5a;
    --lighter-grey: #606580;
    --green: #b3db82;
    --blue: #6b72a3;
    --purple: #a99eec;
    --red: #ed6c89;
    --yellow: #f9da78;
    --turq: #43959d;
    --mobile-padding: 10px;
}

@font-face {
    font-family: "FiraCode";
    src: url(firacodenerdfont.ttf);
}

#too-small {
    display: none;
    background-color: var(--grey);
    color: whitesmoke;
    padding: 5px;
    font-size: 10px;
    border: 3px solid var(--light-grey);
}

#screen-width {
    color: red !important;
}

body,
html {
    margin: 0;
    padding: 0;
    margin: 0;
    min-height: 100dvh;
    font-family: "FiraCode";
    font-weight: medium;
}

#container {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100dvh;
}

a {
    color: whitesmoke !important;
    text-decoration: underline dotted whitesmoke 2px;
}

#statusbar {
    background: var(--grey);
    font-size: 90%;
}

#statusleft {
    float: left;
}

#statusright {
    float: right;
}

#statusbar span {
    padding-left: 2px;
    padding-right: 2px;
}

span a {
    text-decoration: none;
}

.separator {
    color: var(--light-grey);
}

#main {
    background-image: url(mt\ taranaki.png);
    background-size: 100vw;
    background-position-y: 50%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px;
}

#left {
    width: 60vw;
}

#kawaii {
    width: 50%;
}

#right {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
}

.window {
    background: var(--grey);
    border: 3px solid var(--light-grey);
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
    font-size: 1.1vw;
    color: whitesmoke;
}

.nf {
    font-size: 1vw;
}

.ascii {
    color: black;
    display: block;
    white-space: pre;
    letter-spacing: 0;
    line-height: 1.4;
    float: right;
    height: 100%;
}

pre {
    margin: 0;
    float: left;
}

.window:hover {
    border: 3px solid var(--lighter-grey);
}

.selected {
    background-color: #353746;
}

.green {
    color: var(--green) !important;
}

.blue {
    color: var(--blue) !important;
}

.purple {
    color: var(--purple) !important;
}

.yellow {
    color: var(--yellow) !important;
}

.red {
    color: var(--red) !important;
}

.white {
    color: lightgrey !important;
}

.blackbg {
    background: black;
}

.redbg {
    background: var(--red);
}

.greenbg {
    background: var(--green);
}

.yellowbg {
    background: var(--yellow);
}

.bluebg {
    background: var(--blue);
}

.purplebg {
    background: var(--purple);
}

.turqbg {
    background: var(--turq);
}

.whitebg {
    background: whitesmoke;
}

@media screen and (max-width: 1050px) {
    #container {
        grid-template-rows: 1fr;
        max-height: 100dvh;
    }

    #statusbar,
    #right {
        display: none;
    }

    #main {
        grid-template-columns: 1fr;
        gap: 0;
        box-sizing: border-box;
        max-height: 100dvh;
        padding: var(--mobile-padding);
    }

    #left,
    .mainwindow {
        width: 100%;
        height: calc(100dvh - calc(2 * var(--mobile-padding)));
        font-size: 12px;
    }

    .mainwindow {
        overflow-y: scroll;
    }

    #kawaii {
        width: 70%; /* optional, looks nicer on phones */
    }
}

@media screen and (orientation: portrait) {
    #main {
        background-size: 100vh;
        background-position-x: 50%;
    }
}

@media screen and (max-width: 295px) {
    #too-small {
        display: block;
    }

    #left {
        display: none;
    }

    .mainwindow {
        display: none;
    }
}