body {
    font-family: Arial, Helvetica;
    font-size: 1.2em;
    color: #666;
    background-color: #181818;
    width: 98%;
}

div.row {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

div.row::after {
  content: "";
  clear: both;
  display: table;
}

div.logo {
	width: 100%;
}

img.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
	height:auto;
}

div.teaser {
	margin-top: 15px;
	text-align: center;
	width: 100%;	
	font-size: 1.0em;
}

div.youtubeLogo {
	width: 100%;
}

img.youtubeLogo {
	display: block;
	margin-left: auto;
	margin-right: auto;	
	width: 300px;
}

div.peerTubeLogo {
	float: left;
	padding: 0px;
	width: 49%;
}

div.xLogo {
	float: left;
	padding: 0px;
	width: 49%;
}

img.peerTubeLogo {
	display: block;
	margin-left: auto;
	margin-right: auto;	
	width: 250px;
}

img.xLogo {
	display: block;
	margin-left: auto;
	margin-right: auto;	
	width: 250px;
}

div.disclaimer {
	margin-top: 25px;
	text-align: center;
	width: 100%;	
}

@media screen and (max-width: 800px) {
	div.teaser {
	   font-size: 7vw;
	}
	img.peerTubeLogo, img.xLogo {
		max-width: 100%;
		height: auto;
	} 
	div.disclaimer {
		font-size: 2vw;
	}
}

@media screen and (min-width: 800px) {
	div.teaser {
	   font-size: 7vw;
	}
	img.peerTubeLogo, img.xLogo {
		max-width: 100%;
		height: auto;
	} 
	div.disclaimer {
		font-size: 16px;
	}
}

@media screen and (min-width: 1000px) {	
	div.teaser {
	   font-size: 70px;
	}
	div.disclaimer {
		font-size: 16px;
	}	
}

@media screen and (min-width: 1200px) {
	div.teaser {
	   font-size: 70px;
	}
	img.xLogo, img.peerTubeLogo {
		max-width: 400px;
		height:auto;
	}
	div.disclaimer {
		font-size: 16px;
	}	
}