@charset "utf-8";
/* CSS Document */

html, body {
	background-color: black;
}

h1 {
	font-size: 120px;
	margin: 0;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
	bottom: 10%;
}

.mind-fullscreen-title {
	height: 100%;
	width: 100%;
	text-align: center;
}

.mind-fullscreen-title h1 {
	position: absolute;
	width: 100%;
	bottom: 10%;
}

/* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
	0% {background-position: 0%}
	100% {background-position: 100%}
}

/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) {

	h1 {
		font-size: 20px;
	}
	h2 {
		font-size: 15px;
		padding-top: 20px;
	}
	li {
		padding: 5px;
	}
}

@media (min-width: 200px) and (max-width: 300px) {

	h1 {
		font-size: 39px;
	}
	h2 {
		font-size: 18px;
		padding-top: 25px;
	}
	h3 {
		font-size: 16px;
		padding-top: 25px;
	}
	li {
		padding: 6px;
	}
}

@media (min-width: 300px) and (max-width: 400px) {

	h1 {
		font-size: 52px;
	}
	h2 {
		font-size: 21px;
		padding-top: 28px;
	}
	h3 {
		font-size: 19px;
		padding-top: 28px;
	}
	li {
		padding: 8px;
	}
}

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

	h1 {
		font-size: 64px;
	}
	h2 {
		font-size: 25px;
		padding-top: 31px;
	}
	h3 {
		font-size: 22px;
		padding-top: 31px;
	}
	li {
		padding: 10px;
	}
}
@media (min-width: 500px) and (max-width: 600px) {

	h1 {
		font-size: 80px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 25px;
	}
	li {
		padding: 13px;
	}
}
@media (min-width: 600px) and (max-width: 700px) {

	h1 {
		font-size: 95px;
	}
	h2 {
		font-size: 35px;
	}
	h3 {
		font-size: 30px;
	}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {

	h1 {
		font-size: 150px;
	}
	h2 {
		font-size: 45px;
		padding: 40px;
	}
	li {
		padding: 20px;
	}
}