:root {
	font-size: 13pt;
}

body {
	font-family: Arial, Roboto, "Noto Sans", sans-serif;
	background-color: #7EBFE5;
	margin: 0px;
}

#page-container {
	display: grid;
	grid-gap: 0px;
	margin: auto;
	/* width: 80%; */
	
	grid-template-columns: auto;
	grid-template-rows: auto auto;
}

header {
	display: grid;
	
	grid-template-columns: auto;
	grid-template-rows: auto auto;
}

#title-container {
	border-bottom: 2px solid #001837;
	
	display: grid;
	
	grid-template-columns: 60px 1fr;
	grid-template-rows: 60px;
}

#title-container > * {
	align-self: center;
}
	
h1 {
	font-size: 2em;
	text-align: center;
	color: #001837;
	font-style: italic;
	text-shadow: 2px 2px 0px #7EBFE5;
}

#logo {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border: 1px solid #001837;
}

nav {
	font-size: 1em;
}

nav ul, ul.items {
	display: grid;
	list-style-type: none;
}

nav ul {
	grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
	grid-template-rows: auto;
}

nav li, .items li, #intro, #title-container {
	padding: 8px;
}

nav li {
	font-weight: bold;
	align-self: center;
}

nav li:not(:last-child) {
	border-right: 2px solid #001837;
}

body.index main {
	display: grid;
	grid-template-columns: auto;
}

#intro {
	display: grid;
	grid-template-columns: 80px 1fr;
	grid-template-rows: 80px;
	font-size: 1.5em;
	text-shadow: 1px 1px 0px white;
}

#intro p {
	align-self: center;
	padding-left: 8px;
	font-weight: bold;
	text-align: center;
}

ul.items {
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

body.index #start-link a, body.employees #employee-link a {
	/*
	text-decoration: underline !important;
	
	-moz-text-decoration-style: double !important;
	text-decoration-style: double !important;
	*/
	
	font-weight: 900;
}

header, .items li, #intro {
	background-color: white;
}

header, .items li:not(:last-child), #intro {
	border-bottom: 2px solid #001837 !important;
}

.items li {
	text-align: center;
	
	-webkit-transition: box-shadow 0.25s ease-in-out 0s, background-color 0.25s ease-in-out 0s;
	-moz-transition: box-shadow 0.25s ease-in-out 0s, background-color 0.25s ease-in-out 0s;
	-o-transition: box-shadow 0.25s ease-in-out 0s, background-color 0.25s ease-in-out 0s;
	transition: box-shadow 0.25s ease-in-out 0s, background-color 0.25s ease-in-out 0s;
}

.items img {
	border-radius: 4px;
	box-shadow: 1px 1px 4px #808080;
	border: 1px solid #001837;
}

img.product-preview {
	max-width: 80%;
	max-height: 220px;
	text-align: center;
	margin-bottom: 8px;
	/*border: 1px solid #001837;*/
}

.items p {
	text-align: justify;
	padding: 0px 2em;
}

/* ================================== TIME EVENTS ================================== */

#clock {
	position: relative;
	top: 0px;
	left: 0px;
	border-radius: 100%;
	cursor: pointer;
	font-size: 0px;
	overflow: hidden;
	border: 1px solid white;
}

#clock img {
	width: 100%;
	height: 100%;
	
	position: absolute;
	top: 0px;
	left: 0px;
}

[data-daytime="morning"] #intro {
	background-color: lightGoldenRodYellow;
}
[data-daytime="day"] #intro {
	background-color: orange;
}
[data-daytime="evening"] #intro {
	background-color: grey;
}
[data-daytime="night"] #intro {
	background-color: midnightBlue;
	color: snow;
	text-shadow: 1px 1px 0px dodgerBlue;
}

/* ====== Item Highlight Colours ====== */
.items li[data-highlight="1"] {
	background-color: lightCoral;
}
.items li[data-highlight="2"] {
	background-color: mediumAquaMarine;
}
.items li[data-highlight="3"] {
	background-color: greenYellow;
}
.items li[data-highlight="4"] {
	background-color: dodgerBlue;
}

/*
.items li[data-highlight]:not([data-highlight="0"]) p:first-line {
	font-weight: bold;
}
.items li[data-highlight]:not([data-highlight="0"]) i.b {
	font-style: italic;
}
*/

/* ====== Default Clock Positions ====== */
#hour-hand {
	transform: rotate(60deg);
}
#minute-hand {
	transform: rotate(-60deg);
}
#second-hand {
	transform: rotate(180deg);
}

/* ================================== EMPLOYEE SITE ================================== */

body.employees ul.items {
	grid-template-columns: auto;
}

body.employees .items li {
	display: grid;
	grid-template-areas: 'portrait name'
						 'portrait bio';
}

h2 {
	grid-area: name;
	text-align: left;
	font-size: 1.6em;
	padding-left: 8px;
}

img.employee-portrait {
	grid-area: portrait;
	max-width: 130px;
	max-height: 130px;
}

body.employees .items p {
	grid-area: bio;
	padding: 0px 0px 0px 8px;
}

/* ================================== MEDIA QUERIES ================================== */

@media screen and (min-width: 520px) {
	h1 {
		font-size: 2.5em;
		text-shadow: 2.5px 2.5px 0px #7EBFE5;
	}
	#title-container {
		grid-template-rows: 80px;
		grid-template-columns: 80px 1fr;
	}
	#intro {
		font-size: 2em;
		grid-template-columns: 100px 1fr;
		grid-template-rows: 100px;
	}
}
@media screen and (min-width: 580px) {
	body {
		margin: 8px;
	}
	
	#title-container {
		grid-template-rows: 90px;
		grid-template-columns: 90px 1fr;
	}
	
	#page-container, ul.items, body.index main {
		grid-gap: 8px;
	}
	
	#page-container {
		width: 100%;
	}
	
	header, .items li, #intro {
		border: 2px solid #001837;
		border-radius: 8px;
		box-shadow: 2px 2px 6px #808080;
	}
	.items li[data-highlight]:not([data-highlight="0"]) {
		box-shadow: 0px 0px 4px 3px gold;
	}
	
	nav {
		font-size: 1.1em;
	}
}

@media screen and (min-width: 700px) {
	#title-container {
		grid-template-rows: 100px;
		grid-template-columns: 100px 1fr;
	}
	h1 {
		font-size: 3.5em;
		text-shadow: 3px 3px 0px #7EBFE5;
	}
	#intro {
		font-size: 3em;
		grid-template-columns: 120px 1fr;
		grid-template-rows: 120px;
	}
}

@media screen and (min-width: 1000px) {
	#page-container {
		width: 90%;
	}
}

@media screen and (min-width: 1120px) {
	#page-container {
		width: 80%;
	}
}