:root {
    --sizex: 16;
    --sizey: 16;
    --size: 1em;
    --col: #000;
    --gap: 3vmin
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-gap: var(--gap);
    padding: var(--gap);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}


body > * {
    box-shadow: 0 0 9em #999, 0 0 1em #666666; 
}

@media (orientation: portrait) {
    body {
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
            grid-template-areas:
            "main main main"
            "codezone examplezone colorzone";
    }    
}

@media (orientation: landscape) {
    body {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
            grid-template-areas:
            "main codezone"
            "main examplezone"
            "main colorzone";
    }    
}


main {
    grid-area: main;
    display: grid;
    grid-template-columns: repeat(var(--sizex), 1fr);
    grid-template-rows: repeat(var(--sizey)), 1fr;
    cursor: pointer;
    justify-items: stretch;
    align-items: stretch;
}

main>div {
    width: calc((75vmin - (2*var(--gap))) / var(--sizex));
    height: calc((75vmin - (2*var(--gap))) / var(--sizey));
    background: white;
    border: black thin solid;
}

#copied,
#codezone {
    grid-area: codezone;
    background:black;
    color: #33FF33;
    max-height: 20vmin;
    overflow: scroll;
    padding: 1em;
    min-height: 100%;
}

#copied {
    z-index: 100;
    text-align: center;
    vertical-align: middle;
    min-height: 100%;
    opacity: 0;
}

#copied.active {
    z-index: 100;
    animation: flash 4s;
}

@keyframes flash {
    0% { opacity: 0; }
    5% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

#code {
    overflow: hidden;
    font-family: monospace;
}

#examplezone {
    grid-area: examplezone;
    width: calc( var(--size) * var(--sizex) );
    height: calc( var(--size) * var(--sizey) );
    cursor: not-allowed;
}

#colorzone {
    grid-area: colorzone;
    width: calc( var(--size) * var(--sizex) );
    height: calc( var(--size) * var(--sizey) );
}


#example {
    background: rgb(0, 0, 0);
    display: block;
    width: var(--size);
    height: var(--size);
}

#current, #recent {
    list-style: none;
}

#recent > li, 
#current > li {
    padding: 0.25em;
    border-radius: 0.25em;
}
aside > input {
    width: 100%;
    min-height: 4rem;
}

aside {
    background: cornflowerblue;
}

#colorzone,
#copied,
#examplezone,
#codezone {
    justify-self: stretch;
    align-self: stretch;
    border-radius: 1vmin;
    overflow: scroll;
}