html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    user-select: none;

    font-family: "Noto Sans", sans-serif;
}

main {
    position: relative;

    height: 100%;

    display: flex;
    flex-direction: column;

    background-color: #272737;

    > * {
        max-width: 100%;
    }

    > #top-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;

        padding: 0px 10px;
        height: 50px;

        > .right {
            margin: 4px;
            margin-left: auto;

            display: flex;
            flex-direction: column;
            align-items: center;

            > h1 {
                color: white;
                margin: 0px;
                font-size: 20px;
            }

            > div {
                color: white;
                font-size: 10px;

                > a {
                    color: white;
                }
            }
        }

        > select, > input {
            padding: 3px;
            max-width: 30%;
        }

        input#function-input {
            width: 300px;
        }
    }

    > #code-editors {
        flex: 1 1 auto;

        padding-top: 0px;
        padding: 5px;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        > #assembly { width: 800px; }
        > #pseudocode { flex: 1 1 auto; }

        > div.pane {
            height: 100%;
            min-width: 0;
            min-height: 0;

            border-radius: 15px;
        }

        > #resize-bar {
            width: 10px;
            cursor: ew-resize;
        }
    }

    > #http-cat-image {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;

        width: 700px;
        max-width: 80%;

        border-radius: 10px;
    }
}

div#search-overlay {
    position: fixed;

    display: flex;
    flex-direction: column;
    gap: 1px;

    background-color: #23232e5d;
    backdrop-filter: blur(60px);
    border-radius: 20px;
    padding: 15px;

    height: 700px;
    max-height: 80%;
    overflow-y: scroll;

    > div {
        color: white;
        cursor: pointer;
    }
}

@media (max-width: 700px) {
    /* mobile */

    main > #code-editors {
        flex-direction: column;

        > #resize-bar {
            display: none;
        }

        > div.pane {
            width: 100% !important;
        }

        > #assembly {
            height: 20%;
        }
    }
}