body {
	background-color: #282828;
	font-family: Arial;
	margin: 0 auto;
}
#main {
	margin: auto;
    width: 100%;
}

#header {
	margin: auto;
    width: 100%;
    height: 30px;
}

.headline {
	font-size: 20px;
	text-align: center;
	color: #ffffff;
}

ul li {
  	list-style: none;
	font-size: 15px;;
	color: #ffffff;
	padding-bottom: 10px;
}

input, select {
	display: inline-block;
	background-color: #fff;
	border: solid 1px #BBC5CE;
	margin: 0;
	padding: 5px;
	border-radius: 2px;
	font-size: 16px;
}

#playerdetails {
	margin: auto;
	text-align: center;
    width: 100%;
}

#civselections {
	border: 1px solid #ffffff;
	border-radius: 25px;
	margin-top: 30px;
}

.selectorheadline {
	font-size: 15px;
	text-align: center;
	color: #ffffff;
}

#civilizations {
	width: 100%;
	font-size: 15px;
	text-align: center;
	color: #ffffff;
	margin: 0 auto;
}

#civilizations img {
	padding-right: 10px;
	padding-left: 10px;
}

#buttons {
	margin: auto;
	text-align: center;
}

.submitbutton {
	border-radius: 10px;
	width: 100px;
	margin-left: 20px;
}

.drafterdropbox {
	border-radius: 15px;
	padding-left: 20px;
	margin-left: 20px;
}

#results {
	margin: auto;
	text-align: center;
}

.drawerror {
	text-align: center;
	color: #ffff00;
}

.drawresults {
	margin: 0 auto;
	color: white;
}

#results img {
	padding-right: 10px;
	padding-left: 10px;
}






/*GRID*/
.container, .xd{
	display: flex;
	justify-content: center;
	align-items: center;
}
.xd{
	float: left;
}
.grid-items{
	color: white;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	background: #333333;
	vertical-align: middle;
}
.grid-items > div{
	padding: 6px 45px 6px 10px;
	vertical-align: middle;
}
.grid-items >div:hover{
	background-color: #27ae60;
}
img{
	vertical-align: middle;
}

.gridResults{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}



@media(max-width: 1140px){
	.grid-items{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}
@media(max-width: 960px){
	.grid-items{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@media(max-width: 768px){
	.grid-items{
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media(max-width: 580px){
	.Netherlands{
		font-size: 15px;
	}
	.grid-items > div{
		padding: 6px 25px 6px 10px;
		vertical-align: middle;
	}
}