@font-face {
	font-family: mainfont;
	src:
		url(../fonts/STZHONGS.ttf) format(opentype),
		local(STZHONGS);
}

@font-face {
	font-family: mahjongfont;
	src:
		url(../fonts/Riichi-Mahjong-Color.otf) format(opentype),
		local(Riichi-Mahjong-Color);
}

html,
body {
	font-family: mainfont;
	user-select: none;
	font-size: min(1.8vw, 1.8vh);
}

.mahjong {
	font-family: mahjongfont;
}

body {
	background-color: #FFF;
	color: #000;
	display: flex;
	justify-content: center;
	width: 100vw;
	overflow-x: hidden;
	margin: 0;
}

a{
	color: #000;
	text-decoration: none;
}

summary {
	text-align: center;
}

input[type="range"]{
	width: 100%;
}

datalist {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tiles {
	display: flex;
	font-size: min(5vw, 5vh);
}

.mini.tiles {
	display: flex;
	font-size: min(2.5vw, 2.5vh);
}

.title {
	font-size: min(5vw, 5vh);
	margin-top: min(2vw, 2vh);
	margin-bottom: min(2vw, 2vh);
}

.title2 {
	font-size: min(3vw, 3vh);
	margin-top: min(1vw, 1vh);
	margin-bottom: min(1vw, 1vh);
}

.clickable {
	cursor: pointer;
}

.bold {
	font-weight: 900;
}

.button {
	margin: min(1vw, 1vh);
	font-size: min(2.5vw, 2.5vh);
	font-weight: 900;
}

.purple {
	color: #80F;
}

.cyan {
	color: #0AA;
}

.green {
	color: #080;
}

.lime {
	color: #8A0;
}

.yellow {
	color: #CC0;
}

.red {
	color: #F00;
}

.less{
	opacity: 60%;
}

.hidden {
	display: none !important;
}