html{

	font-size: 0.6vw;
}

body{

	font-family: sans-serif;
	background: lightgrey;
	font-size: 1.25rem;
}

h1{

	position: fixed;
	left: 0rem;
	font-size: 2rem;
	z-index: 3;
	color: blue;
	padding: 0.5rem 1rem;
	font-size: 4rem;
	color: lime;
	letter-spacing: 2px;
	line-height: 6rem;
	text-shadow:  grey 1px 0 10px;
	top: 0;
}

#logo{

	width: 25rem;
	position: fixed;
	right: 1rem;
	z-index: 0;
	bottom: 7rem;
}

.home > main > *{

	position: fixed;
	height: 100vh;
	overflow: scroll;
	padding: 6rem 0;
}

.home > main  h2{

	text-align: center;

}

.mag{

	color: pink;
}

.or{

	color: white;
}


.home > main > .quotes h2{

	width: 20%;
}
.home > main > .quotes{

	width: 20%;
	
}

.home > main > .pictures,
.home > main > .screenshots,
.home > main > .pictures h2,
.home > main > .screenshots h2{

	width: 40%;
}


.home > main > * > h2{

	position: fixed;
	bottom: 0;
	padding: 0.5rem;
	font-size: 4rem;
	line-height: 5rem;
	color: yellow;
	letter-spacing: 2px;
	text-shadow:  grey 1px 0 10px;
}

.home > main > .screenshots{

	left: 0;
}

.home > main > .pictures{

	left: 40%;
}

.home > main > .quotes{

	left: 80%;
}

.home > main  .comment,
.home h3{

	padding: 0.5rem;
	margin: 1rem 0.5rem;
	display: inline-block;
	border-radius: 1rem;
	line-height: 1.5rem;

}

.home h3{

	margin-top:  2rem;
}

.home h4{

	color: blue;
	padding: 0.5rem 0;
	display: inline-block;
	margin-top: -1.5rem;
	margin-left: 0.5rem;
}

.home .files{

	padding-top: 1rem;
}

.home h3{

}

.home > main  .comment{

	border-radius: 1rem;
	background: white;
	margin-left: 2rem;	

}

.home img{

	max-width: 100%;
	display: block;
}

.upload{

	padding: 1rem;
	display: flex;
}

.upload > div{

	margin: 1rem;
}

.upload h2{

	text-align: center;
	padding: 0.5rem;
	background: red;
	color: white;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;

}

.upload form{

	background: white;
	display: inline-block;
	padding: 1rem;
	border-radius: 1rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.upload form label{

	display: block;
}

.upload form label{

	margin-bottom: 0.5rem;
}

.upload form input{

	margin-bottom: 1rem;
}

.upload form input:not([type="file"], [type="submit"]){

	width: 100%;
	border: solid 1px;
	padding: 0.5rem;
}

.upload form input[type="submit"]{

	background: lime;
	padding: 0.5rem;
	border-radius: 2rem;
	float: right;
}


svg{

	width: 100%;
	height: inherit;
	background: white;

}

.image:nth-child(odd) g{

	fill: darkgrey;

}

.image:nth-child(even) g{

	fill: darkgrey;

}

label.required::after{

	content: "*";
	color: red;
}



@media screen and (max-width: 1600px){

	html{

		font-size: 10px;
	}
}


@media screen and (max-width: 1300px){

	h1, .home > main > * > h2{

		font-size: 3rem;
		text-shadow:  grey 1px 0 10px;
	}
}

@media screen and (max-width:  1050px){

	body{

		padding-top: 1rem;
	}

	.home > main > * > h2,
	h1{
		font-size: 2.75rem;
		line-height: 3.5rem;
		width: 75%;
		padding-left: 1rem;

	}

	h1{


		position: unset;	
	}

	.home > main > * > h2{

		position: unset;
		text-align: left;
	}

	.home > main > *{

		position: unset;
		height: unset;
		width: 100%;
		padding: 0;
	}


	.home > main > .quotes h2{

		width: 100%;

	}
	.home > main > .quotes{

		width: 75%;

	}

	.home > main > .pictures,
	.home > main > .screenshots,
	.home > main > .pictures h2,
	.home > main > .screenshots h2{

		width: 100%;
	}

	#logo{

		width: 12rem;
		bottom: 1rem;
		background: white;
		border-radius: 2rem;
		border: solid 10px #fff;

	}
}

@media screen and (max-width: 500px){

		.home > main > * > h2,
	h1{

		width: 100%;

	}

}