body,
  html {
	width: 100%;
	height: 100%;
  }

  body {
	background-color: #352d32;
	background-image: url("/images/pdj50270.gif");
  }

  #shade {
	/* background-color: #2e16a6;  */
	background-color: #12bb84;
	opacity: 0.25;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
  }
  
  #limiter {
	  height: 100%;
	  width: 100%;
	  position: relative;
	  max-width: 1700px;
	  margin: auto;
  }

  #wrapper {
	display: flex;
	height: 100%;
	width: 100%;
	padding: 50px 20px 25px 20px;
	box-sizing: border-box;
  }

  #nav,
  #nav-outer,
  #mainframe-outer,
  #mainframe,
  #extra-window-outer,
  #extra-window {
	height: 100%;
	box-sizing: border-box;
  }

  #nav-outer {
	height: 90%;
	margin-top: 60px;
	margin-right: 10px;
	transform: rotate(-2deg);
	box-shadow: 30px 20px 60px -5px rgba(195, 156, 22, 0.521);
	padding: 16px;
	z-index: 5;
  }

  #nav {
	height: 100%;
	width: 140px;
	border: none;
  }

  #mainframe-outer,
  #mainframe {
	border-radius: 15px;
  }

  #mainframe-outer {
	z-index: 10;
	box-shadow: 10px 10px 60px -5px rgba(11, 67, 223, 0.54);
	border: 3px double #0000a6;
	flex: 10 1 auto;
	position: relative;
  }

  #mainframe {
	border: none;
	width: 100%;
	background-color: yellow;
  }

  #main-forum-thread-badge {
	position: absolute;
	image-rendering: pixelated;
	bottom: -10px;
	right: -10px;
	z-index: 10;
	width: 100px;
	display: none;
  }

  #extra-window-outer,
  #extra-window {
	z-index: 5;
  }

  #extra-window-outer {
	width: 300px;
	margin: 0;
	/* margin-left: 10px; */
	box-shadow: 10px 10px 60px -5px rgba(199, 232, 244, 0.594);
	transform: rotate(1deg);
	flex: 1 1 auto;
	display: none;
  }

  #extra-window {
	position: relative;
	height: 100%;
	width: 100%;
	border: none;
  }

  #extra-window-bin {
	position: absolute;
	image-rendering: pixelated;
	top: 5px;
	right: 5px;
	z-index: 10;
  }

  .handler {
	width: 20px;
	padding: 0;
	cursor: ew-resize;
	flex: 0 0 auto;
	z-index: 30;
	display: none;
  }

  .handler::after {
	content: "";
	background-image: url("images/knob.png");
	background-size: 40px;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 40px;
	height: 100%;
	margin: 0 auto;
  }

  /* Page Junk */
  #junk {
	z-index: 50;
  }

  #junk img {
	image-rendering: pixelated;
  }

  .ui,
  #extra-window-bin {
	background-color: rgba(134, 156, 255, 0.73);
	padding: 2px;
	border: 2px outset rgb(37, 50, 115);
	cursor: pointer;
	width: 32px;
	height: 32px;
	line-height: 28px;
	text-align: center;
  }

  .ui img {
	width: 28px;
	vertical-align: middle;
  }

  .ui-text img {
	filter: drop-shadow(-3px -3px 0px #000000);
  }

  .floater {
	position: absolute;
	float: left;
	top: 0;
  }
  .floater-right {
	float: right;
  }

  #info img {
	width: 50px;
  }
  #guest img {
	width: 50px;
  }
  #tama img {
	width: 40px;
	filter: drop-shadow(-3px -3px 0px #000000);
  }
  #melon {
	z-index: -1;
  }
  #melon img {
	width: 210px;
	transform: rotate(-6deg);
  }

  #melonLink img {
	border: 2px outset rgb(43, 55, 111);
	border-radius: 30px;
	opacity: 0.7;
  }
  #melonLink img:hover {
	opacity: 1;
  }
  #melonLink a,
  #melonLink a:visited {
	color: white;
  }

  #text-always img {
	width: 240px;
	transform: rotate(-4deg);
  }
  #text-projects img {
	width: 130px;
  }
  
  /* BloxNav */
  #bloxNav {
	position: absolute;
	top: 1px;
	left: 570px;
	display: flex;
	align-items: center;
	padding: 6px;
	background-color: undefined;
	flex-flow: row;
	justify-content: flex-start;
	gap: 7px;
	font-family: Georgia;
	font-size: 18px;
  }
  
  #bloxNav,
  #bloxNav a,
  #bloxNav a:visited {
	color: #ffee00;
  }
  
  #bloxNav a {
	text-decoration: none;
  }
  
  .bloxBlock {
	background-color: #102532;
	padding: 4px 4.8px;
	border: 1px dashed #9494ff;
	outline: 6px dotted #753d00;
	border-radius: 50px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row;
	gap: 3px;
	height: 26px;
  }
  
  .bloxBlock img,
  .bloxBlock span {
	display: inline-block;
	vertical-align: middle;
  }
  
  .bloxBlock img {
	height: 32px;
	min-width: 32px;
	object-fit: contain;
	image-rendering: pixelated;
  }
  
  .bloxBlock span {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.1s;
  }
  
  .bloxBlock img:hover + span {
	max-width: 200px;
  }
  
  .melonlandBlock {
	background-color: #350a38;
	background-image: linear-gradient(#1a2b00, #370038);
  }
  
  .melonlandBlock span {
	max-width: fit-content;
	padding: 0px 5px
  }

  /* Junk Positions please! */
  #melon {
	top: 10px;
	left: 73px;
  }
  #info {
	top: 61px;
	left: 22px;
  }
  #guest {
	top: 56px;
	left: 87px;
  }
  #tama {
	top: 50px;
	left: 166px;
  }
  #text-always {
	top: 16px;
	left: 11px;
  }
  #text-projects {
	top: 8px;
	left: 443px;
  }
  #ui-full {
	top: 6px;
	left: 262px;
  }
  #ui-light {
	top: 6px;
	left: 312px;
  }
  #ui-sound {
	top: 6px;
	left: 362px;
  }
  #melonLink {
	top: 3px;
	right: 20px;
  }

  @media (max-width: 1600px) {
	#melonLink {
	  display: none;
	}
  }