@charset "UTF-8";

/* ---------------------------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    touch-action: manipulation;
}

body {
    margin: 0;

    overflow: hidden;

    font-family: sans-serif;

    background-color: #333;

    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* ---------------------------------------------------------------------------------------------- */

:root {
    --color-modal-container-background: #ffeedb;
    --color-modal-container-text:       #ff2700;
    --color-modal-container-border:     #ff5300;

    --color-modal-button-background: #ff8800;
    --color-modal-button-text:       #fff;

    --color-main-container-background: #ffd59d;
}

/* ---------------------------------------------------------------------------------------------- */

.modal {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 999;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #00000080;

    .container {
        max-width: 40rem;
        min-width: 25rem;

        padding: 2rem;

        background-color: var(--color-modal-container-background);
        color: var(--color-modal-container-text);

        box-shadow: 0 0 40px #00000040;

        border: 5px solid var(--color-modal-container-border);
        border-radius: 32px;

        text-align: center;

        h1 {
            margin: 0 0 1rem 0;

            font-size: 1.75rem;
            font-weight: bold;
        }

        p {
            max-height: 20rem;

            overflow: hidden auto;

            margin: 0;

            font-size: 1.5rem;
        }

        p::-webkit-scrollbar {
            display: none;
        }

        a {
            color: inherit;
        }

        button {
            all: unset;

            margin: 1rem 0 0 0;
            padding: 0.75rem 5rem;

            font-size: 1.25rem;

            background-color: var(--color-modal-button-background);
            color: var(--color-modal-button-text);

            box-shadow: 4px 4px 0 #00000040;

            border-radius: 1rem;
        }

        button.clickable {
            cursor: pointer;
        }

        button:hover {
            opacity: 0.7;

            box-shadow: none;
        }

        button:active {
            opacity: 0.5;

            box-shadow: none;
        }
    }
}

@media screen and (max-width: 480px) {
    .modal {
        .container {
            max-width: 90%;
            min-width: 90%;

            h1 {
                font-size: 1.5rem;
            }

            p {
                font-size: 1.25rem;
            }

            button {
                padding: 0.75rem 3rem;

                font-size: 1rem;
            }
        }
    }
}

.touchDevice {
    .modal {
        .container {
            button:hover {
                opacity: 1.0;
            }

            button:active {
                opacity: 0.5;
            }
        }
    }
}

/* ---------------------------------------------------------------------------------------------- */

main {
    .container {
        position: absolute;

        width: 100%;
        height: 100%;

        background-color: var(--color-main-container-background);

        .circleGame {
            .container {
                display: flex;
                justify-content: center;
            }
        }
    }
}

/* ---------------------------------------------------------------------------------------------- */

header {
    .container {
        position: fixed;
        top: 0;

        width: 100%;

        padding: 0.75rem;

        color: #000000bf;

        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        p {
            margin: 0;

            font-size: 1.5rem;
        }

        a {
            color: inherit;
        }

        i {
            font-size: 2rem;
        }
    }
}

/* ---------------------------------------------------------------------------------------------- */

footer {
    .container {
        position: fixed;
        bottom: 0;

        width: 100%;

        margin: 0 0 1rem 0;

        display: flex;
        justify-content: center;
        align-items: center;

        color: #000;

        p {
            margin: 0;

            font-size: 0.75rem;
        }

        a {
            color: inherit;
        }
    }
}