@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@700&family=Noto+Sans+JP:wght@700&family=Noto+Sans+KR:wght@700&family=Noto+Sans+SC:wght@700&family=Noto+Sans+TC:wght@700&family=Noto+Sans:wght@700&family=Open+Sans:wght@300;700&display=swap');
body {
	margin: 0;
	padding: 0;
}

#buttons {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(100px, 1fr) );
	grid-template-rows: repeat( auto-fill, minmax(100px, 1fr) );
	gap: 10px;
	justify-content: space-evenly;
	align-content: space-between;
	margin: 10px;
	border: black;
}

button {
	font-family: 'Noto Sans', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', sans-serif;
	width: 100px;
	height: 100px;
	border: 2px solid black; /* Green */
	background-color: white;
	font-size: 50px;
	transition: scale 100ms;
}

button:hover {
	scale: 1.1;
}


#game {
	width: 100%;
	min-height: 75vh;
	height: auto;
	background-color: #d33724;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 5vw;
	color: white;
	flex-direction: column;
	font-family: 'Open Sans', sans-serif;
}

#instructions {
	top: 5%;
	position: absolute;
}

#word {
	font-size: 4vw;
	font-weight: bold;
	margin: 8%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: flex-start;
}

#word > div {
	margin-right: 1.5ch;
}

#word > div > span {
	width: 1.5ch;
	height: 2ch;
	text-align: center;
	display: inline-block;
}

#info {
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 15vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Open Sans', sans-serif;
	background-color: rgba(255, 255, 255, 0.75);
	z-index: 5;
	/* font-size: 5vw; */
	display: none;
	font-weight: bolder;
}

#ad {
	font-size: 0.5em;
}