// Standard styling, you can ignore this
body {
	align-items: center;
	display: flex;
	font-family: 'Roboto', sans-serif;
	height: 100vh;
	justify-content: center;
	margin: 0;
	div {
		font-size: 15px;
		margin-top: 15px;
		text-align: center;
	}
}
.center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}

// Custom radio buttons
form {
	&#smileys {
		input[type="radio"] {
			-webkit-appearance: none;
			width: 50px;
			height: 50px;
			border: none;
			cursor: pointer;
			transition: border .2s ease;
			filter: grayscale(100%);
			margin: 0 5px;
			transition: all .2s ease;
			
			&:hover, &:checked {
				filter:	grayscale(0);
			}
			
			&:focus {
				outline: 0;
			}
			
			
		}
	}


}

.choice-result {
	font-family: 'Roboto', sans-serif;
	
}



.mtt {
	position: fixed;
	bottom: 10px;
	
}



/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}