main {
    position: relative;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 50fr 20fr 30fr;
    grid-template-rows: 20fr 45fr 30fr;
    row-gap: 1vh;
    column-gap: 1vh;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#computer-controls {
    position: absolute;
    top: 2vh;
    right: 2vh;
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 100%;
    border: none;
    background-color: var(--accent);
    fill: var(--body-text);
    filter: opacity(80%);
    cursor: pointer;
}

#info-icon {
    width: 100%;
    height: 100%;
}

#window-wrapper {
    grid-column: span 2;
    grid-row: span 2;
    padding: 1vw;
}

#window {
    width: 100%;
    height: 100%;
}

#icon-wrapper {
    position: relative;
    width: max-content;
    height: max-content;
}

#window, #matrix-dimensions, #legend, #lcs-information, #edit-operations {
    border: 3px solid var(--accent);
    text-align: center;
    border-radius: 2vw;
    box-sizing: border-box;
}

#nm-spacer {
    display: flex;
    justify-content: space-evenly;
}

#matrix-dimensions, #legend, #lcs-information {
    display: flex;
    flex-direction: column;
    margin: 1vw;
    width: auto;
    height: auto;
    box-sizing: border-box;
    padding: 1vh;
}
#dimension-button, #lcs-button, #operation-button {
    border: none;
    margin: 1vh auto;
    width: 20ch;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

#edit-operations {
    grid-column: span 2;
    display: grid;
    margin: 1vw;
    width: auto;
    height: auto;
    box-sizing: border-box;
    padding: 1vh;
    grid-template-columns: 40% 60%;
    grid-template-rows: max-content max-content max-content;
}

#lcs-information div, #edit-results div {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    width: min-content;
}

#lcs-information div input, #edit-results div input {
    width: 20ch;
}

.two-margin {
    margin-right: 3vh;
}

#legend p {
    padding: 0;
    margin: 0;
}

#gradient-colors {
    display: block;
    width: 90%;
    height: 4vh;
}

#gradient-ticks > span {
    display: block;
    width: 100%;
    height: 100%;
}

#gradient-ticks > span:nth-child(2n + 2) {
    border-left: 3px solid var(--body-text);
}

#gradient-ticks, #gradient-labels {
    width: 100%;
    height: 2vh;
    margin-bottom: min(2vw, 10px);
}
#gradient-labels p {
    width: 100%;
    text-align: center;
}
#gradient-labels {
    margin-bottom: 3vh;
}

#select-color span, #edit-color span {
    margin-top: 1vh;
    display: block;
    width: 80%;
    height: 80%;
    max-width: 80px;
    max-height: 80px;
    aspect-ratio: 1/1;
}
#select-color span {
    background-color: #8e3f29;
}
#edit-color span {
    background-color: #d18952;
}

#legend h5 {
    margin-top: 2vh;
    width: 90%;
}

#mobile-controls {
    position: absolute;
    bottom: 2vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: min-content;
}

#mobile-controls button {
    width: 20vw;
    height: 5vh;
    border: none;
}

input:not(:disabled, :read-only), select {
    cursor: pointer;
}

#control-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    background-color: #000000E0;
}

#control-box {
    width: max-content;
    height: max-content;
    padding-bottom: 2vh;
    padding-left: 5vw;
    padding-right: 5vw;
    background-color: var(--body-background);
    border-radius: 3vh;
    position: relative;
}

#close-x {
    width: 2vw;
    height: 2vw;
    position: absolute;
    top: -2vw;
    right: -2vw;
    fill: #FFFFFF;
    cursor: pointer;
}

.night-mode #close-x {
    fill: #FFFFFF;
}

#control-text-mobile {
    display: none;
}

#control-text-mobile *:not(h2), #control-text-pc *:not(h2) {
    text-align: center;
    border: 2px solid var(--accent);
}

#control-text-mobile td, #control-text-pc td {
    padding: 1vh;
}

#lcs-information, #edit-operations {
    justify-content: flex-start;
}

#lcs-set.center, #new-set.center {
    justify-content: space-around;
    width: 100%;
}

#lcs-set p, #new-set p {
    padding: 1vw;
    background-image: linear-gradient(to bottom right, var(--bright-accent-shine), var(--bright-accent), var(--bright-accent-dull));
}

.no-padding {
    padding: 0;
    margin: 0;
}

#edit-label {
    grid-column: span 2;
}
#edit-selection {
    align-items: end;
}

#edit-selection>div {
    display: flex;
    justify-content: right;
    text-align: end;
}

#edit-operation-results {
    grid-column: span 2;
}

#edit-operations:has(#substitute:checked) #substitution {
    display: initial;
}
#edit-operations:has(#permute:checked) #permutation {
    display: initial;
}
#edit-operations:has(#slice-n-concat:checked) #slice-concat {
    display: initial;
}

#edit-parameters {
    width: 100%;
}
.perm-label {
    width: 6ch;
    text-align: center;
}

@media all and (min-height: 50.00001vw) {
    #mobile-controls {
        display: none;
    }

    #mobile-vertical-warning {
        display: none;
    }
}

@media all and (max-height: 50vw) {
    #mobile-controls {
        display: flex;
    }

    #mobile-vertical-warning {
        display: none;
    }
}

@media all and (max-width: 600px) and (max-width: 50vh) {
    main {
        overflow: hidden;
    }

    #mobile-vertical-warning {
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--body-background);
    }

    #mobile-warning-box {
        width: 80%;
        max-height: 80%;
        aspect-ratio: 1/1;
        background-color: var(--header-background);
        display: grid;
        grid-template-rows: 40% 30% 30%;
        text-align: center;
        padding: 3vh;
    }

    #warning-icon {
        max-width: 50%;
        height: 100%;
        aspect-ratio: 1/1;
        margin: 0 auto;
        fill: none;
    }
    #warning-icon circle {
        fill: #DDDD22;
    }
    #warning-icon path {
        stroke: #DDDD22;
        stroke-width: 2;
        stroke-linejoin: "round";
    }
}