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


.main{
	display: flex;
	justify-content: center;
}

.left{
	padding:0.5em;
	width:650px;
}
.right{
	width:350px;
	border:solid thin #000000;
	margin-top:1em;
	padding:1em;
}

.left > div{
	border:solid thin #000000;
	margin-top:1em;
	padding:0.5em;
	border-radius: 0.5em;
}


.help{
	font-size:0.8em;
}

.pr{
	text-align:center;
}


textarea{
	width:98%;
}

.text-right{
	text-align:right;
}

.text-center{
	text-align:center;
}


#practice{
	font-size:1.3em;
	width:80%;
}

.left h2{
	text-align:center;
}

.header,.footer{
	text-align:center;
}

h1{
	font-size:8vw;
}

h1 a{
	text-decoration: none;
	color:#000000;
}


@media screen and (max-width:800px) { 
	.left, .right{
		width:100%;
	}

	.main{
		display: flex;
		justify-content: center;
		flex-flow: column nowrap; 
	}
}

#cellphone img{
	width:45%;
}

.shorter img{
	width:100%;
}



button{
	user-select: none;
}

.pr img{
	width:90%;
	max-width: 468px;
}