body {
	background-image:url('/graphics/background-mobile.jpg');
	background-size:100% auto;
}

/* COMMON */

button, input[type=submit] {
	background:#847b6a;
	color:#fcf4ef;
	position:relative;
}

button.option {
	width:80vmin;
	height:25vmin;
	margin-bottom:6vmin;
	font-size:12vmin;
}

button.option.selected,
button.option.hover {
	scale: 1.05;
}

button.option.unselected {
	opacity:0.5;
}

button.option > div.icon {
	position: absolute;
    right: -4vmin;
    top: -4vmin;
    width: 10vmin;
    height: 10vmin;
    background: white;
    border-radius: 50%;
	display:none;
	font-size:0;
}

button.option.selected > div.icon,
button.option.correct > div.icon {
	display:block;
}

button.option > div.icon > img {
	width:60%;
	height:60%;
	margin:20%;
}

button.option > div.icon.answer > img {
	filter: invert();
}

button.option > div.icon.correct {
	background:#ff5073;;
}

button.option > div.icon.incorrect {
	background:#282828;
}

button.effect {
	width:20vmin;
	height:20vmin;
	background:#ff5073;
}

button.effect > img {
	width:10vmin;
	height:10vmin;
}

/* progress */

div.progress {
	height:2vmin;
	width:100%;
	/* background:rgba(0, 0, 0, 0.05); */
}

div.progress > div {
	height:100%;
	width:0;
	background:#ff5073;
}

span.state {
	font-size:6vmin;
	font-family:"GT America";
	position:absolute;
	left:0;
	top:6vmin;
	width:100%;
}

/* CONNECTING */

/* div.page[data-name="connecting"] img {
	width:30vmin;
	height:30vmin;
} */

/* WAITING */

div.page[data-name="waiting"] img {
	width: 40vmin;
	filter: invert(100%) sepia(70%) saturate(551%) hue-rotate(294deg) brightness(104%) contrast(98%); /* https://codepen.io/sosuke/pen/Pjoqqp #fcf4ef */
}

/* RESULT */

div.page[data-name="result"] h1 {
	font-size:20vmin;
	margin-top:6vmin;
}

div.page[data-name="result"] h1 > span {
	opacity: 0.5;
	font-size:12vmin;
}

div.page[data-name="result"] h2 {
	font-size: 8vmin;
    margin-top: 10vmin;
}

div.page[data-name="result"] p {
	font-size: 6vmin;
	margin-top:4vmin;
	margin-bottom:3vmin;
}

div.page[data-name=result] input:not([type=submit]) {
    width: 80vmin;
    height: 15vmin;
    background: #f8e8d6;
	border: 0.1vmin solid #847b6a;
	font-family: "GT America";
	color:#282828;
    font-size:5vmin;
    margin-top:4vmin;
	text-align:center;
}

div.page[data-name=result] input[type=submit] {
    width: 60vmin;
	height:15vmin;
	font-size:5vmin;
    margin-top:5vmin;
}

div.page[data-name="result"] button {
	width:20vmin;
	height:20vmin;
}

div.page[data-name="result"] button > img {
	width:15vmin;
	height:15vmin;
}

/* */