:root {
	font-size: 15pt;
}

body {
	font-family: Roboto, "Noto Sans", Arial, sans-serif;
	color: black;
	margin: 8pt;
	background-color: #f2f2f2;
}

main {
	display: grid;
	grid-gap: 8pt;
	grid-auto-flow: row;
}

main > * {
	border: 1px solid black;
	box-shadow: 2px 2px 0px #808080;
	padding: 8pt;
}

h1 {
	text-align: center;
	background-color: darkKhaki;
	font-size: 2.6em;
	text-shadow: 2px 2px 0px snow;
}

h2 {
	margin-bottom: 8pt;
	font-size: 1.5em;
	text-align: center;
}

h3 {
	grid-area: title;
}

h3::before {
	content: counter(entry) ") ";
}

#form-container {
	background-color: lightSkyBlue;
}

form {
	display: grid;
	grid-template-areas: "label_title label_deadline" "title deadline" "label_description label_description" "description description" "submit submit";
	grid-column-gap: 8px;
	grid-row-gap: 8px;
}

form > * {
	display: block;
}

label[for="title"] {
	grid-area: label_title;
}

label[for="deadline"] {
	grid-area: label_deadline;
}

label[for="description"] {
	grid-area: label_description;
}

#title {
	grid-area: title;
}

#deadline {
	grid-area: deadline;
}

#description {
	grid-area: description;
}

#note-submit {
	grid-area: submit;
	
	border: 2px outset olive;
	background-color: paleGreen;
	padding: 3px 5px;
	font-weight: bold;
	font-size: 1em;
	border-radius: 0.5em;
}

#note-submit:hover {
	background-color: #cefdce;
}

#note-submit:active {
	border-style: inset;
	background-color: #53f953;
}

label {
	text-align: center;
	font-weight: bold;
}

input, textarea {
	border: 1px solid black;
	padding: 4px;
	font-size: 0.8em;
}

input[type="text"], textarea {
	font-family: inherit;
}

textarea {
	-moz-resize: vertical;
	resize: vertical;
}

input[type="date"] {
	cursor: pointer;
}

button {
	cursor: pointer;
}

#list-container {
	background-color: paleGoldenRod;
}

#list-container h2 {
	margin-bottom: 0px;
}

#entries {
	list-style-type: none;
	counter-reset: entry;
}

#entries:not(:empty) {
	margin-top: 8pt;
}

#entries li {
	border: 1px solid midnightBlue;
	background-color: white;
	padding: 5pt;
	counter-increment: entry;
	
	display: grid;
	grid-template-areas: "title title title" "deadline creation delete" "description description description";
	grid-gap: 4pt;
}

#entries li.no-description {
	grid-template-areas: "title title title" "deadline creation delete";
}

#entries li:not(:last-child) {
	margin-bottom: 8pt;
}

#entries p {
	grid-area: description;
	white-space: pre-wrap;
	background-color: #f2f2f2;
	padding: 4pt;
	
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

#entries button {
	grid-area: delete;
	font-size: 0.8em;
	/* font-weight: bold; */
	background-color: lightGoldenRodYellow;
	border: 1px solid darkRed;
	border-radius: 3px;
}

#entries button:hover {
	background-color: ghostWhite;
	border-color: orangeRed;
}

#entries button:active {
	background-color: lavenderBlush;
	border-color: fireBrick;
}

.creation-date, .deadline {
	white-space: nowrap;
	font-size: 0.75em;
	font-style: italic;
	padding: 2pt;
}

.creation-date {
	grid-area: creation;
}

.deadline {
	grid-area: deadline;
}

[data-urgency="2days"] .deadline {
	background-color: yellow;
	outline: 1px solid red;
}
[data-urgency="0days"] .deadline {
	background-color: orange;
	outline: 1px solid deepPink;
	
	-webkit-animation: urgency-0days 1s linear 0s infinite normal backwards running;
	-moz-animation: urgency-0days 1s linear 0s infinite normal backwards running;
	-o-animation: urgency-0days 1s linear 0s infinite normal backwards running;
	animation: urgency-0days 1s linear 0s infinite normal backwards running;
}

time {
	font-family: "Noto Mono", "Courier New", Courier, monospace;
	font-style: normal;
}

@-webkit-keyframes urgency-0days {
	0% {
		background-color: orange;
		color: inherit;
		outline-color: deepPink;
	}
	49.999% {
		background-color: orange;
		color: inherit;
		outline-color: deepPink;
	}
	50% {
		background-color: crimson;
		color: gold;
		outline-color: darkOrchid;
	}
	100% {
		background-color: crimson;
		color: gold;
		outline-color: darkOrchid;
	}
}

@keyframes urgency-0days {
	0% {
		background-color: orange;
		color: inherit;
		outline-color: deepPink;
	}
	49.999% {
		background-color: orange;
		color: inherit;
		outline-color: deepPink;
	}
	50% {
		background-color: crimson;
		color: gold;
		outline-color: darkOrchid;
	}
	100% {
		background-color: crimson;
		color: gold;
		outline-color: darkOrchid;
	}
}

@media screen and (max-width: 500px) {
	:root {
		font-size: 12pt;
	}
}

@media screen and (max-width: 360px) {
	:root {
		font-size: 10pt;
	}
}

@media screen and (max-width: 300px) {
	:root {
		font-size: 8pt;
	}
}