:root{
    --palecolor: lightgreen;
    --satcolor: #0d0;
    --medcolor: green;
    --darkcolor: #040;
    --neutral1: black;
    --neutral2: white;
}
*{
    box-sizing: border-box;
	margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-family:'Courier New', Courier, monospace;
}
body{
    background: var(--neutral1);
    overflow: auto;
}
header{
    background: var(--neutral1);
    background-image: url("imgs/gear-icon.svg");
    background-size: contain;
    color: var(--palecolor);
    font-size: 1.8rem;
    font-weight: 700;
    grid-area: header;
    text-align: center;
    text-shadow: .05em .05em .1em var(--satcolor);
}
input{
    margin: 0;
    padding: 0;
}
input[type="number"]{
    background-color: var(--neutral1);
    border: 0;
    color: var(--satcolor);
    font-weight: 700;
    text-align: center;
    width: 100%;
}
input[type="number"].disabled{
    background-color: #aaa;
    color: #999;
}
input[type="radio"]:checked{
    background: var(--satcolor);
    box-shadow: 0 0 1em var(--satcolor), 0 0 .5em var(--satcolor);
    font-weight: 700;
}
label{
    box-shadow: 0 0 .1em var(--neutral1);
    display: block;
    margin-bottom: .2em;
    padding: .2em;
}
label:hover{
    box-shadow: 0 0 .1em var(--darkcolor);
    color: var(--satcolor);
}
label:focus-within{
    color: var(--satcolor);
    font-weight: 700;
}
.active_crypt_button{ 
    background-color: var(--medcolor); 
    background-image: radial-gradient(var(--medcolor), var(--darkcolor));
    box-shadow: 0 0 .2em var(--darkcolor);
    color: var(--satcolor);
    font-weight: 700;
    scale: .9;
}
.inactive_crypt_button{
    background: #666;
    border: .5vw solid #777;
    box-shadow: 0 0 1em #333;
    color: #999;
}
.key_table{
    border-collapse: collapse;
    color: var(--neutral2);
    overflow-x: auto;
}
.key_table tr td{
    font-size: 1rem;
    padding-right: 1rem;
}
.key_table tr:nth-child(odd){
    font-weight: 700;
}
.key_table tr td:nth-child(odd){
    border-left: 2px solid #999;
}
.key_table tr td:nth-child(even){
    border-left: 2px solid #777;
}
.pattern_lens_highlight{
    color: var(--palecolor);
    font-weight: 700;
}
.pattern_lens_mute{
    color: #999;
    font-size: .9rem;
}
#machine{
    background-color: #333;
    display: grid;
    grid-template-areas:
        'header header'
        'code_display info_console'
        'input_slot info_console'
        'control_panel control_panel';
    max-width: 98vw;
    width: 98vw;
}
#machine > * {
    padding: 1vh;
}
#code_display, 
#input_slot{
    height: 20vh;
    max-height: 20vh;
    max-width: 50vw;
    width: 50vw;
    overflow: auto;
    text-align: center;
}
#code_display{
    background: var(--palecolor);
    background: radial-gradient(var(--palecolor), var(--medcolor));
    border: 1vh solid var(--darkcolor);
    border-radius: 15px;
    color: var(--darkcolor);
    grid-area: code_display;
    word-break: break-all;
}
#input_slot{
    background: var(--neutral2);
    border: 1vh solid lightgray;
    grid-area: input_slot;
    resize: none;
    font-family: 'Segoe Script';
    font-style: italic;
}
#info_console{
    background: var(--neutral1);
    color: var(--neutral2);
    grid-area: info_console;
    height: 46vh;
    max-height: 46vh;
    line-height: .8rem;
    max-width: 48vw;
    width: 48vw;
    overflow: auto;
    text-indent: 2rem;
}
#info_console > p{
    font-size: .9rem;
    margin-top: 1em;
}
#info_console > p::before{
    color: var(--palecolor);
    content: 'C:MACHINE/Information > ';
    font-size: .8rem;
}
#terminal_header{
    color: #aaa;
    font-size: .8rem;
    font-weight: 300;
    text-transform: uppercase;
}
#control_panel{
    background: gray;
    display: grid;
    grid-area: control_panel;
    grid-template-areas: 
        'code_select info crypt_switch crypt_switch go'
        'code_select info crypt_switch crypt_switch go'
        'shift_dial key key key key';
    max-width: 98vw;
    width: 98vw;
}
#control_panel > * {
    padding: 1vw;
}
#code_selection_buttons,
#shift_cipher_dial{
    width: 25vw;
}
#code_selection_buttons{
    grid-area: code_select;
}
#shift_cipher_dial{
    grid-area: shift_dial;
    text-align: center;
}
#dial_img{
    width: 70%;
    height: auto;
}
#letter_key{
    background-color: var(--neutral1);
    background-size: contain;
    color: var(--neutral2);
    display: flex;
    align-items: center;
    grid-area: key;
    max-height: 20vh;
    max-width: 65vw;
    width: 65vw;
    overflow-x: auto;
    text-align: center;
}
#copy_code_button{
    grid-area: copy;
}
#info_button{
    grid-area: info;
}
#info_button > img{
    width: 50%;
    height: auto;
}
#encrypt_decrypt_switch{
    background: gray;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-area: crypt_switch;
}
.control_panel_button{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#go_img:active, 
#info_img:active{
    scale: .9;
}
#go_button{
    grid-area: go;
}
#go_img{
    width: 50%;
    height: auto;
}

/*mobile small layout*/
@media only screen and (max-width: 768px){
    *{
        font-size: 1rem;
    }
    #machine{
        grid-template-areas: 
            'header'
            'code_display'
            'input_slot'
            'control_panel'
            'info_console';
    }
    #machine > *{
        margin: 0;
        padding: 0;
    }
    #code_display,
    #input_slot{
        height: 11vh;
        max-height: 11vh;
        max-width: 100vw;
        width: 100vw;
    }
    #info_console{
        height: 20vh;
        max-height: 20vh;
        max-width: 100vw;
        width: 100vw;
    }
    #code_display{
        border: 1vw solid var(--darkcolor);
    }
    #input_slot{
        border: 1vw solid lightgray;
    }
    #control_panel{
        grid-template-areas:
            'code_select shift_dial'
            'key key'
            'crypt_switch crypt_switch'
            'info go';
            max-width: 100vw;
            width: 100vw;
    }
    #code_selection_buttons,
    #shift_cipher_dial{
        width: 50vw;
    }
    input[type="number"]{
        border: 0;
        width: 90%;
    }
    #go_button,
    #info_button{
        max-width: 50vw;
        width: 50vw;
    }
    #go_img{
        width: 50%;
        height: auto;
    }
    #info_button > img{
        width: 50%;
        height: auto;
    }
    #letter_key{
        max-width: 100vw;
        width: 100vw;
    }
    .key_table tr td{
        font-size: 1rem;
        padding: 1vw;
    }
}