body{
	background: linear-gradient(152deg, white, 2%, darkgrey, 8%, white,10%,  grey, 20%, lightgrey, 20%, grey);
	margin-left: 0;
	margin-right: 0;
}


footer{
	width: 100%;
	background-color: black;
	color: white;
	text-align: center;
	position: fixed;
	bottom: 0;
	z-index: 5;
	font-size: 16px;
}


span.enhance{
	font-size: 1.2rem;
	font-weight: bold;
}

span.red{
	color: red;
}

a{
	text-decoration: none;
}

ul.noDeco{
	list-style: none;
}

h2{
	margin-left: 20px;
}

h3.centerHead{
	text-align: center;
	text-shadow: 1px 0px white,
				 0px 1px white,
				 -1px 0px white,
				 0px -1px white;
}

article.downloadButton, article.manualButton{
	position: fixed;
	width: 12rem;
	z-index: 2;
}
article.downloadButton{
	top: 1%;
	left: 0%;
}
article.manualButton{
	top: 1%;
	right: 0%;
}
article.downloadButton:hover, article.manualButton:hover{
	font-size: 1.05rem;
	font-weight: bold;
}

div.downloadButton, div.manualButton{
	padding: 10px;
	text-align: center;
}
div.downloadButton{
	background: linear-gradient(3deg, orange, white);
}
div.manualButton{
	background: linear-gradient(-3deg, orange, white);
}

div.trapezoidLeft{
	border-left: 190px solid orange;
	border-bottom: 27px solid transparent;
}
div.trapezoidRight{
	border-right: 190px solid orange;
	border-bottom: 27px solid transparent;
}

section.backToTop{
	margin: 20%;
	margin-bottom: 5%;
	text-align: center;
	font-size: 1.3rem;
}
section.backToTop.noMarginTop{
	margin-top: 5%;
}
a.backToTop{
	text-align: center;
	background: radial-gradient(white, darkgrey);
}
@media(min-width: 1200px){
	section.backToTop.movieBack{
		margin-top: 5%;
	}
}

/*---------------------------------------------*/

section.toplogo{
	text-align: center;
}

h1.catchcopy{
	writing-mode: vertical-rl;
	position: absolute;
	left: 75%;
	top: 8%;
	rotate: 10deg;
	text-shadow: 3px 0px white,
				 -3px 0px white,
				 0px 3px white,
				 0px -3px white;
}

img.meloslogo{
	max-width: 70%;
}

video.topVideo{
	position: fixed;
	left: 0;
	max-width: 100%;
	z-index: -1;
	opacity: 0.7;
}
img.facialImage{
	width: 100%;
}


section.introduction, section.system, section.specList{
	background: linear-gradient(45deg, white 10%,rgba(144,254,255,0.7) 70%, rgba(255,255,255,0.6));
	padding-bottom: 20px;
}
section.introduction h2, section.system h2, section.specList h2{
	margin-top: 0;
	padding: 10px;
	padding-left: 30px;
	margin-left: 0;
} 
section.introduction p, section.system p{
	padding: 10px;
	padding-bottom: 25px;
	margin-bottom: 0;
	margin-top: 0;
}
section.introduction{
	margin-top: 15%;
}
h2.specList{
	background: linear-gradient(90deg, white 10%, lightgrey 25%, grey 40%, white);
}

article.direction{
	display: grid;
	grid-template-columns: 1fr 9fr 9fr 1fr;
	background: linear-gradient(0deg, orange, white);
}
article.direction p{
	font-size: 1.2rem;
	font-weight: bold;
}
article.direction p.leftItem{
	justify-self: flex-start;
}
article.direction p.rightItem{
	justify-self: flex-end;
}

section.movieButton{
	text-align: center;
	background: linear-gradient(150deg, deepskyblue 65%, skyblue);
	padding: 20px;
}
section.movieButton a{
	color: white;
	background-color: blue;
	border-radius: 7px;
	padding: 10px;
}
section.movieButton a:hover{
	background-color: aqua;
}

ul.systemList{
	position: relative;
	margin-bottom: 50px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	column-gap: 10%;
	justify-content: center;
}

ul.systemList li{
	width: 12rem;
}
ul.systemList li:hover{
	opacity: 0.8;
}
a.actionSystem::before, a.enhanceSystem::before, a.newSystem::before{
	content: '';
	display: inline-block;
	width: 12rem;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	opacity: 0.9;
	border-radius: 13px;
}
a.actionSystem::before{
	background-image: url(../img/collider.png);
}
a.enhanceSystem::before{
	background-image: url(../img/overpath.png);
}
a.newSystem::before{
	background-image: url(../img/allocator.png);
}

p.actionSystem, p.enhanceSystem, p.newSystem{
	position: relative;
	z-index: 1;
	text-shadow: 1px 0px white,
				 -1px 0px white,
				 0px 1px white,
				 0px -1px white;
	font-weight: bold;
	font-size: 1.2rem;
}

ul.specList{
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 5%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
ul.specList li.listName{
	justify-self: right;
}
ul.specList li.listItem{
	justify-self: left;
}


/*--------------------------------------------*/

h1.pageTitle{
	text-align: center;
	margin-top: 55px;
	text-shadow: 1px 0px white,
				 0px 1px white,
				 -1px 0px white,
				 0px -1px white;
}

figure.movie{
	text-align: center;
	margin: 0;
}

@media(min-width: 300px){
	section.movieList{
		display: grid;
		grid-template-columns: 1fr;
		gap: 1%;
	}
	figure.movie{
		width: 100%;
		justify-self: center;
	}
}
@media(min-width: 800px){
	section.movieList{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 5%;
		grid-column-gap: 4%;
	}	
}
@media(min-width: 1200px){
	section.movieList{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 5%;
		grid-column-gap: 4%;
	}	
}


figure.movie iframe{
	width: 100%;
	aspect-ratio: auto;
}
figcaption.movieCaption{
	color: white;
}


/*--------------------------------------*/
p.summary{
	margin-left: 5%;
	margin-right: 5%;
	text-shadow: 1px 0px white,
				 0px 1px white,
				 -1px 0px white,
				 0px -1px white;

}

h2.systemHead{
	background: linear-gradient(155deg,white,10%,lightgrey,25%,grey,white);
	margin-bottom: 0;
	margin-left: 0;
}
article.systemExplain{
	position: relative;
}
div.systemExplain{
	height: 100%;
	background-color: rgba(255,255,255,0.5);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	position: relative;
	padding: 10px;
}

div.systemExplain p{
	background-color: rgba(255,255,255,0.7);
	margin-left: 5%;
	margin-right: 5%;
}

video.systemVideo{
	width: 100%;
}

article.actionAnimation::before, article.HUD::before, article.collider::before, article.calculateDamage::before{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	z-index: -1;
	opacity: 0.8;
}
article.actionAnimation{
	height: 52vw;
}
article.HUD{
	height: 52vw;
}
article.collider{
	height: 52vw;
}
article.calculateDamage{
	height: 52vw;
}
article.actionAnimation::before{
	background-image: url(../img/actionAnimation.png);
}
article.HUD::before{
	background-image: url(../img/HUD.png);
}
article.collider::before{
	background-image: url(../img/collider.png);
}
article.calculateDamage::before{
	background-image: url(../img/calculateDamage.png);
}

article.overpath::before, article.debugger::before, article.library::before, article.book::before{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	z-index: -1;
	opacity: 0.8;
}
article.overpath{
	height: 52vw;
}
article.debugger{
	height: 52vw;
}
article.library{
	height: 52vw;
}
article.book{
	height: 52vw;
}
article.overpath::before{
	background-image: url(../img/overpath.png);
}
article.debugger::before{
	background-image: url(../img/debugger.png);
}
article.library::before{
	background-image: url(../img/library.png);
}
article.book::before{
	background-image: url(../img/book.png);
}

article.eventskip::before, article.allocator::before, article.flavor::before, article.commonswitch::before{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	z-index: -1;
	opacity: 0.8;
}
article.eventskip{
	height: 52vw;
}
article.allocator{
	height: 52vw;
}
article.flavor{
	height: 52vw;
}
article.commonswitch{
	height: 52vw;
}
article.eventskip::before{
	background-image: url(../img/eventskip.png);
}
article.allocator::before{
	background-image: url(../img/allocator.png);
}
article.flavor::before{
	background-image: url(../img/flavor.png);
}
article.commonswitch::before{
	background-image: url(../img/commonswitch.png);
}


/*--------*/
section.downloadExplain{
	background: linear-gradient(123deg, white, lightgrey, white);
	padding: 10px;
}

section.downloadList{
	width: 90%;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
}
ul.downloadList{
	padding-left: 0;
}

ul.downloadList li{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
	column-gap: 2%;
	border-bottom: 2px solid black;
	justify-items: center;
	align-items: center;
}
ul.downloadList li p.header{
	margin-bottom: 0;
}
ul.downloadList li p.explain{
	justify-self: start;
}

ul.otherFunctions{
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	justify-items: center;
}