body, html {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

body {
	position: relative;
	background: #13254f url("./background.jpg") no-repeat;
	height: calc(100vw * 0.5208333333333333);
	background-size: cover;
}

img {
	width: 100%;
}

.playonsteam1,
.playonsteam2,
.playonsteam3,
.playonsteam4 {
	position: absolute;
	width: 20.52083333333333%;
	top: calc(100vw * 0.1260416666666667);
	left: calc(100vw * 0.0479166666666667);
	height: calc(100vw * 0.3473958333333333);
	background: transparent url("./char-sfw-1.png") no-repeat;
	background-size: contain;
}

.playonsteam2 {
	left: calc(100vw * 0.2828125);
	background-image: url("./char-sfw-2.png");
}

.playonsteam3 {
	width: 20.20833333333333%;
	left: calc(100vw * 0.5171875);
	background-image: url("./char-sfw-3.png");
}

.playonsteam4 {
	width: 20.20833333333333%;
	left: calc(100vw * 0.75);
	background-image: url("./char-sfw-4.png");
}

.playonsteam1::after,
.playonsteam2::after,
.playonsteam3::after,
.playonsteam4::after {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	background: transparent url("./char-nsfw-1.png") no-repeat;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.playonsteam2::after {
	background-image: url("./char-nsfw-2.png");
}

.playonsteam3::after {
	background-image: url("./char-nsfw-3.png");
}

.playonsteam4::after {
	background-image: url("./char-nsfw-4.png");
}

.playonsteam1:hover:after,
.playonsteam2:hover:after,
.playonsteam3:hover:after,
.playonsteam4:hover:after {
	opacity: 1;
}

@media (max-width: 720px) {
	body {
		background-image: url("./background-mobile.jpg");
		height: calc(100vw * 2.519444444444444);
	}
	
	.playonsteam1,
	.playonsteam2,
	.playonsteam3,
	.playonsteam4 {
		width: 48.33333333333333%;
		top: calc(100vw * 0.6861111111111111);
		left: calc(100vw * 0.0041666666666667);
		height: calc(100vw * 0.8305555555555556);
	}
	
	.playonsteam2,
	.playonsteam4 {
		left: calc(100vw * 0.5069444444444444);
	}
	
	.playonsteam3,
	.playonsteam4 {
		top: calc(100vw * 1.558333333333333);
	}
}