/* global */
html {
	min-height: 100%;
}

body {
	font-family: "Open Sans", sans-serif;
	color: #EDEDED;
	font-size: 62.5%; /*change 1em = 10px */
	/* background-color: #5B84C4; */
}

.text-center {
	text-align: center;
}

p {
	font-size: 1.8em;
}

.winner {
	color: #6DBCDB;
}

/* end global */ 

.container {
	margin: auto;
	width: 900px;
	background-color: #202A44;
	border-radius: 10px;
}

h1 {
	position: relative;
	font-size: 9em;
	font-weight: lighter;
}

p:nth-child(2) {
	margin-top: -60px;
  padding-left: 15px;
  padding-right: 15px;
}

h2 { /*score*/
	font-size: 10em;
	margin-top: 70px;
}

#p1-add, #p1-minus, #p2-add, #p2-minus {
	position: relative;
	top: -100px;
	background-color: #2C3E50;
	color: #EDEDED;
	margin: 5px;
	height: 25px;
	width: 25px;
	border-radius: 4px;
	border: 1px solid #EDEDED;
}

#p1-minus {
	margin-right: 70px;
}



#winner-display {
	margin-top: -70px;
	height: 50px;
	font-size: 3.4em;
	color: #6DBCDB;
}

p:nth-child(9) { /*playing to */
	margin-top: -20px;
}

input {
	font-family: "Open Sans", sans-serif;
	margin-top: -20px;
	height: 30px;
	width: 100px;
	text-align: left;
	font-size: 1.8em;
	background-color: #2C3E50;
	color: #EDEDED;
	border: 1px solid;
	border-radius: 4px;
}

#reset {
	font-family: "Open Sans", sans-serif;
	display: block;
	position: relative;
	bottom: 30px;
	margin: auto;
	margin-top: 50px;
	height: 50px;
	width: 140px;
	font-size: 1.8em;
	color: #EDEDED;
	background-color: #FC4349;
	border-radius: 4px;
}

* {
	border: 0px solid pink;
}
/*.container {
	background-color: #2C3E50;
}
*/

@media screen and (max-width: 768px) {
	.container {
		width: 100%;
	}

	h1 {
		font-size: 6em;
	}

	p:nth-child(2) {
		margin-top: -45px;
	}

	h2 {
		margin-top: 30px;
	}

	p:nth-child(9) { 
	margin-top: -30px;

	}

}


.article{
	padding:2% 10%;
	color:black;
}

/* adjust menu bar */
.hbar-content {
	margin-top:auto !important;
  }