@font-face{
	font-family: 'Changa';
	src: url(./fonts/ChangaOne-Regular.ttf) format('truetype');
}
@font-face{
	font-family: 'Press Start 2P';
	src: url(./fonts/PressStart2P-Regular.ttf) format('truetype');
}
:root{
	--width: min(90vw, 1200px);
	--height: min(60vw, 800px);
	--wallWidth: min(75vw, 1000px);
	--wallHeight:  min(50vw, 667px);
	--viewWidth: min(76vw, 1013px);
	--viewHeight: min(150vw, 2001px);
	--fireWidth: min(15vw, 200px);
	--fireHeight: min(5vw, 66.5px);
	--centerWidth: min(30vw, 400px);
	--decorWidth: min(10vw, 133px);
	--decorHeight: min(10vw, 133px);
	--decorMargin: min(15vw, 199.5px);
	font-size: max(7pt, calc(var(--width) / 1200 * 10pt));
	
}

/* TO SCROLL */

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

/* track */
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.25);
}
 
/* handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
  to bottom, 
  white 0%, 
  black 2%, 
  darkgoldenrod, 
  black 98%, 
  white); 
  border-radius: 10px;
}

/* SELECTION HIGHLIGHT */
::selection {
  color: goldenrod;
  background: black;
}
  
body {
	width: 100vw;
	height: 100vh;
	margin: 0px;
	padding: 0px;
	background-color: black;
	font-size: 1rem;
	overflow: hidden;
	/**display: flex;
	justify-content: center;
	align-items: center;;
	flex-wrap: wrap;**/
}
	
#header{
	position: absolute;
	width: var(--width);
	height: 5rem;
	top: 49%;
	left: 50%;
	margin-left: calc(var(--width) / -2);
	margin-top: calc((2.5rem / -2) - var(--height) / 2);
	font-family: 'Press Start 2P', cursive;
	color: goldenrod;
	text-align: center;
	text-shadow: 
	1px 3px 3px black,
	0px 2px 3px black;
	z-index: 10;
}

#header label
{
	font-size: 3rem;
	top: 0;
	left: 0;
}
/*#search{ 
	justify-content: center;
	align-items: center;
	
}*/

#footer{
	position: absolute;
	width: var(--width);
	height: 3rem;
	top: 50%;
	left: 50%;
	margin-left: calc(var(--width) / -2);
	margin-top: calc(var(--height) / 2);
	text-align: center;
	font-size: 1.2rem;
	color: goldenrod;
	text-shadow: 
	-1px -3px 3px black,
	0px -2px 3px black;
	font-family: 'Press Start 2P', cursive;
}

#footer *
{
	font-size: 1.2rem;
}

.viewport {
	position: absolute;
	width: var(--width);
	height: var(--height);
	top: 50%;
	left:50%;
	margin-left: calc(var(--width) / -2);
	margin-top: calc(var(--height) / -2);
	perspective:  calc(var(--width) / 1200 * 400);
	perspective-origin: center center;
	overflow: hidden;
	border: groove 3px darkgoldenrod;
}
.viewport *{
	transform-style: preserve-3d;
	box-sizing: border-box;
}
.camera{
	position: absolute;
	width: 0px;
	height: 0px;
	top: 50%;
	left: 50%;
}
.scene {
	position: absolute;
	width: var(--width);
	height: var(--height);
	left: 50%;
	top: 50%;
	margin-left: calc(var(--width) / -2);
	margin-top: calc(var(--height) / -2);
	transform-style: preserve-3d;
	pointer-events: none;
}

.wall{
	position: absolute;
	width: var(--wallWidth);
	height: var(--wallHeight);
	left: 50%;
	top: 50%;
	margin-left: calc(var(--wallWidth) / -2);
	margin-top: calc(var(--wallHeight) / -2);
	backface-visibility: visible;
	transform-style: preserve-3d;
	box-sizing: border-box;
}

.absolutely{
	position: absolute;
	}
	
/* THE VIEW */

.view{
	width: var(--viewWidth);
	height: var(--viewHeight);
	left: 50%;
	top: 50%;
	margin-left: calc(var(--viewWidth) / -2);
	margin-top: calc(var(--viewHeight) / -1.4);
	background-image: url(./images/cloudss.webp);
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-size:100% 70%;
	backface-visibility: hidden;
	}

.therain{
	width: var(--viewWidth);
	height: var(--viewHeight);
	animation: torain, torain;
	animation-duration:  3s, 3s;
	animation-delay:  0s, 1.5s;
    animation-fill-mode: forwards, forwards;
	animation-iteration-count: infinite, infinite;
	animation-timing-function: linear, linear;
	z-index: -1;
	}

/* lightning */	
.tint {
	background-size: 100% 100%;
	animation: blink 10s ease;
	animation-iteration-count: infinite;
	animation-delay: 3s;
	animation-fill-mode: backwards;
	animation-direction: alternate;
	}
	
	
/* CONTENT */
/* with stone */
.fireplace { 
	box-sizing: border-box;
	backface-visibility: hidden;
	}
#stoneplus{
	background-color: saddlebrown;
	background-image:  url(./images/stone.webp) ;
	background-size:  100% 100% ;
	}
#blossom{
	width: 25%;
	height: 40%;
	top: 10%;
	left: 39%;
	background-image:  url(./images/bloom.webp);
	background-size:  100% 100%;
	}
#thefireplace{
	width: 38%;
	height: 46%;
	left: 32%;
	top: 55%;
	background-image: url(./images/fireplacefire.webp);
	background-size: 100% 100%;
	z-index: 3;
	}
#fire {
	width: var(--fireWidth);
	height: var(--fireHeight);
	left: 44%;
	top: 85%;
	animation: flames 5s linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	z-index: 2;
	}

/* endside */	
.glass{ 
	background-image: radial-gradient( 
	rgba(225,225,225,0.2),
	rgba(225,225,225,0.3), 
	rgba(225,225,225,0.2), 
	rgba(225,225,225,0.5));
	border-bottom: 0.4vw goldenrod groove;
	box-sizing: border-box;
	animation-delay: 0s;
	backface-visibility: hidden;
	}

/*FOR LEFT and RIGHT*/

/* for side glass panels */
.sideglass{
	width: calc(var(--wallWidth) * 0.3);
	height: 100%;
	left: 0%;
	border: 0.4vw goldenrod groove;
	background-color: rgba(0,0,0,0.2);
	background-size: 100% 100%;
	box-sizing: border-box;
	}

/* for side wood panels */
.sidewood{
	width: calc(var(--wallWidth) * 0.7);
	height: 100%;
	left: 30%;
	background-image: url(./images/wall.webp);
	background-size: 100% 100%;
	z-index: 2;
	box-sizing: border-box;
	}
.door{
	width: calc(var(--wallWidth) * 0.3);
	height: calc(var(--wallHeight) * 0.8);
	top: 20%;
	left: 45%;
	background-image: url(./images/doubledoor.webp);
	background-size: 100% 100%;
	z-index: 3;
	}
	
.flowerleft{
	width: calc(var(--wallWidth) * 0.14);
	height: calc(var(--wallHeight) * 0.35);
	top: 15%;
	left: 8%;
	background-image: url(./images/red.webp);
	background-size: 100% 100%;
	}
.flowerright{
	width: calc(var(--wallWidth) * 0.17);
	height: calc(var(--wallHeight) * 0.6);
	top: 1%;
	left: 7%;
	background-image: url(./images/flower.webp);
	background-size: 100% 100%;
	}

/* CEILING AND FLOOR */

.panel {
	width: var(--wallWidth);
	height: var(--wallWidth);
	left: 50%;
	margin-left: calc(var(--wallWidth) / -2);
	top: 50%;
	margin-top: calc(var(--wallWidth) / -2);
	box-sizing: border-box;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	}
.ceiling { 
	background-color: rgba(105, 105, 105, 0.4);
	animation-delay: 3s;
	animation-fill-mode: backwards;
	animation-direction:  alternate;
	}
#blue{
	width: 100%;
	height: 22%;
	top: 30%;
	background: linear-gradient(
	to right, 
	rgba(0,0,0.2) 40%, 
	steelblue, 
	rgba(0,0,0.2) 60%);
	opacity: 0.1;
	}
.floor { 
	background-image: url(./images/floor.webp);
	background-repeat: repeat;
	background-size: 100% 50%;
	}
#thecarpet{
	width: 98%;
	height:22%;
	top:47.5%;
	left: 1%;
	background-image: url(./images/carpet.webp);
	background-size: 100% 100%;
	}

/* for floor */
.fill{
	position: absolute;
	width: 100%;
	height: 100%;
	}
#faceglass{
	width: 100%;
	height: 47%;
	top: 0%;
	left: 0%;
	backface-visibility: visible;
	z-index: 20;
	}
#facefire{
	width: 100%;
	height: 30%;
	top: 70.5%;
	left: 0%;
	backface-visibility: visible;
	z-index: 20;
	}

/* DIVIDERS */

.center {
	width: var(--centerWidth);
	margin-left: calc(var(--centerWidth) / -2);
	background-color: rgba(0,0,0,0.2);
	/*
	animation-duration: 10s;
	animation-delay: 3.5s;
	*/
	backface-visibility: hidden;
	}
/* for inside borders */
.bleft{
	border-left: 0.4vw darkgoldenrod ridge;
	}
.bright{
	border-right: 0.4vw darkgoldenrod groove;
	}
 
/* lamps */
.decor {
	width: var(--decorWidth);
	height: var(--decorHeight);
	left: 50%;
	margin-left: calc(var(--decorMargin) / -2);
	top: 40%;
	margin-top: calc(var(--decorMargin) / -2);
	}
	
.forlampl {
	background-image:  url(./images/lampr.webp);
	background-size: 100% 100%;
	}
.forlampr {
	background-image: url(./images/lampl.webp);
	background-size: 100% 100%;
	}

/* TRANSFORMATION */

.viewforward{transform:  translateZ(calc(var(--viewWidth) / -2));}
.viewback{transform:  translateZ(calc(var(--viewWidth) / 2)) rotateY(180deg);}
.viewright{transform: rotateY(-90deg) translateZ(calc(var(--viewWidth) / -2));}
.viewleft{transform: rotateY(90deg) translateZ(calc(var(--viewWidth) / -2));}
.fireplace {transform: translateZ(calc(var(--wallWidth) / -2));}
.glass { transform: rotateX(180deg) translateZ(calc(var(--wallWidth) / -2));}
.left { transform: rotateY(90deg) translateZ(calc(var(--wallWidth) / -2));}
.right { transform: rotateY(90deg) translateZ(calc(var(--wallWidth) / 2));}
.ceiling { transform: rotateX(-90deg) translateZ(calc(var(--wallHeight) / -2));}
.floor { transform: rotateX(90deg) translateZ(calc(var(--wallHeight) / -2));}
.centerleft { transform: 
	rotateY(180deg)
	translateZ(min(2.5vw, 33px))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / 2));
	}
.centerleftalso { transform:  
	translateZ(calc(min(2.5vw, 33px) * -1))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / -2));
	}
.centerright { transform: 
	rotateY(180deg)
	translateZ(min(2.5vw, 33px))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / -2));
	}
.centerrightalso { transform: 
	translateZ(calc(min(2.5vw, 33px) * -1))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / 2));
	}
.middleleft {transform: 
	rotateY(180deg)
	translateZ(calc(var(--fireWidth) * -1))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / 2));
	}
.middleleftalso {transform: 
	translateZ(var(--fireWidth))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / -2));
	}
.middleright {transform: 
	rotateY(180deg)
	translateZ(calc(var(--fireWidth) * -1))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / -2));
	}
.middlerightalso {transform: 
	translateZ(var(--fireWidth))
	translateX(calc((var(--wallWidth) - var(--centerWidth)) / 2));
	}
.forlampl{ transform:  
	translateX(calc((var(--wallWidth) - var(--decorWidth)) / 1.85))
	translateY(calc(var(--fireHeight) / 2))
	translateZ(calc(var(--fireWidth) * -0.4));
	}
.forlampr { transform: 
	translateX(calc((var(--wallWidth) - var(--decorWidth)) / -2.15))
	translateY(calc(var(--fireHeight) / 2))
	translateZ(calc(var(--fireWidth) * -0.4));
	}

/* EFFECT */
		    
@keyframes torain{
	0% {
	background-image: url(./images/snow.webp);
	background-position: 0% 0%;
	background-repeat: repeat;
	background-size: 15vh calc(var(--wallHeight));
	opacity: 0.5;
	}
	25%{ opacity: 0.3;}
	50%{ opacity: 0.5;}
	75%{ opacity: 0.3;}
	100% { 
	opacity: 0.5;
	background-position: 0% calc(var(--wallHeight) * 2);
	background-repeat: repeat;
	background-size: 15vh calc(var(--wallHeight));
	}
}
   
@keyframes blink{
	0% {
	background-image:  linear-gradient(
	to right, 
	rgba(0,0,0,0.5), 
	rgba(0,0,0,0), 
	rgba(0,0,0,0.6)),
	radial-gradient(circle at 100% 35%,  
	rgba(0,0,0,0.6) 5%,
	rgba(0,0,0,0.4),
	rgba(0,0,0,0.5),
	rgba(0,0,0,0));
	}
	50% {
	background-image:  linear-gradient(
	to right, 
	rgba(0,0,0,0.8), 
	rgba(0,0,0,0), 
	rgba(0,0,0,0.5)),
	radial-gradient(circle at 100% 35%,  
	rgba(0,0,0,0.6) 5%,
	rgba(0,0,0,0.3) 40%,
	rgba(0,0,0,0.4),
	rgba(0,0,0,0));
	}
	100% {
	background-image: linear-gradient(
	to right, 
	rgba(0,0,0,0.5), 
	rgba(0,0,0,0), 
	rgba(0,0,0,0.6)),
	radial-gradient(circle at 100% 35%,  
	rgba(0,0,0,0.6) 5%,
	rgba(0,0,0,0.4),
	rgba(0,0,0,0.5),
	rgba(0,0,0,0));
	}
}

@keyframes flames{
	0% { background-color: red;}
	25% { background-color: orangered;}
	30% { background-color: yellow;}
	50% { background-color: maroon;}
	45% { background-color: orange;}
	60% { background-color: gold;}
	100% { background-color: crimson;}
}

@keyframes here{
	0%{ text-shadow: 
	0px 0px 2px black,
	0px 0px 5px gold,
	0px 0px 20px goldenrod;
	}
	50%{ text-shadow: 
	0px 0px 2px black, 
	0px 0px 5px gold;
	}
	100%{ text-shadow:
	0px 0px 2px black, 
	0px 0px 5px gold,
	0px 0px 20px goldenrod;
	}
}


/* BUTTONS AND LABELS */
/* for all buttons*/	
.button{
	display: none;
	}

/* ARTICLES */

#toread{
	position: absolute;
	width: var(--wallWidth);
	height: var(--wallHeight);
	top: 50%;
	left: 50%;
	margin-top: calc(var(--wallHeight) / -2);
	margin-left: calc(var(--wallWidth) / -2);
	direction: rtl;
	overflow-y: auto;
	scrollbar-color: goldenrod rgba(105, 105, 105, 0.5); 
	border-top: 5px groove goldenrod;
	border-bottom: 5px groove goldenrod;
	display:none;
	z-index: 10;
	}
#xClose{
	position: fixed;
	width: 20px;
	height: 400px;
	top: 30%;
	right: calc(50%  - var(--wallWidth) / 2 - 15px);
	font-size: 20px;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	}
.toclose {
	font-size: 5vh;
	animation: here 2s infinite ease;
	padding: 5px;
	}
.read{
	direction: ltr;
	font-size: 3vh;
	font-family: 'Changa', sans-serif;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	display: none;
	}

.dearvisitor{
	position: absolute;
	width: var(--wallWidth);
	height: var(--wallHeight);
	top: 50%;
	left: 50%;
	margin-top: calc(var(--wallHeight) / -2);
	margin-left: calc(var(--wallWidth) / -2);
	background-color:rgba(128, 0, 0, 0.6);
	color: peru;
	text-align: center;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black, 
	1px 2px 3px darkgoldenrod;
	border: 5px maroon groove;
	border-radius: 5px;
	opacity: 1;
	overflow-y: auto;
	display: none;
	}

.dearvisitor p
{
	width: 100%;
	display: block;
}
	
#aboutgbw3d{
	background-color: rgba(255, 105, 180, 0.5);
	color: black;
	text-shadow: 
	1px 1px 1px palevioletred, 
	1px 1px 2px indigo;
	}
#wait {
	background-color:rgba(0, 0, 0, 0.6);
	color: lightgrey;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black;
	}
#theplay{
	background-color:rgba(70, 130, 180,0.6);
	color: lightblue;
	text-shadow: 
	1px 1px 3px black,
	1px 1px 10px black;
	}
#arthurtheauthor{
	background-color:rgba(128, 0, 0, 0.5);
	color: black;
	text-shadow: 
	1px 1px 2px salmon, 
	1px 1px 3px firebrick, 
	1px 3px 5px saddlebrown,
	0px 0px 20px saddlebrown;
	}
#inflame{
	background-color:rgba(128, 0, 0, 0.5);
	color: black;
	text-shadow: 
	1px 0px 2px lightsalmon, 
	1px 0px 3px firebrick, 
	1px 0px 5px saddlebrown;
	}
#isit{
	background-color:rgba(0,0,0,0.6);
	color: linen;
	text-shadow: 
	1px 2px 1px black, 
	1px 2px 3px black;
	}
#foreigntimes{
	background-color:rgba(139, 69, 19, 0.6);
	color: black;
	text-shadow: 
	1px 0px 2px saddlebrown, 
	1px 0px 3px peru;
	}
#meredithdoomsday{
	background-color:rgba(0,0,0,0.5);
	color: lightgrey;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black;
	}
#thedrynoodleandtheelbow{
	background-color:rgba(255, 215, 0, 0.3);
	color: goldenrod;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black, 
	1px 2px 3px darkgoldenrod;
	}
#thehammerandthespade{
	background-color:rgba(0,0,0,0.5);
	color: lightgrey;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black;
	}
#friendfoe{
	background-color:rgba(255, 215, 0, 0.3);
	color: goldenrod;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black, 
	1px 2px 3px darkgoldenrod;
	}
#tappingtocount{
	background-color:rgba(139, 69, 19, 0.6);
	color: black;
	text-shadow: 
	1px 0px 2px saddlebrown, 
	1px 0px 3px peru;
	}
#inflight{
	background-color:rgba(0,0,0,0.5);
	color: lightgrey;
	text-shadow:  
	1px 1px 3px black, 
	1px 1px 10px black;
	}
#tocrosstheblue{
	background-color:rgba(95, 158, 160, 0.6);
	color: darkcyan;
	text-shadow:  
	0px 1px 3px white, 
	0px 0px 4px ghostwhite;
	}
#whiteagain{
	background-color:rgba(255, 250, 240,0.5);
	color: black;
	text-shadow: 
	1px 2px 1px ivory, 
	1px 2px 3px lightgrey;
	}
#fleur{
	background-color: rgba(255, 192, 203, 0.5);
	color: ivory;
	text-shadow:  
	1px 1px 3px black, 
	1px 2px 10px black;
	border: groove 5px ivory;
	border-radius: 20px;
	}
#treeclimber{
	background-color:rgba(255, 140, 0, 0.5);
	color: black;
	text-shadow: 
	1px 1px 1px peru, 
	1px 2px 5px sienna,
	0px 3px 5px saddlebrown;
	}
#zoom{
    position: absolute;
	width: min(30vw, 400px);
	height: min(30vw, 400px);
	top: 50%;
	left: 33%; 
	background-image: url(./images/bloom.webp);
	background-size: 100% 100%;
	transform: translateZ(35vw);
	display: none;
	z-index: 50;
	}

/* for labels */
.fill:hover{cursor: pointer; }
#closeX:hover{ 
	font-size: 55px;
}
#blossom:hover{ cursor: zoom-in;}
.viewport #blossom:hover~ #zoom{
	display: block;
}

.tint:hover{
	background-color: rgba(238, 232, 170, 0.2);
}
.ttturn:hover {cursor: col-resize;}
.chain:hover{cursor: context-menu;}
.up:hover {cursor: pointer;}
.gold:hover {cursor: help;}
.wait {cursor: wait;}
#hammerandspadex:hover, #thewaitx:hover, #tappingx:hover, #madex:hover{
	cursor: crosshair;
}
#incendox:hover, #arthurx:hover, #meredithx:hover, #leafinflightx:hover{
	cursor: zoom-in;
}
.toclose:hover{cursor: pointer;}

/* header */
#gloria:hover{
	font-size: 4vh;
}

/* links */
a{
	color: gold; 
	text-shadow: 
	0px 3px 5px black;
}
a:hover{ cursor: copy;}
a:visited{ color: darkgoldenrod;}
	
/* ANIMATION */
/* at fireplace facing glass */
@keyframes glassfacing{
	0%{
	transform:
	rotateY(-360deg)
	translateZ(-5vw);
	}
	100%{
	transform: 
	rotateY(-180deg)
	translateZ(5vw);
	}
}
/* at glass facing fire */
@keyframes woodfacing{
	0%{
	transform: 
	rotateY(180deg)
	translateZ(5vw);}
	100%{
	transform: 
	rotateY(360deg)
	translateZ(-5vw);}
}

/* ACTION */
/* for motion */
#tofire:checked~.viewport .camera .scene{
	animation: glassfacing 3s ease;
	animation-fill-mode: forwards;
}
#toglass:checked~.viewport .camera .scene{
	animation: woodfacing 3s ease;
	animation-fill-mode: forwards;
}

/* for labels */
#shatterx{ z-index: 5;}
#shatter:checked~.viewport .camera .scene{
	transform: translateZ(-5vw);
}
#shatter:checked~.viewport .camera .scene .center{
	visibility: hidden;
}
#shatter:checked~.viewport .camera .scene #shadows{
	visibility: hidden;
}
#shatter:checked~.viewport .camera .scene #shattertoox{
	z-index: 5;
}
#shattertoo:checked~.viewport .camera .scene{
	transform: translateZ(-5vw);
}
#shattertoo:checked~.viewport .camera .scene .center{
	visibility: visible;
}
#shattertoo:checked~.viewport .camera .scene #shatterx{
	z-index: 5;
}

/* for articles */
.open:checked~#toread{
	display: block;
}
#close:checked~.read{
	display: none;
}


#welcome:checked~ #toread #dearvisitor1{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
#welcome:checked~ #xClose {
	display: initial;
}
#welcome:checked~ #toread {
	border: none;
}
#dearvisitor:checked~ #toread #aboutgbw3d{
	display: block;
}

#dearvisitor2:checked~#toread{
	border-top: none;
	border-bottom: none;
}
#forflowers:checked~#toread{
	border-top: none;
	border-bottom: none;
}

#dearvisitor2:checked~#toread #dearvisitortoo{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#thewait:checked~ #toread #wait{
	display: block;
}
#incendo:checked~ #toread #inflame{
	display: block;
}
#arthur:checked~ #toread #arthurtheauthor{
	display: block;
}
#hesaid:checked~ #toread #theplay{
	display: block;
}
#tothem:checked~ #toread #isit{
	display: block;
}
#made:checked~ #toread #foreigntimes{
	display: block;
}
#meredith:checked~ #toread #meredithdoomsday{
	display: block;
}
#thenoodle:checked~ #toread #thedrynoodleandtheelbow{
	display: block;
}
#hammerandspade:checked~ #toread #thehammerandthespade{
	display: block;
}
#friendorfoe:checked~ #toread #friendfoe{
	display: block;
}
#tapping:checked~ #toread #tappingtocount{
	display: block;
}
#leafinflight:checked~ #toread #inflight{
	display: block;
}
#crosstheblue:checked~ #toread #tocrosstheblue{
	display: block;
}
#white:checked~ #toread #whiteagain{
	display: block;
}
#forflowers:checked~ #toread #fleur{
	display: block;
}
#cashgame:checked~ #toread #cashmoneyrain{
	display: block;
}
#treegame:checked~ #toread #treeclimber{
	display: block;
}

/* misc. */
/* for firefox, to fix bface labels on fface on load*/
@supports(-moz-orient: block)
{

	#tofire:checked~ .viewport .bface{
		display:none;
	}
	#toglass:checked~ .viewport .fface{
		display:none;
	}

}


@media not all and (min-resolution:.001dpcm) { @media {

    #tofire:checked~ .viewport .bface{
		display:none;
	}
	#toglass:checked~ .viewport .fface{
		display:none;
	}
}}

.board:checked~#toread #xClose{
	display: none;
}

/* header, footer */
#welcome:checked~#header{
	color: goldenrod;
	font-size: 35px;
	text-shadow: 
	1px 3px 3px black,
	0px 3px 4px black;
}
#welcome:checked~#footer{
	color: goldenrod;
	text-shadow: 
	-1px -3px 3px black,
	0px -3px 4px black;
}
.open:checked~#header{
	color: black;
	text-shadow: 
	1px 3px 3px darkgoldenrod,
	0px 3px 4px darkgoldenrod;
}
.open:checked~#footer{
	color: black;
	text-shadow: 
	-1px -3px 3px darkgoldenrod,
	0px -3px 4px darkgoldenrod;
}

/* VITAL MISC. */

label{
	pointer-events: auto;
}
a{
	pointer-events: auto;
}
.door{
	pointer-events: auto;
}

/*
@media screen
{
	body
	{
		transform: scaleX(0.8) scaleY(0.8);
	}
}
*/


/*
@media (min-aspect-ratio: 16/9) and (max-height: 1000px)
{
	body
	{
		transform: scaleX(0.5) scaleY(0.5);
	}
}
*/