@charset "UTF-8";

/*
New web page CSS for games and toys
Darren Green 2020
*/

:root {
    user-select: none;
    --game-color: #cc0000;
    --game-color-light: #ee0000;
    --game-color-dark: #220000;
}

main > aside > h2 {
    font-size: 120%;
}

/* small screen sizes for gaming */

@media only screen and (max-width: 575px) {
    html {
        height: 100vw;
    }

    body {
        position: fixed;
        width: 100%;
        font-size: 2vh;
    }

    body > header {
        max-height: 10%;
    }

    main {
        height: 90%;
    }

    main > section {
        height: 80%;
    }
    
    main > aside {
        height: 20%;
    }

    main > aside .button_box {
        height: 50%;
    }

    main > aside > h1, main > aside > h2 {
        display: none;
    }

}

/* general layout */

main > section, main > aside {
	margin: 0px;
    padding: 0px;
    border: none;
    text-align: center;
}

body > nav {
    border: none;
}

canvas.game {
    max-width: 100%;
    max-height: 100%;
}

.button_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.game_button {
    flex-basis: 32%;
    background-color: var(--game-color);
    border-top: 2px solid var(--game-color-light);
    border-left: 2px solid var(--game-color-light);
    border-right: 2px solid var(--game-color-dark);
    border-bottom: 2px solid var(--game-color-dark);
    border-radius: 8px;
    padding: 2px;
    margin: 2px;
    color: var(--color);
    font-family: FinalFrontier;
}

.game_button:active {
    background-color: var(--game-color-light);
}

@media only screen and (max-width: 320px) {
    .game_button {
        flex-basis: 15%;
    }
}

/* Override settings for large devices */

@media only screen and (min-width: 576px) {
    body {
        --main-width: 88%;
    }

    main, body > nav {
        min-height: 400px;
    }

    body > main {
        width: calc(var(--main-width) - 2vw);
        margin: 1vw;
        box-sizing: border-box;
    }

    body > nav {
        width: calc(100% - var(--main-width));
    }

    main > section, main > aside {
        clear: none;
        height: 80vh;
    }

    main > section {
        width:50%;
        float: left;
    }

    main > aside {
        width: 50%;
        margin-left: 50%;
    }

    main > aside > h1, main > aside > h2 {
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
    }

    .game_button {
        flex-basis: 48%;
    }
}