*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#mainBox {
	position: relative;
	display: grid;
	width: 55rem;
	height: 50rem;
	margin: auto;
	margin-top: 10px;
	background: #0A0A0A;
	gap: 0.1rem 0.3rem;
	padding: 0.5rem;
	grid-template-areas:
			"header header"
			"strip strip"
			"nav main"
			"nav footer";
	justify-content: center;
	grid-template-columns: 10rem 43.6rem;
	grid-template-rows: 10rem 1.3rem 35.9rem 1.5rem;
	border-radius: 8px;
}



	header {
		position: relative;
		color: white;
		grid-area: header;
		background: black;
		padding: 8px;
		overflow: clip;
	}
		#logo {
			position: absolute;
			right: 10px;
			top: 10px;
			z-index: 5;
			height: 75px;
			transition: 0.5s;
		}
		.croc {
			top: 0px;
			right: 0;
			height: 360px;
			width: 600px;
			margin: 0.5rem;
			position: absolute;
			z-index: 4;
		}
		
		header > ul {
			font-family: 'IM Fell DW Pica SC';
			display: inline-table;
			font-size: 2.5rem;
			line-height: 2.2rem;
			list-style: none;
			position: relative;
			z-index: 5;
		}
		li > a {
			text-decoration: none;
			color: white;
			transition: 1s;
		}
		li > a:hover {
			color: brown;
			transition: 0.2s;
		}
		header > #wheel {
			color: #210606;
			z-index: 1;
			position: absolute;
			top: -5px;
			left: -20px;
			font-size: 1.2rem;
			height: 11rem;
			width: 1000vh;
			overflow: clip;
			animation: marqmoving 60s linear;
			animation-iteration-count: infinite;
			letter-spacing: 0.4vw;   
			pointer-events: none;
		}
			@keyframes marqmoving {
				from{transform: translate(0px, -1px); }
				to{transform: translate(-1440px, -1px); }
			}

	#strip {
		color: white;
		background: black;
		grid-area: strip;
	}
		#strip > p {
			font-size: 0.9rem;
			padding: 0.1rem;
			text-align: center;
		}
	
	main {
		font-family: 'Trebuchet MS', sans-serif;
		background: #0A0A0A;
		grid-area: main;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-content: flex-start;
		padding: 5px 5px;
		gap: 1%;
	}
		main > #intro {
			color: white;
			background-color: #040404;
			width: 100%;
			height: 30%;
			padding: 20px;
		}
			#intro > p {
				font-size: 1.25rem;
				text-align: center;
				margin-right: 270px;
			}
		main > #updates {
			color: white;
			background-color: #040404;
			width: 30%;
			height: 35%;
			overflow: scroll;
			scrollbar-width: none;
			padding: 10px;
		}
			#updates > span {
				width: 150px;
				text-align: center;
				font-size: 1.1rem;
				background-color: #0A0A0A;
				float: left;
				margin: -10px 0px 10px -10px;
			}
			#updates > p {
				margin-left: 0.6rem;
			}
			#updates > p > a {
				text-decoration: underline 0.1px;
				color: white;
				transition: 0.2s;
			}
			#updates > p > a:hover {
				transition: 0.2s;
				color: brown;
			}
			
		main > #currently {
			background-color: #040404;
			width: 69%;
			height: 35%;
			padding: 5px 10px;
			position: relative;
			color: white;
			overflow: wrap;
		}
			#currently > .gameCart {
				position: absolute;
				left: 65px;
				bottom: 25px;
				z-index: 1;
				width: 140px;
				float: left;
				animation: spin 19s infinite linear;
			}
				@keyframes spin {
					100% {transform: rotate(360deg);}
				}
			#currently > .gameBox {
				position: absolute;
				height: 185px;
				z-index: 2;
			} 
			#currently > .doing {
				float:right;
				text-align: center;
				font-size: 1.1rem;
				background-color: #0A0A0A;
				width: 170px;
				margin: -5px -10px;
			}
		main > #votw {
			background-color: #040404;
			width: 39%;
			height: 33%;
			padding: 10px;
		}
			#votw > p {
				color: white;
				text-align: center;
				font-size: 1.1rem;
				width: 180px;
				float: left;
				background-color: #0A0A0A;
				margin: -10px 10px 8px -10px;
			}
		main > #poll {
			background-color: #040404;
			width: 29%;
			height: 33%;
		}
		main > #fuck {
			background-color: #040404;
			width: 30%;
			height: 33%;
			position: relative;
			overflow: clip;
		}
			#fuck > .detention {
				width: 205px;
				position: absolute;
				top: 10px;
				height: 170px;
				margin: auto;
				
			}
				#fuck > .bg {
					z-index: 1;
				}
				#fuck > .border {
					z-index: 3;
				}
			#fuck > p {
				font-size: 1.1rem;
				position: relative;
				z-index: 4;
				float: right;
				text-align: center;
				background-color: #0A0A0A;
				width: 130px;
				color: white;
				
			}




	nav {
		font-family: 'Trebuchet MS', sans-serif;
		color: white;
		position: relative;
		background: black;
		grid-area: nav;
		text-align: center;
	}
		nav > .status {
			font-family: 'Times New Roman', serif;
			padding: 5px;
			height: 120px;
		}
			.status > img {
				width: 100%;
				aspect-ratio: 4/3;
			}
			.status > p {
				color: white;
				position: absolute;
				text-shadow: 2px 2px 3px black;
				left: 3.3rem;
				top: -0.8rem;
				font-size: 1.5rem;
			}
		nav > .nav {
			background-color: #040404;
			border-radius: 3px;
		}
		nav > .links {
			margin: 5px;
		}
			.links > a {
				text-decoration: underline 0.1px;
				color: white;
				transition: 0.2s;
			}
			.links > a:hover {
				color:brown;
				transition: 0.2s;
			}
			.links > p {
				font-size: 1.05rem;
				margin-bottom: 5px;
			}
		
		nav > .graphics {
			
			height: 10rem;
			padding: 5px 2px 2px 2px;
			margin: 5px;
			margin-bottom: 10px;
		}
			.graphics > img {
				width: 135px;
				height: auto;
			}

		nav > .myButton {
			margin: 5px;
			margin-top: 15px;
			font-size: 1.05rem;
		}
			.myButton > a > img {
				margin-top: 10px;
				width: 130px;
				
			}
	footer {
		background: black;
		grid-area: footer;
		text-align: center;
		color: white;
		padding: 0.2rem;
		font-size: 0.9rem;
	}
		footer > p > a {
			color: white;
			text-decoration: underline 0.1px;
			transition: 0.2s;
		}
		footer > p > a:hover {
			color: brown;
			transition: 0.2s;
		}