@font-face {
	font-family: 'Hellovetica';
	font-display: swap;
	src: url('/fonts/cubicfive10.ttf') format('truetype');
}

:root {
    --game-panel-spacing: .9rem;
    --game-panel-border-top: 2rem;
    --game-panel-border-bottom: .8rem;
}

html {
    height:100%;
    padding: 0;
    margin: 0;
}

body {
    background: blueviolet;
    padding: 0;
    margin: 0;
    text-align: center;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.gamePanel {
    margin-bottom: var(--game-panel-spacing);
    padding: var(--game-panel-spacing);
    display: inline-block;
    background: green;
    border-radius: var(--game-panel-border-top) var(--game-panel-border-top) var(--game-panel-border-bottom) var(--game-panel-border-bottom);
    visibility: hidden;
}

.gameName {
    font: inherit;
    color: inherit;
}

.gameCanvasDiv {
    border: none !important;
    box-sizing: content-box;
    display: block;
    border: 5px solid black;
    margin: 0;

    position: fixed !important;
    top: 0;
    left: 0;
    visibility: visible;
}

.gameCanvasDiv:fullscreen {
    border: none;
}

.gamePanelButtonsDiv {
    display: flex;
    
    height: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
}