body {
			margin: 0;
			padding: 0;
			font-family: "Miranda Sans", sans-serif;
			font-optical-sizing: auto;
			background: rgb(12, 12, 12);
            padding: 1rem;
            padding-bottom: 4rem;
            box-sizing: border-box;
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
		}

		img {
			max-width: 100%;
			
		}

		/*--> having a proper look in the source code, be a min <-- */

		/*i should probably just combine the two as im not gonna be using anything other than the about page*/
        /*sure. where's the code bradley played with? bnuy*/
		

		.outer {
			width: 1600px;
			height: 820px;
			background: white;
			position: relative;
			margin: auto;
			margin-top: 20px;
			box-sizing: border-box;
			background-image: url('media/stars.gif');
			background-size: cover;
			box-shadow: 0px 0px 80px #ffffff78;
			border-radius: 8px;
		}
		.wandow {
			background: rgb(83, 82, 83);
			position: absolute;
			border: 1px solid black;
			box-sizing: border-box;
			padding: 4px;
			border-radius: 2px;
			box-shadow: 2px 2px 14px #00000094;
		}

		.wandow::after {
			content: '';
			position: absolute;
			border-radius: 2px;
			inset: 0px;
			border-top: 2px solid #aeaeae;
			border-left: 2px solid #aeaeae;
			border-bottom: 2px solid #575757;
			border-right: 2px solid #575757;
			pointer-events: none;
			
		}

		.wandow.main {
			height: 660px;
			width: 800px;
			top: 40px;
			left: 750px;
		}

		.wandow.little {
			height: 250px;
			width: 250px;
			top: 470px;
			left: 530px;
		}
		/* MAKE THE WINDOW SCROLL*/
		.wandow.main .content {
			overflow-y: auto;
			scrollbar-color: rgb(126, 64, 130) rgba(126, 91, 123, 0.271);
  scrollbar-width: thick;
		}

		/* MAKE THE LITTLE WINDOW SCROLL*/
		.wandow.little .content {
			overflow-y: scroll;
			scrollbar-color: rgb(126, 64, 130) rgba(126, 91, 123, 0.271);
  scrollbar-width: thick;
		}

		.header	{
			background: rgb(57, 37, 77);
			color: #fffdfd;
			padding: 6px 12px;
			border: 1px solid black;
			box-sizing: border-box;
			margin-bottom: 4px;
			font-family: monospace;
			font-size: 12px;
			letter-spacing: 1px;
			border-radius: 4px;
			cursor: move;
			
		}

		.content {
			height: calc(100% - 34px);
			width: 100%;
			background: rgb(241, 239, 239);
			box-sizing: border-box;
			border: 1px solid black;
			border-radius: 4px;
			position: relative;
		}

		.menu {
			height: 500px;
			position: absolute;
			width: 120px;
			left: 40px;
			top: 300px;
			text-align: center;
			column-width: 400px;
		}

		.menu a {
			display: block;
			margin-bottom: 20px;
			padding: 6px;
			background: transparent;
			border: 1px dashed transparent;
			border-radius: 6px;
			font-size: 14px;
		}

		.menu a:hover {
			display: block;
			margin-bottom: 20px;
			padding: 6px;
			background: #ffffff42;
			border: 1px dashed black;
			border-radius: 6px;
			font-size: 14px;
		}

		.menu img {
			display: block;
			margin: auto;
			margin-bottom: 6px;
		}

		.content iframe {
			border: 0;
			width: 100%;
			height: 100%;
		} 

		.title {
			font-family: "Special Elite", system-ui;
			font-weight: 400;
			font-style: normal;
			color: white;
			text-shadow: 0px 0px 16px black;
			font-size: 36px;
			position: absolute;
			left: 42px;
			top: 40px;
		}

		.menu-label {
			background: rgb(72, 47, 71);
			color: white;
			padding: 3px 6px;
			display: inline-block;
		}

		.statusbar {
			border: 2px solid #333;
			position: absolute;
			height: 30px;
			width: 100%;
			background: black;
			color: #868686;
			bottom: 0;
			font-size: 12px;
			line-height: 26px;
			padding: 0 6px;
			box-sizing: border-box;

			box-shadow: 3px 3px 16px black;

			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}

		.statusbar a {
			color: #868686;
		}

		.statusbar-left {
			display: inline-block;
			float: left;
		}

		.statusbar-right {
			display: inline-block;
			float: right;
		}

		.statusbar-right a {
			text-decoration: none;
		}

		.statusbar-right svg {
			margin-left: 6px;
			margin-top: 3px;
			height: 20px;
		}
	
		

a {
	color: rgb(79, 55, 110);
}

h1 {
	margin-top: 0;
	font-size: 16px;
	border-bottom: 1px dotted black;
}

h1::before {
	content: "\2660\00B7\00B7\00B7";
	opacity: 0.3;
	padding-right: 3px;
}

h1::after {
	content: "\00B7\00B7\00B7\2660";
	opacity: 0.3;
	padding-left: 3px;
}

h2 {
	margin-top: 2rem;
	font-size: 14px;
	letter-spacing: 1px;
	border-bottom: 1px dotted black;
}

h2::before {
	content: '\25C6';
	color: rgb(90, 23, 99);
	margin-right: 4px;
}

th, td {
	padding: 6px 12px;
    vertical-align: top;
}

th {
	background: black;
	color: white;
}
/* latin-ext */
@font-face {
  font-family: 'Miranda Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mirandasans/v3/aFTN7Pt8ZWk4XsiWhk7Rb_edar31fl1lvaJ_TLjdLg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Miranda Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mirandasans/v3/aFTN7Pt8ZWk4XsiWhk7Rb_edar37fl1lvaJ_TLg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Miranda Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mirandasans/v3/aFTT7Pt8ZWk4XsiWhk7Rb_edYY35dFxHuIJ_XLg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Miranda Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mirandasans/v3/aFTT7Pt8ZWk4XsiWhk7Rb_edb435dFxHuIJ_.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/specialelite/v20/XLYgIZbkc4JPUL5CVArUVL0ntn4OSEFt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/specialelite/v20/XLYgIZbkc4JPUL5CVArUVL0ntnAOSA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}