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

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
}

body {
	margin-left: auto;
	margin-right: auto;
	background: #FAFAFA;
	background-color: aqua;
	background-position: 100%;
	text-align: center;
	padding: 15% 5%;

	/* Flexbox for centering */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh; /* Ensures it covers the full viewport height */
}


.soslomas {
	font-size: 40px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 200;
}

h1 {
	font-size: 24px;
	text-transform: uppercase;
	color: #1B1A1A;
	text-decoration: none;
	font-weight: 200;
}

/* Portrait Mobile View */
@media (min-width: 480px) {
	body {
		max-width: 90%;
		background-color: royalblue;
		padding: 20% 10%;
	}
	.soslomas {
		font-size: 60px;
	}
	h1 {
		font-size: 30px;
	}
}

/* Landscape Mobile and Small Tablet View */
@media (min-width: 600px) {
	body {
		max-width: 80%;
		padding: 15% 5%;
		background-color: cornflowerblue;
	}
	.soslomas {
		font-size: 70px;
	}
	h1 {
		font-size: 35px;
	}
}

/* Tablet View */
@media (min-width: 768px) {
	body {
		max-width: 778px;
		padding: 35% 5%;
		background-color: olive;
	}
	h1 {
		font-size: 50px;
	}
	.soslomas {
		font-size: 111px;
	}
}

/* Desktop View */
@media (min-width: 1024px) {
	body {
		max-width: 100%;
		padding: 25% 5%;
		background-color: tomato;
	}
	h1 {
		font-size: 57px;
	}
	.soslomas {
		font-size: 133px;
	}
}

/* Very Big Desktop View */
@media (min-width: 2000px) {
	body {
		max-width: 100%;
		padding: 25% 5%;
		background-color: gold;
	}
	h1 {
		font-size: 57px;
	}
	.soslomas {
		font-size: 133px;
		color: #000000;
	}
}