#code {
	display: flex;
	flex-wrap: wrap;
	padding: 12.5px;
	> div:nth-child(odd) {
		flex: 1 1 45%;
		margin: 12.5px;
		min-height: 200px;
		position: relative;
		background: white;
		box-shadow: 0 0 10px black;
		border-radius: 15px;
		button {
			display: none;
			position: absolute;
			bottom: 12px;
			right: 12px;
			width: 31px;
			height: 31px;
			border: 1px solid black;
			border-radius: 50%;
			transition: 0.25s;
			&:hover {
				box-shadow: 0 0 10px #cd00cd;
				scale: 1.15;
			}
		}
		iframe {
			display: block;
			padding: 6px;
			width: stretch;
			height: calc(100% - 12px);
			border: none;
		}
	}
	> div:nth-child(even) {
		flex: 1 1 45%;
		margin: 12.5px;
		max-height: 300px;
		position: relative;
		background: white;
		box-shadow: 0 0 10px black;
		border-radius: 15px;
		p {
			margin: 0;
			padding: 38px 6px 6px;
			width: stretch;
			height: calc(100% - 38px - 6px);
			box-shadow: none;
			overflow: auto;
			overflow-wrap: anywhere;
			scrollbar-width: none;
		}
	}
	#calculation {
		height: 400px;
		+ div {
			max-height: 400px;
		}
	}
	#snake {
		height: 300px;
	}
}
.buttons {
	padding: 3px;
	width: stretch;
	display: flex;
	border-radius: 15px;
	position: absolute;
	top: 0;
	left: 0;
	button {
		flex: 1 1 30%;
		margin: 3px;
		border: 1px solid black;
		background: white;
		border-radius: 15px;
		&:nth-child(1):hover {
			box-shadow: 0 0 10px #f16528;
		}
		&:nth-child(2):hover {
			box-shadow: 0 0 10px #29a8df;
		}
		&:nth-child(3):hover {
			box-shadow: 0 0 10px #eddb4d;
		}
	}
	div {
		display: none;
		margin: 3px;
		width: 19px;
		height: 19px;
		position: absolute;
		border-radius: 50%;
		background: black;
		opacity: 0.5;
	}
}
@media (max-width: 698px) {
	#code > div:nth-child(odd) {
		flex: 1 1 80%;
		min-height: fit-content;
		button {
			display: block;
		}
	}
	#code > div:nth-child(even) {
		display: none;
	}
}
/*.code {
	display: flex;
	flex-wrap: wrap;
	margin: 12.5px;
	>div,
	>style {
		flex: 1 0 40%;
		display: flex;
		margin: 12.5px;
		padding: 6px;
		box-shadow: 0 0 10px black;
		border-radius: 15px;
		white-space: pre-wrap;
		&:nth-child(odd) {
			align-items: center;
			justify-content: center;
		}
	}
	style {
		display: block;
	}
}
.scrollbar {
	height: 200px;
	overflow: auto;
	scrollbar-width: none;
}
body .two {
	padding: 0;
	>* {
		margin: 6px;
	}
	+div {
		padding: 0;
		position: relative;
		div,
		style {
			width: 100%;
			padding: 6px;
			border-radius: 15px;
		}
		div {
			display: none;
		}
		svg {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 30px;
			height: 30px;
			padding: 1px;
			background: white;
			border-radius: 50%;
			transition: 0.25s;
		}
		.html1 {
			display: none;
		}
		input {
			position: absolute;
			visibility: hidden;
			top: 10px;
			right: 10px;
			z-index: 1;
			width: 32px;
			height: 32px;
			&:before {
				content: "";
				visibility: visible;
				position: absolute;
				width: 30px;
				height: 30px;
				border: 1px solid #000;
				border-radius: 50%;
				cursor: pointer;
				transition: 0.25s;
			}
			&:hover {
				&:before {
					box-shadow: 0 0 10px #cd00cd;
					scale: 1.15;
				}
				~svg {
					scale: 1.15;
				}
			}
			&:checked {
				+.css1 {
					display: none;
					+style {
						display: none;
						+.html1 {
							display: block;
							+div {
								display: block;
							}
						}
					}
				}
			}
		}	
	}
}*/