@charset "UTF-8";
/* CSS Document */


html {
font-family: sans-serif;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	margin: 0px auto;
	font-size:2.5vmin;
	font-size:large;
	color:white;
	background-image:url(images/wordz.gif);
	width:100vw;
	height:100vh;

}

a:visited {
	background:transparent;
	color:black;
	
}
a:hover {
	background:black;
	color:lightyellow;
}
.linkStyle {
	font-family: 'montserrat', sans-serif;
	font-style: normal;
	font-weight: 200;
	text-decoration:underline;	margin-left: 10px;
	color:black;
}
h3 {
	font-size: 3vmin;
	color: gray;
}

h1 {
	margin: .67em 0;
	font-size: 2em;
}

h2 {
	color:#1AF7D8;
}

p {
	color:#E4F3F0;
	color:black;
	font-size: 0.8em;
}

#fullGrid {
	display: flex;
	width:100%;
	height:100%;
	font-size: 2vh;
	margin:0px auto;
}


#recap {
	position:fixed;
	background: rgba(0,0,0,0.75);
	top:0;
	left:0;
	width:100%;
	height:89vh;
	margin:0px auto;
	z-index:151;
	color:white;
	font-size: medium;
	overflow:auto;
}





#bannerWordzy{
	position:fixed;
	top:0;
	left:0;
	display:inline-flex;
	color:black;
	vertical-align:bottom;
	padding-bottom: 0.5vh;
	width:100%;
	height:11vh;
	font-family: impact;
	font-weight: 999;
	font-size:4vmin;
	margin:0px auto;
	z-index:30;
	overflow:auto;
	background-image: linear-gradient(to right,black,black,DarkSlateBlue,DarkMagenta,fuchsia,DarkMagenta,DarkSlateBlue,black,black);
}

#p1, #score1, #acc1, #timeBox, #yesFace, #noFace {
	display:inline-flex;
	/*vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
	float:left;*/
	z-index: 201;
	margin:2.5vh 2vw 0 2vw;
	font-size: 4vmax;
	text-shadow: 4px 4px 2px black;
	text-shadow: !important;
	background: transparent;

	color:white;
	/*padding:3vh 2vw 0 2vw;*/
}

#acc1{
	color:#fbaed2;/*lavenderPink*/
}

#timeBox {
	float:right;
}
#logoWordzy {
	position: fixed;
	top:1vh;
	right:1vw;
	height: 9vh;
	width: 9vh;
	max-width:9vh;
	
	z-index:220;
}


#introLogoWordzy:hover {
	cursor: pointer;
}

#aftermath, #summary {
	display:none;
	width:92%;
	padding:2%;
	margin:0px auto;
	font-size: 1em;
	overflow:auto;
	color:white;
}


#info {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0px auto;
	width:90vw;
	min-height:320px;
	/*max-width: 1000px;
	background: rgba(0,0,0,.75);*/
	color:white;
	padding:2%;
	height:74vh;
	overflow:auto;
	z-index: 150;
}
#startMe:hover, #playMeAgain:hover{
	color: #eae0c8;
	cursor: pointer;
}


#footerWordzy{
	position: fixed;
	bottom: 0;
	height: 10vh;
	font-family: monospace; 
	color:black;
	vertical-align: top;
	font-size: 1em;
	width: 100vw;
	margin: 0px auto;
	z-index:600;
	overflow:auto;
	background-image: linear-gradient(to right,black,black,DarkSlateBlue,DarkMagenta,fuchsia,DarkMagenta,DarkSlateBlue,black,black);
}




#navMessage {
	position: fixed;
	bottom:10vh;
	vertical-align: bottom;
	left:0;
	margin:0;
	padding:0 1vw 0 1vw;
	width:100vw;
	height:2vh;
	background-color:black;
	color:lightgrey;
	font-size:1.5vh;
	white-space: nowrap;
	overflow-y:hidden;
	overflow-x:scroll;
	z-index:400;

} 

#goButton, #choicesButton, #startButton, #playButton, #homeButton, #helpButton, #endButton{
	position: relative;
	display:inline-flex;
	/*background: #FF0000;
	background: linear-gradient(to left bottom, #FF0000 0%, #ffff00 50%, #FF0000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	*/
	text-shadow: 3px 2px 3px black;
	background-image: linear-gradient(to right, rgba(1,0,0,0.05),rgba(150,0,0,0.20), rgba(255,0,0,0.02),rgba(1,0,0,0.05));
	/*color:silver;*/
	color:#faf0be;/*blond*/
	margin:1%;
	width:auto;
	font-family: helvetica;
	font-weight: 999;
	font-size:7.5vh;
	z-index:200;
	opacity: 1;
	transform: scale(0.8);
}
#goButton{
	color:#66ff00;
}
#goButton:hover, #choicesButton:hover, #startButton:hover, #endButton:hover, #helpButton:hover, #homeButton:hover{
	background: linear-gradient(to left bottom, #FF0000 0%, #ffff00 50%, #FF0000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow:none;
	transform: scale(1);
	opacity:1;
	cursor: pointer;
}

#choicesButton, #homeButton, #helpButton{
	float:left;
}

#helpButton {
	left: 10vw;
}
	
#endButton{
	float: right;
	font-size:3vmax;
}

#gameboard {
	position:fixed;
	top:11vh;
	left:0;
	right:0;
	margin:0px auto;
	background: rgba(0,0,0,0.75);
	width:96%;
	/*max-width:1200px;*/
	padding:0 2% 2% 2%;
	height: 79vh;
	overflow:auto;
	z-index:142;
}


#statements {
	display:block;
	text-align:left;
	/*margin: 1vh 1vw 1vh 23vw;*/
	margin-left: 2%;
	font-family: sans-serif;
	font-size:2em;
	width:85%;
	padding:2%;
	height:auto;	
	max-height:96%;
	/*color: linear-gradient(to right,coral,pink,white,pink,coral);*/
	background: #FF0000;
	background: linear-gradient(to left, #FF0000 0%, #ffff00 50%, #FF0000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	z-index: 155;
	overflow:auto;
}

#choiceBoxes{
	display: block;
	background: transparent;
}


.box{
	display: block;
	width: 96%;
	color:pink;
	vertical-align: top;
	padding: 1%;
	font-size: 3vmax;
	font-family:helvetica;
	margin: 1vmin;
	color:pink;
	opacity: 1;
	background: transparent;
	overflow:auto;
	
	text-shadow: 4px 4px 3px black;
	background: transparent;
	
}


.box:hover {
	cursor: pointer;
	z-index:205;
}


#b1, #b2, #b3, #b4, #b5, #homeKey{
	position:relative;
	display:inline-flex;
	margin:0 auto;
	height:100%;
	width:auto;
	margin-left:1vmax;
	margin-right:1vmax;
	background:transparent;
	text-align: center;
	vertical-align: top;
	/*font-size:10vh;*/
	font-family: impact;
	text-shadow: 4px 4px 3px black;
	transform: scale(0.8);
	
	
}
#homeKey{
	float:left;
	margin-left:2vw;
	height:75%;
	width:auto;
}
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, #homeKey:hover {
	transform: scale(1);
	cursor:pointer;
}

#box1, #b1{
	color:coral;
	/*outline:coral;
	-moz-outline-color: coral;*/
}
#box2, #b2{
	color:aqua;
}
#box3, #b3{
	color:HotPink;
}
#box4, #b4{
	color: GreenYellow;
}
#box5, #b5{
	color:cornsilk;
}

#theComment {
	display: block;
	font-size: 1em;
	width: auto;
	max-width:80vw;
	margin: 0px auto;
	margin-top:3vh;
	color:paleturquoise;
}



/*@media (max-width: 500px) {
    #logo{
        width:7vmax;
        
    }
}