/* Variables */
:root {
    --selection-color: #25962c;
    --drop-shadow: drop-shadow(0 0 10px rgba(61, 61, 61, 0.1));
}

/* Typography */

html {
	font-family: 'Roboto', sans-serif;
}


/* Screen Sizes */
@media (min-width: 576px) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}

/* Custom Styles */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

body > .intro {
	font-family: 'Reem Kufi', sans-serif;
	font-size: 3.75em;
	font-weight: 600;
    filter: var(--drop-shadow);
}

body > .intro::selection{
    background: var(--selection-color);
}

footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
}

footer > .construction {
	font-size: 1rem;
	font-weight: 100;
    text-align: center;
    filter: var(--drop-shadow);
}

footer > .construction::selection{
    background: var(--selection-color);
}

    
/* Theme */

body {
	background: #00b09b;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #00b09bm, #96c93d);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #00b09b, #96c93d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	color: #FAFAFA;
}