body {
			margin: 0;
			padding: 0;

			font-family: "Miranda Sans", sans-serif;
			font-optical-sizing: auto;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;


			
		}

		img {
			max-width: 100%;
		}

	
		
		.outer {
			width: 1200px;
			height: 800px;
			background: rgb(255, 255, 255);
			position: relative;
			margin: auto;
			margin-top: 20px;
			box-sizing: border-box;
			background-image: url('graphics/pexels-zeynep-aspen.jpg'); image-rendering: crisp-edges;
			background-size: cover;
			box-shadow: 0px 0px 40px #554a896b;
			border-radius: 8px;
		}
		.wandow {
			background: #ffebf3;
			position: absolute;
			box-sizing: border-box;
			padding: 4px;
			border-radius: 6px;
			box-shadow: 2px 2px 14px #636d8a2e;
		}

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

		.wandow.main {
			height: 530px;
			width: 780px;
			top: 240px;
			left: 350px;
		}
		

		.wandow.little {
			height: 250px;
			width: 250px;
			top: 30px;
			left: 70px;
			
		}

		.wandow.nav {
			height: 460px;
			width: 220px;
			top: 300px;
			left: 80px;
			
		}

		.wandow.about {
			height: 180px;
			width: 600px;
			top: 20px;
			left: 400px;
		
			
		}

		/* MAKE THE LITTLE WINDOW SCROLL*/
		.wandow.little .content {
			overflow-y: auto;
		}

		.header	{
			background: #b28270;
			color: rgb(249, 248, 242);
			font-weight: bold;
			padding: 6px 12px;
			box-sizing: border-box;
			margin-bottom: 4px;
			font-family: monospace;
			font-size: 12px;
			letter-spacing: 1px;
			border-radius: 4px;
			cursor: move;
			background-image: url(img/headerbg.png);
			background-position: right;
			background-repeat: repeat-y;
		}

		.content {
			height: calc(100% - 34px);
			width: 100%;
			background: rgb(249, 248, 242);
			box-sizing: border-box;
			border-radius: 4px;
			position: relative;
		}

		.menu {
			height: 580px;
			position: absolute;
			width: 80px;
			left: 40px;
			top: 160px;
			text-align: center;
		}

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

		.menu a:hover {
			display: block;
			margin-bottom: 20px;
			padding: 3px;
			border-radius: 6px;
			font-size: 14px;
		}

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

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

		.title {
			font-family: "Playwrite NO", cursive;
			font-weight: 600;
			font-style: normal;
			color: white;
			text-shadow: 0px 0px 16px #ad8070;
			font-size: 36px;
			position: absolute;
			left: 42px;
			top: 30px;
		}

		.menu-label {
			background: #bdb9f0;
			color: white;
			padding: 4px 8px;
			display: inline-block;
			border-radius: 4px;
			text-shadow: 0px 0px 4px #2d19b5;
			box-shadow: 3px 3px 8px #1610462e;
		}

		.statusbar {
			position: absolute;
    		height: 30px;
    		width: 100%;
    		background: #9db4d2;
    		color: #fff;
    		bottom: 0;
    		font-size: 12px;
    		line-height: 26px;
    		padding: 0 6px;
    		box-sizing: border-box;
    		box-shadow: 3px 3px 16px #c2bee0;
    		border-bottom-left-radius: 8px;
    		border-bottom-right-radius: 8px;
		}
		.statusbar a {
			color: #fff;
		}

		.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;
		}

		html, body, div {
			scrollbar-color: #a6add2 #d9dcec;
			scrollbar-width: thin;
		}

		::-webkit-scrollbar {
			width: 4px;
		}

		::-webkit-scrollbar-track {
			background: #d9dcec;
		}

		::-webkit-scrollbar-thumb {
			background: #a6add2;
			border-radius: 4px;
			border: 2px solid #d9dcec;
		}

		::-webkit-scrollbar-thumb:hover {
			background: #c67293;
		}

		.pink {
			background: #538560;
			text-shadow: 0px 0px 4px #bb458f;
			font-size: 20px;
			min-width: 150px;
			min-height: 40px;
		}

		.purple {
			background: #3e6754;
			text-shadow: 0px 0px 4px #9c45bb;
			font-size: 20px;
			min-width: 150px;
			min-height: 40px;
		}

		.blurple {
			background: #355e58;
			text-shadow: 0px 0px 4px #9c45bb;
			font-size: 20px;
			min-width: 150px;
			min-height: 40px;
		}

		.blue {
			background: #243d42;
			text-shadow: 0px 0px 4px #4547bb;
			font-size: 20px;
			min-width: 150px;
			min-height: 40px;
		}

		span {
    		padding: 0.6em 13.7px;
    		line-height: 1.8em;
    		font-size: 32px;
    		font-family: "Schoolbell", Roboto, Arial,
	}
		span.highlight {
			font-weight: bolder;
			background: linear-gradient(104deg, rgba(92, 52, 4, 0) 0.9%, rgba(117, 77, 5, 0.411) 2.4%, rgba(102, 63, 4, 0.5) 5.8%, rgba(98, 55, 4, 0.1) 93%, rgba(99, 63, 4, 0.7) 96%, rgba(104, 59, 1, 0.7) 98%), linear-gradient(183deg, rgba(130, 97, 47, 0) 0%, rgba(153, 129, 85, 0.3) 7.9%, rgba(179, 149, 93, 0) 15%);
			padding: 0.6em 13.7px;
			box-decoration-break: clone;
			-webkit-box-decoration-break: clone;
			margin: 0;
			border-radius: 7.5px;
			text-shadow: -12px 12px 9.8px rgba(120, 93, 53, 0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
	}
		.schoolbell-regular {
  			font-family: "Schoolbell", cursive;
  			font-weight: 400;
  			font-style: normal;
	}