/* Hexagon grid designed using techniques found at https://ninjarockstar.dev/css-hex-grids/ */

:root {
    --size: min(5vw, 9vh);
    --margin: 1px;
    --column-offset: 0;
    --row-shift: 0;
    --row-offset: 0;
    --grey: #E8E8E8;
    --red: #D4070F;
    --yellow: #FFDA13;
    --blue: #1C1AAF;
}

body {
    overflow: hidden;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
}

h1 {
    grid-area: title;
    font-family: 'Peralta', Arial, Helvetica, sans-serif;
    font-size: 8vw;
}

a {
    color: var(--blue);
}

button {
    margin: 5px;
}

dialog {
    border: 0px;
    box-shadow: 10px 5px 5px #333333;
}

dialog h1 {
    text-align: center;
    font-family: 'Peralta', Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 3rem;
}

dialog h2 {
    font-family: 'Peralta', Arial, Helvetica, sans-serif;
    font-size: 2rem;
}

dialog button {
    width: 25%;
    min-width: fit-content;
    height: 6vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    border: none;
    background-color: var(--yellow);
    color: white;
    font-family: 'Peralta', Arial, Helvetica, sans-serif;
    font-size: 2rem;
    cursor: pointer;
}

dialog button:hover {
    background-color: #EBC605;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.hexagon {
    width: var(--size);
    height: var(--size);
    position: relative;
    clip-path: polygon(50% 0%, 93.30% 25%, 93.30% 75%, 50% 100%, 6.70% 75%, 6.70% 25%);
    border: 0px;
    cursor: pointer;
}

#page {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-areas:
        "board title"
        "board help-button"
        "board restart-button"
        "board undo-button"
        "board .";
    height: 90vh;
}

#help-modal {
    width: min(80vw, 100%);
    min-width: 400px;
    max-height: 80vh;
}

#end-modal {
    width: min(30vw, 100%);
    min-width: 400px;
}

#help-button {
    grid-area: help-button;
    background-color: var(--yellow);
    background-image: url(assets/help-icon.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#help-button:hover {
    background-color: #EBC605;
}

#restart-button {
    grid-area: restart-button;
    background-color: var(--red);
    background-image: url(assets/restart-icon.svg);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
}

#restart-button:hover {
    background-color: #AD0008;
}

#undo-button {
    grid-area: undo-button;
    background-color: var(--blue);
    background-image: url(assets/undo-icon.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

#undo-button:hover {
    background-color: #070680;
}

@keyframes flash-red {
    0% {background-color: var(--red);}
    100% {background-color: white;}
}

@keyframes  flash-blue {
    0% {background-color: var(--blue);}
    100% {background-color: white;}
}