@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Mulish:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
	--gamebox-w: 700px;
	--gamebox-as: 56.18%;
	--colour-pri1: #66cccc;
	--colour-pri2: #ff6666;
	--colour-sec1: #4d6ead;
	--colour-sec2: #feeb25;
}

html, body, button, input, select, textarea {
	font-family: 'Mulish', sans-serif;
	font-weight: 400;
}

html {
	height: 100%;
	font-size: 16px; /* This is the base size the rem unit refers to */
}

body {
	position: relative;
	font-size: 1rem;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

#page-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

#game-box-wrap {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	overflow: auto;
	width: var(--gamebox-w);
	max-width: 100%;
}

#game-box-wrap .game-box {
	width: 100%;
	padding-bottom: var(--gamebox-as);
	position: relative;
	overflow: hidden;
}

#game-box-wrap .game-box-inner {
	position: absolute;
	top: 0;
	left: 0;
	/*padding: 30px;*/
	height: 100%;
	max-height: 100vh;
	width: 100%;
	color: white;
	background-color: var(--colour-pri1);
}

#game-box-wrap .top-left {
	position: absolute;
	top: 0;
	left: 0
}

#game-box-wrap .bottom-right {
	position: absolute;
	bottom: 0px;
	right: 0
}