@viewport {
	width: device-width;
	zoom: 1.0;
}

html {
	/* Background */
	background-image: url(static/bg/bg_2.gif);
	background-repeat: repeat;

	/* Text Color */
	color: white;

	/* Layout */
	inline-size: 100%;
	block-size: 100%;

	/* Cursor */
	cursor: url(static/alienz/alien_ico2.webp), auto;
}

main {
	display: flex;
	max-width: 60ch;
	margin: 0 auto;

	flex-wrap: wrap;
	justify-content: center;

	text-align: center;

}

.container {
	container-type: inline-size;
}

#logo {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	margin-block-end: 4ch;
}

#logo > h1 {
	font-family: "Rampart One", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 72;

	color: whitesmoke;	

	margin-block-start: 0;
	margin-block-end: 0;

}

#logo > span {
	font-family: "Arial", sans-serif;
	font-weight: 600;
  	font-style: normal;

	color: whitesmoke;	
}

#ambience {
	margin-block-end: 4ch;
}

figure {
	text-align: left;

	background-image: url("static/bg/bg_1.gif");
	padding: 4ch;
	margin: 2ch;

	border-radius: 4px;

	box-shadow: inset 0 0 10px black;
}

figcaption {
	margin-block-end: 2ch;
	text-shadow: 1px 1px 2px black;
	font-family: "Helvetica", sans-serif;
	font-weight: 600;
	font-size: 14pt;
}

audio, video {
	display: flex;
	width: 100%;

	border-radius: 4px;
}

.center-text {
	text-align: center;
}

.bg-4 {
	background-image: url('static/bg/bg_4.jpg')
} 

.bg-5 {
	background-image: url('static/bg/bg_5.png')
}