html {
	background-color:white;
	background-size:cover;
	background-position:bottom right;
	background-attachment: fixed;
}

/* COMMON */

button, input[type=submit] {
	font-weight:bold;
	border-radius:5vmin;
	border: 0.75vmin solid rgba(0,0,0,0.25);
    border-bottom: 2vmin solid rgba(0,0,0,0.25);
	color:black;
	background:white;
	position:relative;
}

button.option {
	width:80vmin;
	height:30vmin;
	margin-bottom:5vmin;
	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: -5vmin;
    top: -5vmin;
    width: 12vmin;
    height: 12vmin;
    background: white;
    border-radius: 50%;
    border: 0.75vmin solid rgba(0,0,0,0.25);
	display:none;
	font-size:0;
}

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

button.option > div.icon > img {
	width:100%;
	height:100%;
}

button.effect {
	width:20vmin;
	height:20vmin;
	font-size: 10vmin;
}

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

/* progress */

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

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

span.state {
	font-size:5vmin;
	position:absolute;
	left:0;
	top:4vmin;
	width:100%;
	/* text-align:right; */
	color:black;
	/* padding-top:4vmin; */
	/* padding-right:3vmin; */
}

/* CONNECTING */

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

div.page[data-name="connecting"] div > span {
	display:block;
	font-size:20vmin;
}

/* WAITING */

div.page[data-name="waiting"] button.effect {
	width:40vmin;
	height:40vmin;
	font-size:20vmin;
}

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

/* RESULT */

div.page[data-name="result"] h1 {
	font-size:25vmin;
	font-weight:bold;
	margin-top:2vmin;
	margin-bottom:10vmin;
}

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

div.page[data-name=result] input:not([type=submit]) {
    width: 80vmin;
    height: 15vmin;
    background: rgba(0, 0, 0, 0.05);
	color:black;
    border-radius:5vmin;
    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;
    font-weight:bold;
}

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

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

/* */