/* ------------------------- */
/*          General          */
/* ------------------------- */

:root {
    --blue-1: #001A33;
    --blue-2: #004D99;
    --blue-3: #0080FF;
    --blue-4: #66B3FF;
    --blue-5: #CCE6FF;
    --grey-1: #161A1D;
    --grey-2: #434D56;
    --grey-3: #708090;
    --grey-4: #A9B3BC;
    --grey-5: #E2E6E9;
    --peach-fuzz: #ffbe98;
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#container {
    width: min(100vw, 55.555vh);
    height: min(100vh, 180vw);
    margin: 0 auto;
}


/* ------------------------ */
/*          Header          */
/* ------------------------ */


header {
    height: calc(4 * 100% / 18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: var(--blue-3);
    color: #fff;
}

#title h1 {
    font-size: 40px;
    margin-bottom: 5px;
}

#title p {
    font-size: 20px;
}

@media (min-width: 420px) {

    header {
        background-image: url(images/logo.svg);
        background-size: 100px;
        background-position: right 20px center;
        background-repeat: no-repeat;
    }

}


/* ------------------------------- */
/*          Playing Field          */
/* ------------------------------- */

main {
    position: relative;
    height: calc(10 * 100% / 18);
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    border: 1px solid var(--grey-3);
}

.cell {
    flex-shrink: 0;
    background-color: var(--blue-5);
    border: 1px solid var(--grey-3);
}

.covered {
    background-color: var(--grey-4);
}

.symbol-1, .symbol-2, .symbol-3, .symbol-4, .symbol-5, .symbol-6, .symbol-7, .symbol-8, .symbol-f.covered, .symbol-m {
    background-size: 1000%;
    background-image: url(images/symbols.svg);
}

.symbol-1 {
    background-position: calc(100% * 0 / 9);
}

.symbol-2 {
    background-position: calc(100% * 1 / 9);
}

.symbol-3 {
    background-position: calc(100% * 2 / 9);
}

.symbol-4 {
    background-position: calc(100% * 3 / 9);
}

.symbol-5 {
    background-position: calc(100% * 4 / 9);
}

.symbol-6 {
    background-position: calc(100% * 5 / 9);
}

.symbol-7 {
    background-position: calc(100% * 6 / 9);
}

.symbol-8 {
    background-position: calc(100% * 7 / 9);
}

.symbol-f.covered {
    background-position: calc(100% * 8 / 9);
}

.symbol-m {
    background-position: calc(100% * 9 / 9);
}

#mine-hit {
    background-color: var(--peach-fuzz);
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
}

#overlay div {
    padding: 16px 32px;
    border-radius: 16px;
    background-color: var(--blue-4);
    font-size: 48px;
}

#overlay div:hover {
    opacity: 0.2;
    transition: 0.2s;
}


/* ------------------------- */
/*          Buttons          */
/* ------------------------- */

#buttons {
    height: calc(3 * 100% / 18);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
    background-color: var(--grey-5);
}

button {
    font-size: 16px;
    text-transform: capitalize;
    padding: 15px 30px;
    margin: 0 2px;
    color: #fff;
    background-color: var(--blue-3);
    border: 2px solid var(--blue-3);
    cursor: pointer;
    transition: 0.2s;
}

button:hover {
    color: var(--blue-3);
    background-color: transparent;
}


/* ------------------------ */
/*          Footer          */
/* ------------------------ */

footer {
    height: calc(100% / 18);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
    background-color: var(--grey-2);
    color: #fff;
}

footer a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #fff;
}

footer a:hover {
    border-bottom: 0;
}

@media (max-width: 480px) {

    footer span:not(:first-child) {
        display: none;
    }

}