:root {
    font-family: sans-serif;
    --primary: #7a602a;
    --primary-light: #dfae2e;
    --contrast: #daedce;
    --contrast-light: #a7b49e;
    --base: #2b3435;
    --base-darker: #1a271d;
    --base-dark: #363636;
    --border-weight--lg: .2rem;
}

body {
    background-color: var(--base);
    color: var(--contrast);
    margin: 0;
    padding: 0;
}

.--loading {
    content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='icon-50' width='24' height='24' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' name='loader' color='%232A2C2B' class='standard standard-loader-2'%3E%3Ctitle%3Eicon-50%3C/title%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.6s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
  height: 100vh;
}

.--loading .console, .--loading .board, .--loading .user-input, .--loading header { display: none }

header h1 {
    font-size: 1rem;
    margin: 0;
    padding: .5rem 2rem;
    color: var(--contrast);
    background: red;
    align-items: center;
}

header p {
    display: flex;
    font-weight: 900;
    flex-direction: column;
    color: var(--base-darker);
    text-align: right;
    margin: 0;
    font-size: .75rem;
    flex: 1;
    padding-right: 1rem;
    padding-left: 2rem;
    align-content: center;
}

header .firstline { border-bottom: 1px solid var(--base-darker)}
header button {
    border: none;
    background: transparent;
    font-weight: 900;
    font-family: sans-serif;
    font-size: .75rem;
    color: var(--base-darker)
}

header button:hover, header a:hover { cursor: pointer }

header {
    padding-right: 2rem;
    display: flex;
    flex-flow: row-reverse;
    background-color: var(--contrast-light);
}

.main {
    display: flex;
    flex-direction: row;
}

.memory__container {
    width: 15rem;
    height: 100vh;
    overflow-y: scroll;
}

.board {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.display .main-board {
    border-right: var(--border-weight--lg) var(--contrast) solid;
}

.main-board {
    padding-right: 1rem;
}

.side-board {
    width: 18rem;
    padding-left: 1rem;
}

.display {
    padding-bottom: 2rem;
    padding-top: 1rem;
    padding-left: 1rem;
    padding: 1rem;
    border-left: var(--contrast-light) solid 2rem;
    border-right: var(--contrast-light) solid 2rem;
}

.display, .user-input {
    display: flex;
    flex-direction: row;
}

.main-board {
    flex: 1;
}


.controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.controls .switch-button { position: relative }

.controls .switch__label {
    position: absolute;
    top: -6rem;
    font-weight: 900;
    color: var(--contrast);
    text-transform: uppercase;
}

.states {
    justify-content: space-around;
    padding-top: 2.35rem;
    align-items: start;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.steps,
.instructions {
    margin: 0;
    padding: 0;
    list-style-type: none;
    gap: .1rem;
    display: flex;
    flex-direction: column;
}

.steps .register__bit,
.instructions .register__bit {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2rem;
}

.steps .register__bit output,
.instructions .register__bit output { margin: 0 }

.steps .label,
.instructions .label {
    color: #a7b49e;
    text-transform: uppercase;
    font-weight: 900;
    font-size: .75rem;
}

.register__name {
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    font-size: .75rem;
}

.register__bit {
    flex: 1;
}

.register__word {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
}

.registers .register__bit .label { display: none }

.registers .register__bit:nth-child(3n):not(:last-child){
    border-right: var(--border-weight--lg) var(--contrast) solid;
}

.register.ir .register__bit:nth-child(3n):not(:first-child){
    border-right: none;
}

.register.ir .register__bit:nth-child(3),
.register.ir .register__bit:nth-child(4),
.register.ir .register__bit:nth-child(5){
    border-right: var(--border-weight--lg) var(--contrast) solid!important;
}

.register__bit output {
    margin: .25rem auto;
    display: block;
    width: 1.75rem;
    aspect-ratio: 1;
    border-radius: 30%;
    font-size: 0;
    color: transparent;
}

.register__bit[data-bit="0"] output {
    background-color: var(--base-darker);
}

.register__bit[data-bit="1"] output {
    background-color: red;
}

.user-input {
    background-color: var(--base-dark);
    border-left: var(--base-dark) solid 2rem;
    border-right: var(--base-dark) solid 2rem;
    padding: 2rem 1rem;
}

.input-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.switch-button {
    background: transparent;
    color: white;
    font-family: sans-serif;
    border: none;
    padding: 0;
}

.switch-button:hover { cursor: pointer }

.switch-button .switch {
    border: none;
    width: 2rem;
    height: 3rem;
    background-color: var(--primary);
    overflow: hidden;
    border: .01rem black solid;
    border-bottom-width: .5rem;
    box-shadow: inset #121212 0rem 0rem 0rem 2rem;
    border-bottom-width: .5rem;
    /*border-top-width: .5rem;*/
}

.switch__state {
    height: .5rem;
    transition: margin .1s;
}

.switch-button[data-bit="0"] .switch__state {
    margin-top: 2.5rem;
    background-color: var(--primary);
}

.switch-button[data-bit="1"] .switch__state {
    margin-top: 0rem;
    background-color: var(--primary-light);

}

.input-panel .switch-bit .switch__label { display: none }

.console {
    background-color: black;
    color: var(--primary-light);
    font-family: monospace;
    font-size: 1rem;
    padding: 1rem 2rem;
    flex: 1;
    word-break: break-all;
}

@media screen and (max-width: 80rem) {
    
    body { background-color: black }
    .memory__container {
        display: none
    }
    .display .main-board { border-right: 0 }
    .user-input .main-board { padding-right: 0 }
    .side-board { width: auto }
    .board { background: var(--base);}
    .display { flex-direction: column-reverse; gap: 2rem }
    .states { flex-direction: column }
    .states .instructions, .states .steps { flex-direction: row }
    .states .instructions, .states .steps {
        gap: 2rem;
    }
    .registers { padding: 0; border: none }
    .user-input { flex-direction: column; gap: 2rem }
    .controls {
        gap: 2rem;
        justify-content: left;
    }
    .controls .switch-button,
    .controls .switch__label { position: static }

}

#man {

    width: calc(100% - 8rem);
    padding: 4rem;
    background-color: var(--contrast-light);
    color: var(--base-darker);
    border: none;
    font-family: monospace;
    font-size: 1rem;

}

#man button {
    border: none;
    background-color: transparent;
    width: 100%;
    text-align: right;
    font-family: monospace;
}

#man button::before { content: '[ '}
#man button::after { content: ' ]'}
#man button:hover { cursor: pointer; font-weight: 900 }

#man a {
    color: var(--base-darker);
    text-decoration: underline
}

#man::backdrop {
    background: var(--contrast-light);
}