html {
	font-family: -apple-system, sans-serif;
	font-size: 4vw;
	text-align: center;
	background: #F8F8F8;
}

body {
	margin: 0;
	padding-bottom: 8rem;
}

img {
	width: 100%;
}

input,
textarea,
button,
select {
	font-size: inherit;
	font-family: inherit;
	outline: none;
}
label {
	cursor: pointer;
}

.material-icons {
	vertical-align: bottom;
	font-size: 120%;
}

button {
	border: none;
	margin: 0;
	padding: 0;
	background: 0;
	-webkit-user-select: none;
	user-select: none;
}

/*//////////////////////////////////////// class ////////////////////////////////////////*/

.entry[data-color="1"] .body,
input[type="radio"][name="color"][value="1"] + label {
	background: #D3B7FF;
}
.entry[data-color="2"] .body,
input[type="radio"][name="color"][value="2"] + label {
	background: #80D2FF;
}
.entry[data-color=""] .body,
.entry[data-color="3"] .body,
input[type="radio"][name="color"][value="3"] + label {
	background: #98D50F;
}
.entry[data-color="4"] .body,
input[type="radio"][name="color"][value="4"] + label {
	background: #FFDB14;
}
.entry[data-color="5"] .body,
input[type="radio"][name="color"][value="5"] + label {
	background: #FFA429;
}

footer aside {
	position: fixed;
	z-index: 10;
	left: 0;
	bottom: 0;
	width: 100%;
}
footer aside nav {
	position: absolute;
	bottom: 2rem;
	border-radius: 0.5em;
	padding: 1em;
	background: white;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
}
footer aside nav .material-icons {
	font-size: 1.8rem;
}

footer aside nav.index,
footer aside nav.update {
	right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
footer aside nav.home {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

footer aside nav.update .material-icons {
	font-size: 2.4rem;
}