:root {
	--bg-col: rgb(245, 242, 240);
	--bg-col-alt: rgb(255, 255, 255);

	--border-col: rgb(179, 179, 179);

	--font-col: rgb(102, 102, 102);

	--green: rgb(60, 199, 106);
	--green-highlight: rgba(60, 199, 106, 0.7);
	--blue: rgb(51, 152, 219);
	--blue-highlight: rgba(51, 152, 219, 0.7);
	--yellow: rgb(250, 197, 75);
	--yellow-highlight: rgba(250, 197, 75, 0.7);
	--orange: rgb(248, 153, 74);
	--orange-highlight: rgba(248, 153, 74, 0.7);
	--red: rgb(235, 92, 45);
	--red-highlight: rgba(235, 92, 45, 0.7);


}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--bg-col: rgb(37, 41, 45);
		--bg-col-alt: rgb(74, 78, 82);
		/* #2f3337 */

		--border-col: rgb(24, 24, 24);

		--font-col: #dcdcdd;
	}
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: 'Raleway', sans-serif;
}

body {
	background-color: rgb(245, 242, 240);
	background-color: var(--bg-col);
	color: rgb(102, 102, 102);
	color: var(--font-col);
	padding: 100px 32px 32px;
	min-width: 320px;
	overflow-x: hidden;
}

header {
	position: fixed;
    width: 100%;
    background-color: rgb(245, 242, 240);
    background-color: var(--bg-col);
    top: 0;
    left: 0;
    padding: 32px;
    box-shadow: 0px 2px 6px -2px rgb(179, 179, 179);
    box-shadow: 0px 2px 6px -2px var(--border-col);
    z-index: 3;
}

h1, h2, h3, h4 {
	font-weight: bold;
}

ul {
	list-style: none;
}

li {
	margin-bottom: 16px;
}

section {
	padding: 12px 0px;
    margin: 24px 0px;
    border-bottom: 1px solid rgb(179, 179, 179);
    border-bottom: 1px solid var(--border-col);
}

section > h2, article > h2 {
	margin-bottom: 8px;
	width: 100%;
}

.sites {
	display: flex;
	flex-wrap: wrap;
	margin-right: -32px;
	padding-top: 2em;
	max-width: 1600px;
}

article {
	background-color: rgb(255, 255, 255);
	background-color: var(--bg-col-alt);
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0px 2px 3px rgb(179, 179, 179);
	box-shadow: 0px 2px 3px var(--border-col);
	margin-bottom: 32px;
    flex-grow: 1;
    margin-right: 32px;
}

article > section {
	margin: 0;
	padding: 0;
	border-bottom: none;
	margin-bottom: 24px;
	display: flex;
    flex-direction: column;
    align-items: center;
}

article > section > h3.status {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 10px;
	box-shadow: 0px 1px 2px rgb(179, 179, 179);
	box-shadow: 0px 1px 2px var(--border-col);
	font-weight: bold;
	margin-right: auto;
	pointer-events: none;
}

article > section > ul.history {
	margin: 24px 0px;
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 424px;
}

article > section > ul.history > li.day {
	width: 8px;
	height: 32px;
	margin-bottom: 0;
	cursor: pointer;
}

article > section > ul.history > li.day:after {
	display: none;
    content: attr(data-popover);
    position: absolute;
    pointer-events: none;
    top: calc(100% + 8px);
    left: 0px;
    width: calc(100% - 32px);
    text-align: center;
    color: rgb(102, 102, 102);
    color: var(--font-col);
    background-color: rgb(255, 255, 255);
    background-color: var(--bg-col-alt);
    box-shadow: 0px 1px 4px rgb(179, 179, 179);
    box-shadow: 0px 1px 4px var(--border-col);
    border-radius: 10px;
    z-index: 2;
    padding: 16px;
}

article > section > ul.history > li.day:hover::after {
	display: block;
}

article > section > table.percentage {
	width: 100%;
	max-width: 424px;
	text-align: center;
	border-spacing: 6px 0px;
}

article > section > table.percentage th {
	position: relative;
	border-bottom: 1px solid rgb(102, 102, 102);
	border-bottom: 1px solid var(--font-col);
}

article > section > table.percentage td {
	position: relative;
}

article > section > table.percentage td:not(:nth-child(4)):after,
article > section > table.percentage th:not(:nth-child(4)):after {
	position: absolute;
	content: '';
	height: 100%;
	width: 1px;
	background-color: rgb(102, 102, 102);
	background-color: var(--font-col);
	left: calc(100% + 3px);
	top: 0;
}

.green {
	background-color:rgb(60, 199, 106);
	background-color: var(--green);
	color: white;
}

.green:hover {
	background-color: rgba(60, 199, 106, 0.7);
	background-color: var(--green-highlight);
}

.blue {
	background-color: rgb(51, 152, 219);
	background-color: var(--blue);
	color: white;
}

.blue:hover {
	background-color: rgba(51, 152, 219, 0.7);
	background-color: var(--blue-highlight);
}

.yellow {
	background-color: rgb(250, 197, 75);
	background-color: var(--yellow);
	color: white;
}

.yellow:hover {
	background-color: rgba(250, 197, 75, 0.7);
	background-color: var(--yellow-highlight);
}

.orange {
	background-color: rgb(248, 153, 74);
	background-color: var(--orange);
	color: white;
}

.orange:hover {
	background-color: rgba(248, 153, 74, 0.7);
	background-color: var(--orange-highlight);
}

.red {
	background-color: rgb(235, 92, 45);
	background-color: var(--red);
	color: white;
}

.red:hover {
	background-color: rgba(235, 92, 45, 0.7);
	background-color: var(--red-highlight);
}

footer {
	font-size: 12px;
}


@media screen and (max-width: 540px) {
	body {
		padding: 72px 16px 16px;
	}

	header {
		padding: 16px;
	}
}

@media screen and (max-width: 365px) {
	body {
		padding: 72px 8px 16px;
	}

	header {
		padding: 16px 8px;
	}

	article {
		padding: 8px;
	}
}

/* body {
		font-family: 'Open Sans', sans-serif;
		background-color: #3e3e3e;
		color: white;
		margin: 0;
	}

	h1 {
		text-align: center;
	}

	.bubble {
		background-color: #eee;
		color: black;
		padding: 1em 2em;
		margin: 1em 0;
	}

	.site {
		margin: 1em;
		border-radius: 1em;
	}

	.site > h2 {
		margin: 0;
	}

	.siteFooter {
		font-size: 0.8em;
	}

	.green {
		background-color: #00866e;
		color: white;
	}
	.yellow {
		background-color: #fbe10d;
		color: black;
	}
	.orange {
		background-color: #fb9c0d;
		color: black;
	}
	.red {
		background-color: #fb570d;
		color: black;
	}
	.blue {
		background-color: #0061FF;
		color: white;
	}

	.history .day {
		margin: 0.1em;
		width: 0.5em;
		height: 1em;
		border-radius: 0.3em;
		display: inline-block;
		position: relative;
	}

	.day:after {
		content: attr(data-popover);
		background-color: #f00;
		display: none;
		position: absolute;
		top: 100%;
		padding: 10px;
		border-radius: 5px;
	}

	.day:hover:after {
			display: block;
	}

	.site {
		width: 30em;
		float:left;
	}

	.clear {
		clear:both;
	}

	.status > span {
		border-radius: 0.4em;
		padding: 0.2em 0.4em;
		margin: 1em 0;
		display: inline-block;
	} */