* {
	padding: 0;
	margin: 0;
}
html {
	height: 100vh;
	font: 1em sans-serif;
	background: rgba(0,0,0,1) center / cover no-repeat url(/img/bg.jpg);
}
a {
	text-decoration: none;
}
body {
	height: 100vh;
	display: grid;
	grid-template-rows: 5em calc(100vh - 8em) 3em;
	grid-template-columns: 5em calc(100vw - 10em) 5em;
}
header {
	grid-row: 1;
	grid-column: 2;
}
header h1 {
	color: rgba(204,242,251,.6);
	padding: 1em 0 .5em 0;
	text-shadow: rgba(255,255,255,.4) 0 0 .2em;
}
main {
	grid-row: 2;
	grid-column: 2;
	display:flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
}
main article {
	background: rgba(42,67,97,.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: .3em;

	width: 100%;
	min-height: 30vh;
	padding: 2em;
	color: rgba(204,242,251,.8);
}
main article ul {
	list-style: none;
	padding: 1em 0;
}
main article ul li {
	display: grid;
	width: 100%;
	grid-template-columns: auto 5em 20vw 15vw;
	line-height: 1.5em;
}
main article ul li a {
	color: rgba(204,242,251,.9);
	font-weight: bold;
	grid-column: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
main article ul li a + a {
	font-size: .7em;
	padding: .1em .5em;
	margin: .2em 0;
	background: rgba(204,242,251,.6);
	color: rgba(255,255,255,1);
	border-radius: 1em;
	grid-column: 2;
	text-align: center;
	display: inline-block;
}
main article ul li a + a u {
	font-weight: bold;
}
main article ul li > span {
	grid-column: 3;
	text-align: right;
}
main article ul li > span em {
	font-style: normal;
	color: rgba(204,242,251,.6);
}
main article ul li > span + span {
	grid-column: 4;
}
main article video {
	padding: 1em 0;
}
main article video + p a {
	color: rgba(204,242,251,.6);
}
footer {
	grid-row: 3;
	grid-column: 2;
}
footer p {
	font-size: smaller;
	color: rgba(204,242,251,.6);
	text-align: center;
	padding: 1em 0;
}
footer p a {
	color: rgba(204,242,251,.6);
}

@media screen and (max-width: 700px) {
	main article ul li {
		display: block;
	}
	main article ul li a {
		display: block;
		margin-top: .3em;
	}
	main article ul li a + a {
		display: inline-block;
		font-size: .8em;
		grid-column: 1;
		width: 5em;
		margin-top: .6em;
		margin-bottom: -0.3em;
	}
	main article ul li > span {
		grid-column: 1;
		margin-left: 1em;
	}
	main article ul li > span + span {
		grid-column: 1;
	}
}

@media screen and (max-width: 550px) {
	html {
		font: .9em sans-serif;
	}
	body {
		grid-template-rows: 4em calc(100vh - 6em) 2em;
		grid-template-columns: 2em calc(100vw - 4em) 2em;
	}
	main article {
		width: calc(100% - 2em);
		padding: 2em 1em;
	}
	main article ul li > span {
		font-size: .9em;
	}
}

@media screen and (max-width: 375px) {
	html {
		font: .8em sans-serif;
	}
	body {
		grid-template-columns: 1em calc(100vw - 2em) 1em;
	}
	main article {
		width: calc(100% - 1em);
		padding: 2em .5em;
	}
}