/* Platform independant element styling */
:root { font-family: sans-serif; }
h1, h2, h3, h4, h5, h6 { text-align: center; }
main { text-align: justify; }
footer, footer a { color: gray; }

/* Desktop/tablet device */
body {
	width: 55vw;
	margin: auto;
}
main p.left {
	width: 35em;
	margin-right: auto;
}
main p.right {
	width: 35em;
	margin-left: auto;
}

/* mediaside */
.mediaside iframe, .mediaside img {
	width: 55%;
	aspect-ratio: 16/9;
	display: inline-block;
}
.mediaside iframe:first-child, .mediaside img:first-child { margin-left: -5%; }
.mediaside iframe:last-child, .mediaside img:last-child { margin-right: -5%; }

.mediaside p {
	width: calc(50% - 40px);
	margin: 0;
	padding: 20px;
	display: inline-block;
	vertical-align: top;
}
.mediaside p:first-child { text-align: right; }