#marqL
{
    font-size: 50px;
    color: red;
    font-weight: 1000;
    font-style: oblique;
}

#marqR
{
    font-size: 50px;
    color: red;
    font-weight: 1000;
    font-style: oblique;
}

#page_container 
{
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 265px;
    width: 5500px;
    height: 600px;

}
#page_container img {position: absolute;}

#title 
{
    position: absolute;
    background: yellow;
    font-family: monospace;
    font-size: 50px;
    left: -270px;
}


.button {
    background-color: white;
    color: black;
    border: 2px solid yellow;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 12px;
    display: inline-block;
    font-family: monospace;
    font-weight: 500;
    font-size: 10px;
    transition-duration: 0.4s;
    box-shadow: 0 5px black;
    transition-duration: 0.2s;
    
    margin-left: 275px;
}

.button:hover {
    background-color: yellow;
    color: black;
}

.button:active {
 background-color: yellow;
 color: black;
  box-shadow: 0 2px black;
  transform: translateY(4px);
}

#indexBG
{
    background-color: #FFFC7F;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
    
	}

.flip-container, .front, .back {
	width: 700px;
	height: 300px;
     margin: 0 auto;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
    
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/* #start
{
    font-family: montserrat;
    color: white;
    font-size: 25px;
    font-style: italic;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 250px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: -200px;
}*/

@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

#start { 
	font: bold 200% Consolas, Monaco, monospace;
    color: white;
	border-right: .1em solid white;
	width: 16.5em; 
	width: 32ch;
	margin: 10em 15em;
	white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 2s steps(21, end),
	           blink-caret .5s step-end infinite alternate;
}

#vapor
{
    width:600px;
	height:400px;
	position:absolute;
	left:40%;
	top:35%;
	margin:-75px 0 0 -135px;
}

#byeBG {
   background-image: url(croix.gif);
   background-repeat:repeat-x;
   background-attachment: fixed;
   background-position: center;
   background-size: contain;
   background-color: red;
}