.title {
    text-align: center;
    margin-top: 1rem;
    h1 {
        margin: 0;
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
    h2 {
        margin: 0;
        font-size: 1.25rem;
        font-size: 1.25rem;
    }
}

.content {
    margin: auto;
    display: flex;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    > div {
        flex: 1;
    }
    .code-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        > div {
            margin-top: 1rem;
            width: 80%;
        }
    }
    .controls {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 12px;
    }
    @media screen and (max-width: 1280px) {
        flex-direction: column;
        .code-container {
            margin-bottom: 1.5rem;
        }
    }
    @media screen and (max-width: 450px) {
        .controls {
            margin-top: 2rem !important;
        }
        .code-container {
            margin-bottom: 2rem;
            > div {
                width: 90%;
            }
        }
    }
}

.subtickinput-holder {
    margin-left: 8px;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
        font-weight: bold;
        color: white;
    }
    input {
        width: 4rem;
        border: 2px white solid;
        border-radius: 6px;
        background-color: black;
        color: white;   
        font-size: 1.5rem;
        text-align: center;
    }
}

.input-holder {
    width: 40%;
    margin-top: 1rem;
    .label {
        text-align: center;
        margin-top: 0;
        margin-bottom: 8px;
    }
    .inputs {
        display: flex;
        flex-direction: row;
        .flush {
            color: white;
            border-color: var(--IN);
            &:hover {
                color: black;
                background-color: var(--IN);
            }
        }
    }
    @media screen and (max-width: 768px) {
        width: 70%;
    }
    @media screen and (max-width: 560px) {
        width: 90%;
    }
}

.box {
    resize: vertical;
    width: 100%;
    min-height: 6rem;
    outline: none;
    background-color: transparent;
    padding: 4px;
    border: 2px solid white;
    border-radius: 8px;
    color: white;
    caret-color: white;
    font-size: 1rem;
    transition: border-color 100ms ease-out;
    &.input {
        resize: vertical;
        border-color: var(--IN);
        min-height: 2rem;
    }
    &.code {
        resize: vertical;
    }
    &.running {
        border-color: lime;
    }
    &.awaiting {
        border-color: yellow;
    }
    &.end {
        border-color: #00aaff;
    }
    &.fail {
        border-color: red;
    }
}

.cpu {
    display: flex;
    flex-direction: column;
    align-items: center;
    .output {
        width: min-content;
        margin-bottom: 8px;
        .holder {
            background-color: var(--main);
            border-radius: 8px;
            padding: 8px;
            > div {
                width: 32rem;
                height: 32rem;
                background-color: black;
                position: relative;
                @media screen and (max-width: 560px) {
                    width: 90dvw;
                    height: 90dvw;
                }
            }
            canvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                image-rendering: pixelated;
                aspect-ratio: 1;
            }
        }
    }
}

#registers {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
    "a b c d e f g"
    "o p q r s t u"
    "h i j k l m n"
    "v w x y z aa ab";
    column-gap: 4px;
    text-align: center;
    font-size: 1.25rem;
    > p {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: end;
        text-align: center;
        --n: white;
        color: var(--n);
        &:nth-child(1) {
            grid-area: a;
            --n: var(--A);
        }
        &:nth-child(2) {
            grid-area: b;
            --n: var(--B);
        }
        &:nth-child(3) {
            grid-area: c;
            --n: var(--C);
        }
        &:nth-child(4) {
            grid-area: d;
            --n: var(--D);
        }
        &:nth-child(5) {
            grid-area: e;
            --n: var(--E);
        }
        &:nth-child(6) {
            grid-area: f;
            --n: var(--F);
        }
        &:nth-child(7) {
            grid-area: g;
            --n: var(--G);
        }
        &:nth-child(8) {
            grid-area: h;
            --n: var(--SP);
        }
        &:nth-child(9) {
            grid-area: i;
            --n: var(--IP);
        }
        &:nth-child(10) {
            grid-area: j;
            --n: var(--SB);
        }
        &:nth-child(11) {
            grid-area: k;
            --n: var(--CARRY);
        }
        &:nth-child(12) {
            grid-area: l;
            --n: var(--ZERO);
        }
        &:nth-child(13) {
            grid-area: m;
            --n: var(--FAIL);
        }
        &:nth-child(14) {
            grid-area: n;
            --n: var(--IN);
        }
    }
    > div {
        min-width: 3rem;
        padding: 4px;
        --m: white;
        &:nth-child(15) {
            grid-area: o;
            --m: var(--A);
        }
        &:nth-child(16) {
            grid-area: p;
            --m: var(--B);
        }
        &:nth-child(17) {
            grid-area: q;
            --m: var(--C);
        }
        &:nth-child(18) {
            grid-area: r;
            --m: var(--D);
        }
        &:nth-child(19) {
            grid-area: s;
            --m: var(--E);
        }
        &:nth-child(20) {
            grid-area: t;
            --m: var(--F);
        }
        &:nth-child(21) {
            grid-area: u;
            --m: var(--G);
        }
        &:nth-child(22) {
            grid-area: v;
            --m: var(--SP);
        }
        &:nth-child(23) {
            grid-area: w;
            --m: var(--IP);
        }
        &:nth-child(24) {
            grid-area: x;
            --m: var(--SB);
        }
        &:nth-child(25) {
            grid-area: y;
            --m: var(--CARRY);
        }
        &:nth-child(26) {
            grid-area: z;
            --m: var(--ZERO);
        }
        &:nth-child(27) {
            grid-area: aa;
            --m: var(--FAIL);
        }
        &:nth-child(28) {
            grid-area: ab;
            --m: var(--IN);
        }
        border: var(--m) 1px solid;
    }
    @media screen and (max-width: 600px) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(7, 1fr);
        grid-template-areas: 
        "a o h v"
        "b p i w"
        "c q j x"
        "d r k y"
        "e s l z"
        "f t m aa"
        "g u n ab";
        row-gap: 8px;
        > p {
            justify-content: end;
            align-items: center;
        }
        > div {
            min-width: 0.9rem;
        }
    }
}

.ram-holder {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#ram {
    width: min-content;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, 1fr);
    row-gap: 8px;
    .bank {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: repeat(16, 1fr);
        gap: 2px;
        padding: 8px;
        border-radius: 8px;
        .cell {
            min-width: 2rem;
            border: 1px dashed white;
            padding: 2px;
            font-size: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            @media screen and (max-width: 768px) {
                font-size: 0.5rem;
                min-width: 1rem;
            }
            @media screen and (max-width: 450px) {
                font-size: 0.5rem;
                min-width: 0.6rem;
            }
            color: white;
        }
    }
    .bank:nth-child(1) {
        background-color: #00aaff;
        .cell {
            color: white;
        }
    }
    .bank:nth-child(2) {
        background-color: #859dff;
        .cell {
            color: white;
        }
    }
    .bank:nth-child(3) {
        background-color: #ff008c;
        .cell {
            color: white;
            border-color: white;
        }
    }
    .bank:nth-child(4) {
        background-color: #db89ff;
        .cell {
            color: black;
            border-color: black;
        }
    }
    .bank:nth-child(5) {
        background-color: #a6a5a5;
        .cell {
            color: black;
            border-color: black;
        }
    }
}
.cell.pointed {
    color: red;
}

@keyframes showUp {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.info {
    display: inline-block;
    border-radius: 16px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    margin-left: 8px;
    &::before {
        content: '?';
    }
    & > div {
        display: none;
        position: absolute;
        margin-top: 4px;
        padding: 8px;
        border: 2px dashed white;
        outline: 2px solid black;
        background-color: black;
        animation: showUp 200ms both 1;
    }
    &:hover {
        & > div {
            display: block;
        }
    }
    @media screen and (max-width: 700px) {
        display: none;
    }
}