/*
  __  __            
 |  \/  |           
 | \  / |_   _  ___ 
 | |\/| | | | |/ _ \
 | |  | | |_| |  __/
 |_|  |_|\__,_|\___|
 -------------------
 Copyright 2018 Dave R (ohlookitsderpy) 
 Licensed under MIT
 Special thanks to contributors! <3
 GitHub: https://github.com/ohlookitsderpy/Mue
*/

/*  VARIABLES  */

:root {

	--shadow-color: #111111CC;

}

/*  BASIC STYLING  */

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

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	margin: 0;

	background-size: cover;
	background-position: 50%;

	font-family: 'Roboto', sans-serif;
	color: white;
    -moz-user-select: none; /* Firefox */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/*  BACKGROUND CLASSES  */

.mountain {  background-image: url('../img/1.jpeg'); }
.sunrise {   background-image: url('../img/2.jpeg'); }
.butterfly { background-image: url('../img/3.jpeg'); }
.leaves {    background-image: url('../img/4.jpeg'); }
.city {      background-image: url('../img/5.jpeg'); }
.sea {       background-image: url('../img/6.jpeg'); }
.space {     background-image: url('../img/7.jpeg'); }
.ice {       background-image: url('../img/8.jpeg'); }
.house {     background-image: url('../img/9.jpeg'); }
.river {     background-image: url('../img/10.jpeg'); }
.town {      background-image: url('../img/11.jpeg'); }
.desert {    background-image: url('../img/12.jpeg'); }
.canyon {    background-image: url('../img/13.jpeg'); }
.rose {      background-image: url('../img/14.jpeg'); }
.forest {    background-image: url('../img/15.jpeg'); }
.lightbulb { background-image: url('../img/16.jpeg'); }
.clouds {    background-image: url('../img/17.jpeg'); }
.dj {        background-image: url('../img/18.jpeg'); }
.keyboard {  background-image: url('../img/19.jpeg'); }
.table {     background-image: url('../img/20.jpeg'); }

/*  TEXT SHADOW  */

.greeting,
time,
.quote {
	
	filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color));

}

/* Greeting */

.greeting {

	--shadow-shift: 0.2rem;
	
	font-size: 3.25rem;

}

/* Time */

time {

	--shadow-shift: 0.4rem;
	
	font-size: 12rem;

}

/* Quote */

.quote {

	--shadow-shift: 0.125rem;

	width: 37.5%;
	max-width: 37.5rem; /* 600px on desktop */
	
	font-size: 1.5rem;
	text-align: center;

}

/* quote text */

.quote blockquote {

	margin: 0 0 0.25rem 0;

	line-height: 1.125;
	
}

.quote blockquote::before { content: '“'; margin-right: 0.25ch; }
.quote blockquote::after { content: '”';  margin-left: 0.25ch; }

/* quote author */

.quote cite { font-size: 83.33%; }

/* Font */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
		 url('../font/roboto-v18-latin-regular.woff2') format('woff2'); 
  }