@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

h1, h2, h3, h4, h5, h6, p, span, a, li, div {
	font-family: 'Josefin Sans', sans-serif;
	line-height: 1.5em;
}

body {
	margin: 0px;
	clear: both;
	margin: -21px 0 30px 0;
	background-image: url( img/80s-bg2.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	margin: 0;
	z-index:1;
}


.max {
	max-width: 1250px;
	margin: auto;
}

/* header {
	padding-top: 20px;
} */

.header {
	background-color: rgba(0, 0, 0, 0.8);
	height: 200px;
	/* filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask"); */
	/* padding-top: 20px; */
}

.logo {
	background: url( img/logo.png);
	background-repeat: no-repeat;
	float: left;
	width: 525px;
	height: 200px;
}

.instructions {
	float: left;
	padding: 20px;
	/* max-width: 600px; */
	height: 200px;
	color: white;
	background-color: rgba(0, 0, 0, 0.0);
}

.nav {
	max-width: 1250px;
	margin: auto;
	text-align: center;
}

.game {
	max-width: 1250px;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 1.2em;
}

.score-giphy {
	/* max-width: 1250px; */
	width: min-content;
	margin: auto;
	/* height: 350px; */
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
}

.nosepick {
	max-width: 1250px;
	margin: auto;
	text-align: center;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.8);
}

#scoreboard {
	font-size: 1.8em;
}

#plot, #wins, #loss {
	font-size: 1.2em;
}


/* button {
	margin: 0px;
	float: left;
} */

/* #containthis {
	float: left;
	width: 300px;
	height: 200px;
	

} */

#table{
	/* border-style: solid; */
	padding: 20px;
}

.button-nav {
	display: inline-block;
	align-self: auto;
}

ul {
    list-style-type: none;
    /* margin: 0; */
    padding: 0;
    overflow: hidden;
    background-color: #333;
}



ul li {
    float: left;
}

li a {
	display: block;
	float: left;
    color: rgba(208, 0, 95, 1.0);
    text-align: center;
    padding: 14px 16px;
	text-decoration: none;
	font-size: 1.2em;
}

li a:hover:not(.active) {
	background-color: #111;
	text-decoration: none;
	font-size: 1.2em;
	color: rgba(0, 95, 255, 1.0);
}

/* .active {
    background-color: #4CAF50;
} */



#a1, #a3, #b1, #b3, #c1, #c3, #d1, #d3, #e1, #e3 {
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px;
	border-radius: 10px;
	border: 2px solid rgba(208, 0, 95, 1.0);
	-webkit-box-shadow: 0px 0px 6px 2px rgba(208, 0, 95, 0.4);  /*Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 0px 6px 2px rgba(208, 0, 95, 0.4);  /*Firefox 3.5 - 3.6 */
	box-shadow:         0px 0px 6px 2px rgba(208, 0, 95, 0.4);  /*Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  
}

#a2, #a4, #b2, #b4, #c2, #c4, #d2, #d4, #e2, #e4 {
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px;
	border-radius: 10px;
	border: 2px solid rgba(0, 95, 255, 1.0);
	-webkit-box-shadow: 0px 0px 6px 2px rgba(47, 58, 139, 0.6);  /*Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 0px 6px 2px rgba(47, 58, 139, 0.6);  /*Firefox 3.5 - 3.6 */
	box-shadow:         0px 0px 6px 2px rgba(47, 58, 139, 0.6);  /*Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  
}

@media screen and (max-width: 1124px) {
    .instructions {
		width: 100%;
		margin: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }
}

@media screen and (max-width: 525px) {
    .logo {
		/* background: url( img/logo-small.png); */
		background-size: 300px 114px;
		float: left;
		background-repeat: no-repeat;
		/* width: 300px; */
		height: 114px;
	}
	.header {
		background-color: rgba(0, 0, 0, 0.8);
		height: 114px;
	}
	.instructions {
		display: none;
	}
}