body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: floralwhite;
}

.hidden {
    display: none;
}

* {
    font-family: monospace;
}

.chip8-component-label {
    position: sticky;
    background: whitesmoke;
    border-bottom: 1px solid black;
    width: 100%;
    text-align: center;
}

.chip8-romcontrols input[type="file"]::file-selector-button {
    font-family: monospace;
    border-radius: 0.25rem;
}

.chip8-display {
    border-radius: 0.25rem;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: disp;
    background: whitesmoke;
}

.chip8-grid-container {
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: 128px 128px 256px 64px 440px 128px;
    grid-template-rows: 64px 35px 128px 128px 128px 256px 30px;
    grid-template-areas:
        "head       head        head        head        head        head"
        "rom        rom         rom         rom         rom         rom"
        "registers  registers   registers   registers   registers   pc"
        "tacs       tacs        input       disp        disp        pc"
        "tacs       tacs        input       disp        disp        pc"
        "stack      misc        misc        misc        mem         pc"
        "src        src         src         src         src         src";
}

.chip8-src{
    grid-area: src;
    display: flex;
    justify-content: space-between;
}

.chip8-src a {
    text-decoration: none;
}

.chip8-title {
    display: flex;
    font-size: 4rem;
    text-wrap: nowrap;
    grid-area: head;
    flex-wrap: nowrap;
    justify-content: center;
    font-weight: 100;
}

.chip8-romcontrols {
    border: 2px solid black;
    border-radius: 0.25rem;
    padding: 0.25rem;
    display: flex;
    justify-content: space-between;
    grid-area: rom;
}

.chip8-romcontrols .action-buttons button{
    width: 64px;
    border-radius: 0.25rem;
}

.chip8-registers {
    border: 2px solid black;
    border-radius: 0.25rem;
    display: grid;
    grid-template-columns: repeat(8, auto);
    grid-area: registers;
}

.chip8-registers .register-item {
    outline: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.chip8-input {
    border: 2px solid black;
    border-radius: 0.25rem;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-area: input;
}

.chip8-input .input-item {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1px solid black;
}

.chip8-code {
    grid-area: pc;    
    border: 2px solid black;
    border-radius: 0.25rem;
}

.chip8-code .content .selected {
    background: black;
    color: white;
}

.chip8-code .content {
    overflow: scroll;
    max-height: 650px;
}

.chip8-code .content .selectable {
    cursor: pointer;
}

.chip8-input .input-item.pressed {
    background: black;
    color: white;
}

.chip8-stack {
    grid-area: stack;
    border-radius: 0.25rem;
    border: 2px solid black;
}

.chip8-stack .content {
    max-height: 235px;
    overflow: scroll;
}

.chip8-stack .content .stack-item:last-child{
    background: black;
    color: white;
}

.chip8-timers-and-counters {
    border: 2px solid black;
    border-radius: 0.25rem;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-area: tacs;
}

.chip8-timers-and-counters .tac-item {
    outline: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chip8-memory {
    border: 2px solid black;
    border-radius: 0.25rem;
    font-family: monospace;
    grid-area: mem;
}

.chip8-memory .content {
    overflow: scroll;
    max-height: 236px;
}

.chip8-memory .memory-item {
    display: flex;
    gap: 16px;
}

.chip8-misc {
    border: 2px solid black;
    border-radius: 0.25rem;
    grid-area: misc;
}

.chip8-misc .content {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chip8-misc .steppers {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.chip8-misc .steppers .stepper {
    display: flex;
    justify-content: space-between;
}

.chip8-misc .steppers .stepper button{
    border-radius: 0.25rem;
}

.chip8-misc .steppers input {
    width: 64px;
}