/* board.css */

header.top {
    min-width: 200px;
    width: 80vw;
    height: 2 rem;
    margin: 0 auto 0 auto;
}

header.top h1,h2 {
    display: inline;
    padding: 10pt;
}

section.board {
    background-color: white;
    background-size: 20px 20px;
    background-image:
	linear-gradient(to right, lightblue 1px, transparent 1px),
	linear-gradient(to bottom, lightblue 1px, transparent 1px);
    min-width: 200px;
    width: 90vw;
    height: 90vh;
    margin: 1rem auto 2rem auto;
    border-radius: 4px;
    box-shadow: inset 0 0 10px #232222;
    border: 1px solid black;
}

div.instr {
    background-color: rgba(255, 255, 255, 0.75);
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    width: 110px;
    padding: 2px;
    margin: auto;
    color: #4e9fb9;
    text-align: center;
    border-radius: 36px;
}

.hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

section.board > img {
    background-color: white;
    border: 1px solid black;
    margin: 4px;
    border-radius: 4px;
    width: 150px;
}

footer.top {
    width: 100%;
    font-size: 8pt;
}

footer.top p {
    float: right;
}