.code {
	
	max-width: 6em;
	
}

.checkbox {
	
	position: relative;
	font-size: 22px;
	padding-left: 35px;
	
}

.checkbox input {
	
	width: 0;
	height: 0;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	
}

.checkbox .mark {
	
	width: 25px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	background: #ddd;
	border-radius: 50%;
	
}

.checkbox:hover input ~ .mark {
	
	background: #fff;
	
}

.checkbox .mark::after {
	
	content: '';
	width: 5px;
	height: 10px;
	display: none;
	position: absolute;
	top: 5px;
	left: 9px;
	border: 3px solid #333;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
	
}

.checkbox input:checked ~ .mark::after {
	
	display: block;
	
}

.basement {
	
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-top: 2.5em;
	
}

.blocks div {
	
	margin-bottom: 2em;
	
}

.blocks :last-child {
	
	margin-bottom: 1em;
	
}

.logout {
	
	position: absolute;
	top: 0.25em;
	right: 1em;
	
}

.logout input[type="submit"] {
	
	font-size: 0.75em;
	color: #fff;
	background-color: #a00;
	border: none;
	
}

.logout input[type="submit"]:hover {
	
	background-color: #f00;
	box-shadow: 0 0 0.5em rgba(255, 0, 0, 0.5);
	transition: 1s;
	
}

.back {
	
	position: absolute;
	top: 0.2em;
	right: 0;
	left: 0;
	
}

.page input[value="<"],
.page input[value=">"] {
	
	width: 5%;
	height: 100%;
	position: fixed;
	top: 0;
	font-size: 1.5em;
	color: #fff;
	background: none;
	border: none;
	border-radius: 0;
	
}

.page input[value="<"] {
	
	left: 0;
	
}

.page input[value=">"] {
	
	right: 0;
	
}

.page input[value="<"]:hover,
.page input[value=">"]:hover {
	
	background: none;
	box-shadow: none;
	
}

.page input[value="<"]:hover {
	
	background: linear-gradient(to left, transparent, rgba(66, 195, 251, 0.5));
	
}

.page input[value=">"]:hover {
	
	background: linear-gradient(to right, transparent, rgba(255, 119, 246, 0.5));
	
}

.pages div {
	
	display: inline-block;
	margin: auto 5px;
	vertical-align: middle;
	
}

.pages input[type="submit"] {
	
	font-size: 1.25em;
	background: none;
	border: none;
	border-radius: 0;
	
}

.pages input[type="submit"]:hover {
	
	background: none;
	background: radial-gradient(rgba(0, 255, 255, 1), rgba(0, 255, 255, 1), rgba(0, 255, 255, 0.5), transparent, transparent);
	box-shadow: none;
	
}

form {
	
	margin: 5px auto;
	
}

input {
	
	font-family: PTSans, Arial, sans-serif;
	color: #333;
	border: none;
	border-radius: 0.5em;
	padding: 0.12em 0.25em;
	text-align: center;
	
}

input:focus-visible {
	
	box-shadow: 0 0 0.5em rgba(66, 195, 251, 1);
	outline: none;
	transition: 1s;
	
}

input[type="submit"] {
	
	background-color: #ddd;
	border: 2px solid #aaa;
	
}

input[type="submit"]:hover {
	
	background-color: #fff;
	border-color: #ccc;
	box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.5);
	
}