style.css

html{
	font-family: 'Noto Sans JP',
	sans-serif;
	font-weight: 700;
	color: #503c14;
	touch-action: manipulation;
}

body{
	background-color: #ffffff;
	width:100vw;
	margin:0;
}

#header{
	text-align: center;
	font-size: 4vh;
}

#main{
	display:flex;
	text-align: center;
	flex-direction: column;
	align-items: center;
}

.Tab{
	z-index: 10;
	overflow-x: auto;
	overflow-y: auto;
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0px 0px 6px #787c7E ;
	border:1px solid #929292;
	width:70vw;
	height:50vh;
	max-width:700px;
	max-height:50vh;
	font-size: 2rem;
}

.batu {
	z-index: 0;
	opacity: 50%;
	position: fixed;
	text-align: center;
	top: 0px;
	right: 0px;
	width: 100vw;
	height: 100vh;
}

.batu div{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}


.padding2{
	height:7vh;
}


.share{
	position:relative;
	margin:50px auto;
	width:30vw;
	height:5vh;
	max-width: 300px;
	border-radius: 6px;
	background-color: #1D9BF0;
}
.share img{
	position:absolute;
	top:50%;
	left:50%;
	height:40px;
	transform:translate(-50%, -50%);
}
.share2 {
	position: relative;
	width: 30vw;
	height: 5vh;
	max-width: 300px;
	border-radius: 6px;
	background-color: #1D9BF0;
}

.share2 img {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 40px;
	transform: translate(-50%, -50%);
}
.win{
	font-size:100px;
	color:#6AAA64;
}
.lose{
	font-size:60px;
	color:#787c7E;
}

.errors{
	position:absolute;
	top:100px;
	display:flex;
	flex-direction: column;
}

.error{
	z-index: 4;
	margin:0.2vh;
	position:relative;
	color:#fff;
	padding:0 1.5vw;
	width:auto;
	height:4vh;
	display: grid;
	justify-content:center;
	align-items: center;
	background-color:#000;
	border-radius: 5px;
	transition:all 0.5s 0.5s ease;
}


.tiles{
	z-index: 0;
	max-height: 50vh;
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	align-items:center;
	margin-top: 1.5vh;
}

.tile {
	position: relative;

	background-color: #fff;
	width: 4.5vh;
	height:4.5vh;
	max-width: 60px;
	max-height: 60px;
	border-radius: 5px;
	border: 2px solid #aaaaaa;
	margin: 3px;
}


.tileChar {
	font-size: min(40px, 4vw);
	position: absolute;
	top:45%;
	left:50%;
	transform:translate(-50%, -50%);
}




.row{
	display:flex;
	flex-direction: row;
	/* flex-wrap: wrap; */
	justify-content: center;
}

.keyBoard{
	position: absolute;
	bottom:6vh;
	display: flex;
	flex-direction: column;
}

.strKey{
	width:calc( 70vw + 60px );
	height:calc( 35vw + 30px );
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height:280px;
	max-width:560px;
	min-height:205px;
	min-width:410px;
}

.strKey button{
	margin:3px;
	font-size:130%;
	width:7vw;
	height:7vw;
	max-height:50px;
	max-width:50px;
	min-height:35px;
	min-width:35px;
}

.padding{
	margin:3px;
	width:7vw;
	height:7vw;
	max-height:50px;
	max-width:50px;
	min-height:35px;
	min-width:35px;
}

.controlKey{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.controlKey button{
	/* touch-action: manipulation; */
	margin:3px;
	width:15vw;
	height:7vw;
	max-height:50px;
	max-width:100px;
	min-height:35px;
	min-width:70px;
}


.infoButtons{
	margin:0 0 30px 0;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
}

.howTo {
	background-color: #ff99af !important;
	color: #fff !important;
}

.wordList {
	background-color: #89c98e !important;
	color: #fff !important;
}

.howTo:hover {
	background-color: #f87c97 !important;
}

.wordList:hover {
	background-color: #63c06a !important;
}
.howTo:active {
	background-color: #c75a71 !important;
}

.wordList:active {
	background-color: #337c39 !important;
}

.infoButtons button{
	
	opacity: 50%;
	padding:6px 6px;
}

#main button{
	font-family: 'Noto Sans JP',
	sans-serif;
	font-weight: 700;
	color: #503c14;
	font-size:130%;
	border-radius: 3px;
	border:none;
	background-color: #dfdfdf;
	transition: background-color 0.2s;
}
#main button:hover {
	background-color: #cfcfcf;
}

#main button:active {
	background-color: #b8b8b8;
}


.incorrect {
	background-color: #787c7E !important;
	color: #fff !important;
}

.correct {
	background-color: #6AAA64 !important;
	color: #fff !important;
}

.half {
	background-color: #C9B458 !important;
	color: #fff !important;
}

#footer {
	position: fixed;
	width: 100%;
	bottom: 0;
}
a {
	color: #503c14;
	text-decoration: none;
}
.cash {
	color: #503c14;
	text-decoration: none;
	position: absolute;
	font-size: 2vh;
	left: calc(50vw - 14vh);
	bottom: 1px;
}