@font-face {
	font-family: "ORCAExt";
	src : url("./font/OCR_A_Extended.ttf") format("truetype");
}
@keyframes spin {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(90deg) rotateY(30deg) rotateZ(120deg);
    }
	50% {
        transform: rotateX(60deg) rotateY(72deg) rotateZ(270deg);
    }
	75% {
        transform: rotateX(90deg) rotateY(180deg) rotateZ(270deg);
    }
	100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}
* {
	margin : 0;
	padding : 0;
	font-weight : bold;
	font-family : "ORCAExt";
	font-size : 30px;
	transition : 0.2s linear;
}
body {
	.main {
		background : #000;
		width : 100%;
		height : auto;
		.icon {
			display : flex;
			width : 100%;
			height : 60px;
			background : #000;
			align-items : center;
			justify-content : center;
			.logo {
				color : #fff;
				text-align : center;
			}
			&:hover {
				background : #fff;
				height : 80px;
				.logo {
					color : #000;
					font-size : 120%;
				}
			}
		}
		.nav_bar {
			.menu {
				background : #fff;
				ul {
					display : flex;
					list-style : none;
					justify-content : center;
					height: 40px;
					li {
						margin: auto;
						height: 100%;
						a {
							text-decoration : none;
							font-size : 60%;
							color : #000;
							&:hover {
								color : #505050;
								font-size : 80%;
							}
						}
					}
				}
			}
			.directory {
				color : #fff;
				a {
					font-size : 100%;
					&:hover {
						color : #505050;
						font-size : 120%;
					}
				}
			}
		}
		.background {
			width: 100%;
			height: 100%;
			perspective: 1500px;
			position: fixed;
			.cube {
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				animation: spin 20s linear infinite;
				div {
					width: 100px;
					height: 100px;
					border: 5px solid #fff;
					border-radius: 5px;
					position: absolute;
				}
				.zp { transform: rotateZ(0deg) translateZ(50px); }
				.zn { transform: rotateY(180deg) translateZ(50px); }
				.xp { transform: rotateY(90deg) translateZ(50px); }
				.xn { transform: rotateY(-90deg) translateZ(50px); }
				.yp { transform: rotateX(90deg) translateZ(50px); }
				.yn { transform: rotateX(-90deg) translateZ(50px); }
			}
		}
		.content {
			width : 100%;
			color : #fff;
			padding-top : 20px;
			text-align : center;
			h1 {
				font-size : 100%;
				text-align: center;
			}
			h2 {
				font-size : 75%;
				text-align: left;
				margin-top: 20px;
				margin-left: 10px;
			}
			h3 {
				font-size : 60%;
				text-align: left;
				margin-top: 10px;
				margin-left: 25px;
			}
			ul {
				padding-top: 10px;
				display : flex;
				list-style : none;
				justify-content : center;
				flex-wrap: wrap;
				li {
					margin: auto;
					max-width: 500px;
					height: auto;
					padding-top: 50px;
					a {
						text-decoration : none;
						font-size : 60%;
						color : #fff;
						&:hover {
							color: #505050;
							font-size : 80%;
						}
					}
					p {
						padding-top: 5px;
						font-size : 50%;
						text-align: left;
					}
				}
			}
			label {
				font-size : 50%;
				text-align: center;
				min-width: 500px;
				color: #fff;
				p {
					display: none;
					font-size : 100%;
					text-align: center;
					min-width: 500px;
				}
			}
			#question:checked + label {
				p {
					display: inline-block;
				}
			}
			textarea {
				font-size: 50%;
				width: 90%;
				height: 150px;
			}
			select {
				font-size: 80%;
				width: 200px;
				height: 20px;
				option {
					font-size: 100%;
				}
			}
		}
		.footer {
			background: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 60px;
			p {
				padding-top: 10px;
				font-size : 50%;
				text-align: center;
				margin-left: 50px;
				margin-right: 50px;
			}
		}
		p {
			padding-top: 10px;
			font-size : 50%;
			text-align: left;
			margin-left: 50px;
			margin-right: 50px;
			color : #909090;
			i {
				font-size : 100%;
				color : #fff;
			}
			a {
				font-size : 100%;
				&:hover {
					color: #505050;
				}
			}
			sup {
				font-size : 80%;
				color : #fff;
			}
		}
		a {
			text-decoration : none;
			color : #fff;
			img {
				width : 20px;
				height : 20px;
			}
		}
		h1 {
			align-items : center;
			padding-top : 1%;
			font-size : 100%;
			p {
				padding-top : 0.5%;
				font-size : 60%;
			}
		}
	}
}