/*AUTHOR Tom Lewis
tomlewisint@gmail.com
2022*/

html {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto Mono', monospace;
    font-size: 1em;
    font-weight: 500;
    background-color: #aaaaaa;
    color: black;
}


a {
    color: inherit;
}
a:hover {
    color: white;
}

button:hover{
    background-color: #444444;
    color: white;
}

hr {
    font-family: sans-serif;
    color: inherit;
    border: 0.1rem solid;
}


.canvasContainer {
    height: 75vh;
    overflow: hidden;

    outline-style: solid;
    outline-width: 1.2vmin;
    outline-color: black;


    padding: 0;
    margin: 1vmin;
    margin-top: 2vmin;
    margin-bottom: 0;

    background-color: #444444;

    text-align: center;

    z-index: 1;
}


#canvasDiv {
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: auto;
}


.screenCanvas {
    image-rendering: pixelated;

    max-width: 75vw;
    max-height: 75vh;

    padding: 0;
}


#highlight {
    position: absolute;
    width: 32px;
    height: 32px;

    opacity: 50%;
    background-color: #ffff00;
    pointer-events:none;
}

.patternButton {
    background: none;
    border: none;

    padding:0;
    margin-right:1.2vmin;

	font: inherit;

    width: 5vmin;
    height: 5vmin;

}

.patternIcon {
    image-rendering: pixelated;
    width: 100%;
}

.patternButton:hover {
    opacity: 50%;
}

.patternButton.selected {
    outline-style: solid;
    outline-width: 0.7vmin;
    outline-color: #ffff00;
}


#saveEntry {
    margin-bottom: 1vh;
}

#patternPanel {
    max-width: 60vmax;
}