:root {
	--primary-font: 'Nunito Sans', sans-serif;
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-select: none;
  }

@media (prefers-color-scheme: dark) {
	:root {
		--primary-style-color: #282828;
		--primary-font-color: #FAF9F6;
	
		--secondary-style-color: #333333;
		--secondary-font-color: #C7C7C7;
	
		--online-color: #27AE60;
		--offline-color: #E71111;

		--trash-can: url("../images/trash-can.svg");
		--alarm-icon: url("../images/alarm.svg");
	}

	:root.dark-mode {
		--primary-style-color: #FAF9F6;
		--primary-font-color: #2c3f48;
	
		--secondary-style-color: #C7C7C7;
		--secondary-font-color: #C7C7C7;
	
		--online-color: #008000;
		--offline-color: #ff0000;

		--trash-can: url("../images/trash-can-2.svg");
		--alarm-icon: url("../images/alarm-2.svg");
	}
  }
  
  @media (prefers-color-scheme: light) {
	:root.dark-mode  {
		--primary-style-color: #282828;
		--primary-font-color: #FAF9F6;
	
		--secondary-style-color: #333333;
		--secondary-font-color: #C7C7C7;
	
		--online-color: #27AE60;
		--offline-color: #E71111;

		--trash-can: url("../images/trash-can.svg");
		--alarm-icon: url("../images/alarm.svg");
	}

	:root{
		--primary-style-color: #FAF9F6;
		--primary-font-color: #2c3f48;
	
		--secondary-style-color: #C7C7C7;
		--secondary-font-color: #C7C7C7;
	
		--online-color: #008000;
		--offline-color: #ff0000;

		--trash-can: url("../images/trash-can-2.svg");
		--alarm-icon: url("../images/alarm-2.svg");
	}
  }

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	margin: 5em 3em 0 3em;
	font-family: var(--primary-font);
	background-color: var(--primary-style-color);
	transition: .3s ease;
}

@media screen and (max-width: 600px) {
	body {
		/* max-width: 43em;
		margin: 5em auto 0 auto; */
		font-size: 2.6vw;
	}
}

@media screen and (min-width: 800px) {
	body {
		max-width: 43em;
		margin: 5em auto 0 auto;
	}
}

h1 {
	color: var(--primary-font-color);
	font-size: 3em;
	font-weight: 700;
	line-height: 1.2em;
}

header {
	position: relative;
	margin: 0 .2em -1em .2em;
}

header div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header p, footer p {
	color: var(--secondary-font-color);
}

header p {
	line-height: 2.4em;
}

header a img {
	height: 2em;
}

main div {
	position: relative;
	margin: 2em 0;
	display: flex;
	align-items: center;
}

main > div:first-of-type {
	display: none;
}

main div a:nth-of-type(1) {
	background-color: var(--secondary-style-color);
	height: 6em;
	width: 100%;
	border-radius: .8em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 7em 0 2em;
}

main div a:nth-of-type(2) {
	position: absolute;
	right: 2em;
}

main p {
	color: var(--primary-font);
	font-weight: 700;
	font-size: 1.4em;
}

a {
	text-decoration:none;
	color: var(--primary-font-color);
}

main div a img {
	filter: brightness(0) saturate(100%) invert(48%) sepia(64%) saturate(472%) hue-rotate(93deg) brightness(101%) contrast(95%);
	background-color: var(--online-color);
	border-radius: 50%;
	height: 1.4em;
	width: 1.4em;
}

main div a div {
	display: none;
}

main div a div.alarmElement {
	display: block;
	filter: none;
	background-color: transparent;
	height: 1.4em;
	width: 1.4em;
	position: absolute;
	right: 9.6em;
	border-radius: 0;
	background-image: var(--alarm-icon);
}

.broken {
	filter: none;
}

footer p {
	margin: 2.5em 0 2.5em .2em;
	font-weight: 300;
}

footer p a span {
	font-weight: 400;
	/* color: gold; */
}

header a:first-of-type, header a:nth-last-of-type(2) {
	background-color: transparent;
	border: none;
	margin-right: 1em;
	display: flex;
	align-items: center;
}

header a:first-of-type:hover, header a:nth-last-of-type(2):hover {
	cursor: pointer;
}

.svg {
	position: absolute;
	width: 2.5em;
	height: 2.5em;
  }
  .dark-light-shape {
	width: 2.5em;
	height: 2.5em;

	background-color: var(--secondary-font-color);
	-webkit-clip-path: url(#color-mode-clip-path);
	clip-path: url(#color-mode-clip-path);
	transition: .3s ease;
  }

  .cross-shape {
	width: 2.5em;
	height: 2.5em;
	background-color: var(--secondary-font-color);
	-webkit-clip-path: url(#cross-clip-path);
	clip-path: url(#cross-clip-path);
  }

.dark-light-shape-animation {
	transform: rotate(-180deg);
}

.trash {
	height: 3em;
	width: 3em;
	background-image: var(--trash-can);
	background-size: contain;
	background-repeat: none;
}

header div a img {
	height: 3em;
}

header a, main > div > a:nth-of-type(2) {
	transition: .2s ease;
	/* transition-delay: .1s; */
}

header a:hover, main > div > a:nth-of-type(2):hover, header a:focus, main > div > a:nth-of-type(2):focus, header a:active, main > div > a:nth-of-type(2):active {
	transform: scale(115%);
}