body {
}

.list {
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
}

.list > * {
	margin: .5rem;
}

.card {
	font-family: Roboto, Verdana, sans-serif;

	border: 1px solid black;
	width: 40rem;
	border-collapse: collapse;

	display: grid;

	grid-template-areas:
		"t t t i i i"
		"s s s s . ."
		"p p . . m m"
		"l l l l l l"
		;

	grid-template-rows: repeat(3, 1fr) min-content;
	grid-template-columns: repeat(6, 1fr);

	padding: .2rem;
}
.card > * {
	padding: .1rem;
}
.card .title {
	font-weight: bold;
/*	font-size: large;*/

	grid-area: t;
/*	height: 3rem;
	padding: .1em;
	*/

	/*
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	*/
}

.card .subtitle {
	font-weight: lighter;
	font-size: small;
	grid-area: s;
}

.card .players {
	grid-area: p;
}

.card .map {
	grid-area: m;
}

.card .ip {
	grid-area: i;
	text-align: right;
}


.card .l {
	grid-area: pl;
}

.playerlist {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  border: 3px solid black;
  top: 20vh;
  height: 40vh;
  left: 20vw;
  width: 50vw;
  position: fixed;
  visibility: hidden;
}

.playerlist:target {
  visibility: visible;
}

.playerlist .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}