/* roboto-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-v51-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/roboto-v51-latin-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('./fonts/roboto-v51-latin-900.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

html {
    background-color: #111111;
    color: #eeeeee;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin: 0;
    margin-top: 2rem;
    letter-spacing: 0.5rem;
    line-height: 1.0;
    text-shadow: 0.25rem 0.25rem #000000;
}

p.lead {
    font-size: 1.15rem;
    text-align: center;
    margin-bottom: 2rem;
    font-style: italic;
    color: #aaaaaa;
}

.board {
    margin: 0 auto;
    padding: 3rem;
    max-width: min-content;
    border: 10px solid #000000;
    border-radius: 50%;
}

.board .board-grid {
    display: grid;
    justify-content: center;

    --imgsize: 48px;

    grid-template-columns: var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize);
    grid-template-rows: var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize) var(--imgsize);
    gap: 8px;
}

.board .board-grid img {
    height: var(--imgsize);
    width: var(--imgsize);
    image-rendering: pixelated;
    cursor: pointer;
}

.windialog {
    margin: 0 auto;
    margin-bottom: 2rem;
    max-width: 666px;
    padding: 1rem;
    border: 3px solid white;
    box-shadow: 0.75rem 0.75rem #000;
}

.windialog.hidden {
    display: none;
}

.windialog h2 {
    font-size: 1.75rem;
    font-weight: 900;
    text-align: center;
    margin: 0;
}

.windialog .win-textarea {
    background-color: #000000;
    color: white;
    border: none;
    font: inherit;
    resize: none;
    width: 100%;
    height: 250px;
    padding: 0.5rem;
    outline: none;
}

hr {
    margin: 4rem auto;
    border: none;
    border-top: 2px solid #ccc;
    max-width: 666px;
}

.infobox {
    margin: 0 auto;
    margin-bottom: 2rem;
    max-width: 666px;
    padding: 1rem;
    border: 3px solid white;
    box-shadow: 0.75rem 0.75rem #000;
}

.infobox h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0;
    margin-bottom: 0.5rem;
}

.infobox p {
    font-size: 1.05rem;
    margin: 0;
    margin-bottom: 0.5rem;
}

.infobox .info-example {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.infobox .info-example img {
    height: 64px;
    width: 64px;
    image-rendering: pixelated;
}