@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

* { margin: 0px; padding: 0px; box-sizing: border-box; }
html { font-size: 16px; font-family: 'Roboto', sans-serif;	color: white; }
html, body { width: 100%; height: 100%; }
body { background: #333 url(background.jpg) no-repeat center bottom/100% 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.container { width: 100%; height: 100%; }
.container .underConstruction { display: flex; flex-direction: column; align-items: center; margin-top: 10%; }
.container .underConstruction h1 { font-size: 7rem; font-family: 'Open Sans', sans-serif; letter-spacing: .3rem; text-align: center; }
.container .underConstruction h4 { font-size: 1.5rem; margin-top: 1%; letter-spacing: 0.5rem;	}
.container .underConstruction .progressBar { margin-top: 1%; }

.progressBar { width: 25%; }
progress { -webkit-appearance: none; appearance: none; width: 100%; }
progress::-webkit-progress-value { background-color: rgba(128,173,220,1); transition: all 3s ease-out; }
progress::-webkit-progress-bar,
progress::-webkit-progress-value { border-radius: .31rem; }
.progressBar p { font-size: 1.5rem; margin-top: .5rem; display: flex; justify-content: space-between; }

footer { padding-bottom: 2rem; font-size: 1.5em; }

/* Smartphones (portrait) */
@media (orientation: portrait) {
	.container .underConstruction { margin: 0; height: 100%; justify-content: space-around; }
}

@media (max-width : 1024px) and (orientation: portrait) {
	html { font-size: 12px; }
}

@media (max-width : 768px) and (orientation: portrait) {
	html { font-size: 10px; }
}

@media (max-width : 640px) and (orientation: portrait) {
	html { font-size: 8px; }
}

@media (max-width : 420px) and (orientation: portrait) {
	html { font-size: 5px; }
}

/* Smartphones (landscape) */
@media (max-width : 1440px) and (orientation: landscape) {
	html { font-size: 14px; }
}

@media (max-width : 1366px) and (orientation: landscape) {
	html { font-size: 13px; }
}

@media (max-width : 1024px) and (orientation: landscape) {
	html { font-size: 12px; }
}

@media (max-width : 768px) and (orientation: landscape) {
	html { font-size: 8px; }
}

@media (max-width : 640px) and (orientation: landscape) {
	html { font-size: 6px; }
}