/* ----- Global Styles (i.e., things that effect all parts and states ----- */
body {
	background: black;
	color: white;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

img {
	display: block;
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
}

/* we use this to hide everything we DON'T want to see. in JS, we show (display:block) the container we want to see */
.container { display: none; }

#project-container {
	/*border: dotted yellow 2px;*/ /*just so you can see it*/
    width: 600px;
    height: 600px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 20%;
    right: 0;
    bottom: 0;
}

#project-liner { 
	position: relative; 
	width: 100%;
	height: 100%;
}


/* ------ CONSTANTS ------ */
#horizon-line {
	border: none;
	border-top: solid white 1px;
	position: absolute;
	width: 10000px;
	left: -2000px;
	bottom: 160px;
}

#room img {
	height: 100%;
	max-height: 100%;
	right: 5%;
}


/* ------ SEASONALLY EFFECTED PIECES ------ */

/* applies to .elephant and .window */
.cartoon-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* any overrides you want to apply to .elephant, do it here */
.elephant {
	position: absolute;
	left: 8%;
	width: 115%;
	height: 115%;
	top: -10%;
}



/*#season-winter .elephant {}
#season-spring .elephant {}
#season-summer .elephant {}*/

/* any overrides you want to apply to .window, do it here */
.window {
	position:absolute;
	bottom: 0;
	left: 7%;
	width: 80%;
	height: 80%;
}

/*#season-winter .window {}
#season-spring .window {}*/

.conversation {
	position: absolute;
	z-index: 9999;
	width: 100%;
	top: 18%;
	font-size: 160%;
	right: 105%;

	
}






/* ----- Lightbulb ----- */

#lightbulb {
	/*border: solid red 1px;*/
	position: absolute;
	/* position the bulb container, not the bulbs */
	width: 600px;
	height: 600px;
	left: 50%;
	margin-left: -310px;
	top: 0;
	z-index: 1000;
}

#lightbulb-liner { position: relative; }

.bulb img {
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	max-height: none;
} 

	#bulb-off { opacity: 0; }

.flicker #bulb-off {
	animation: offFlicker 0.1s linear infinite alternate;
}
.flicker #bulb-on {
	animation: onFlicker 0.1s linear infinite alternate;
}

@keyframes onFlicker {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes offFlicker {
	from { opacity: 0; }
	to { opacity: 1; }
}