/* Fonts */
@font-face {
    font-family: "PixelGames";
    src: url('../common/fonts/PixelGames.ttf') format('truetype');
}

:root {
    --color-background: yellow;
    --color-block-shape: blue;
    --color-block-shape-border: lightblue;
    --color-block-bottom: purple;
    --color-block-bottom-border: pink;
    --color-block-frozen: green;
    --color-block-frozen-border: lightgreen;
}

a {
    color: darkcyan;
    text-decoration: none;
}

a:hover {
    opacity: 50%;
}

body {
    height: 100vh;
    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    font-size: 4.5rem;
}

#main-title,
#subtitle {
    margin-top: 0;

    text-align: center;
}

#main-title {
    font-family: "PixelGames";
    margin: 0;
}

.game-display {
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: center;
}

#left-data {
    margin-right: 6rem;

    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
}

.preview-grid {
    height: 100px;
    width: 100px;
    display: flex;
    flex-wrap: wrap;
}

.info {
    margin-top: 2.5rem;

    font-family: "PixelGames";
    font-size: 2rem;

    display: grid;
    grid-template-areas:
        "score-text score-value"
        "lines-text lines-value"
        "level-text level-value";
    grid-column-gap: 1em;
}

.buttons {
    margin-top: 2.5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#btn-play,
#btn-music {
    width: 3.5em;
    height: 3.5em;
}

#btn-play:hover,
#btn-music:hover {
    scale: 1.2;
    opacity: 0.9;
}

.game {
    height: 100%;
    aspect-ratio: 0.5;
}

.grid {
    /* height: 500px; */
    height: 100%;
    aspect-ratio: 0.5;

    display: flex;
    flex-wrap: wrap;
}

.grid,
.preview-grid {
    background-color: var(--color-background);
    border-style: hidden;
    border-radius: 0.6rem;
}

.grid div {
    height: 5%;
    aspect-ratio: 1;
}

.preview-grid div {
    height: 25%;
    aspect-ratio: 1;
}

.block-shape,
.block-bottom,
.block-frozen {
    height: calc(5% - 2px) !important;
    aspect-ratio: 1;

    border-radius: 0.3em !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.preview-grid .block-shape,
.preview-grid .block-bottom,
.preview-grid .block-frozen {
    height: calc(25% - 2px) !important;
}

.block-shape {
    background-color: var(--color-block-shape) !important;
    border-color: var(--color-block-shape-border) !important;
}

.block-bottom {
    background-color: var(--color-block-bottom) !important;
    border-color: var(--color-block-bottom-border) !important;
}

.block-frozen {
    background-color: var(--color-block-frozen) !important;
    border-color: var(--color-block-frozen-border) !important;
}

@media (max-width: 1100px) {

    body {
        font-size: 3rem;
    }

    h1 {
        font-size: 9rem;
    }

    .game-display {
        width: unset;
        margin-top: 2em;
    }

    .info {
        font-size: 3rem;
    }

    .grid {
        height: 1000px;
        width: 500px;
        display: flex;
        flex-wrap: wrap;
    }

    .grid div,
    .preview-grid div {
        height: 50px;
        width: 50px;
    }

    .preview-grid {
        height: 200px;
        width: 200px;
        display: flex;
        flex-wrap: wrap;
    }

    .block-shape,
    .block-bottom,
    .block-frozen {
        height: 48px !important;
        width: 48px !important;
    }

}