/* RESET */

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 100%;}
html:focus-within {scroll-behavior: smooth;}
body {min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img, picture {display: block; max-width: 100%;}
input, button, textarea, select {font: inherit;}
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;} *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

/* STYLES */

body {
	display: flex;
	flex-direction: column;
	padding-top: 50px;
	font-family: Verdana, sans-serif;
	background-color: #e4e4e4;
}

body.modal-open,
body.settings-open {
	overflow: hidden;
}

body.modal-open .modal {
	opacity: 1;
	pointer-events: all;
}

body.settings-open .settings {
	opacity: 1;
	pointer-events: all;
}

.controls {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #ffffffda;
	height: 50px;
	display: flex;
	justify-content: space-between;
	padding: 5px 15px;
	user-select: none;
}

.delete-btn,
.add-btn,
.settings-btn {
	width: 40px;
	height: 40px;
	border: none;
	background-color: #d1d1d1;
	border-radius: 6px;
}

.delete-btn > svg,
.add-btn > svg,
.settings-btn > svg {
	width: 40px;
	height: 40px;
}

.delete-btn:hover,
.add-btn:hover,
.settings-btn:hover {
	background-color: #aaaaaa;
}

.notes {
	display: flex;
	flex-direction: column;
	padding-bottom: 30px;
	user-select: none;
}

.notes b {
	margin-top: 20px;
	padding: 0 15px;
	font-size: 14px;
	font-weight: bold;
	scroll-margin-top: 70px;
}

.notes b.date-today::after {
	content: '';
	display: inline-block;
	margin-left: .5em;
	width: 1em;
	height: 1em;
	background-color: green;
	color: white;
}

.notes li {
	margin-top: 10px;
	padding: 5px;
	background-color: white;
}

.modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-content: center;
	background-color: #00000041;
	opacity: 0;
	pointer-events: none;
}

.modal-inner {
	position: absolute;
	left: 50%;
	bottom: 50%;
	padding: 10px;
	width: 314px;
	height: 220px;
	background-color: white;
	transform: translateX(-50%);
}

textarea {
	width: 100%;
	padding: 5px;
	border: none;
	outline: #303030 1px solid;
}

.modal-btns {
	display: flex;
	margin-top: 10px;
	justify-content: space-between;
}

.close-btn,
.save-btn {
	width: 40px;
	height: 40px;
}

.close-btn > svg,
.save-btn > svg {
	width: 36px;
	height: 36px;
}

.input-date {
	margin: 0 10px;
	padding: 5px;
	height: 40px;
	background-color: #e9e9ed;
}

.settings {
	position: fixed;
	inset: 0;
	padding: 10px;
	background-color: white;
	opacity: 0;
	pointer-events: none;
	overflow-y: scroll;
}

.settings button {
	padding: 0 5px;
}

.settings hr {
	display: block;
	margin: 15px 0;
	height: 2px;
	background-color: #747474;
	border: none;
}

.settings a {
	color: #3a3aff;
}

footer {
	display: flex;
	justify-content: center;
	padding: 5px;
	margin-top: auto;
	user-select: none;
}

footer a {
	color: #222222;
	text-decoration: none;
}

body.delete-mode .notes li {
	background-color: #ff7171;
}


body.delete-mode .notes li.note-delete {
	background-color: red;
}

body.dark-theme {
	background-color: #222222;
	background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H0v36h36V0zM15.126 2H2v13.126c.367.094.714.24 1.032.428L15.554 3.032c-.188-.318-.334-.665-.428-1.032zM18 4.874V18H4.874c-.094-.367-.24-.714-.428-1.032L16.968 4.446c.318.188.665.334 1.032.428zM22.874 2h11.712L20 16.586V4.874c1.406-.362 2.512-1.468 2.874-2.874zm10.252 18H20v13.126c.367.094.714.24 1.032.428l12.522-12.522c-.188-.318-.334-.665-.428-1.032zM36 22.874V36H22.874c-.094-.367-.24-.714-.428-1.032l12.522-12.522c.318.188.665.334 1.032.428zm0-7.748V3.414L21.414 18h11.712c.362-1.406 1.468-2.512 2.874-2.874zm-18 18V21.414L3.414 36h11.712c.362-1.406 1.468-2.512 2.874-2.874zM4.874 20h11.712L2 34.586V22.874c1.406-.362 2.512-1.468 2.874-2.874z' fill='%23000000' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
	color: white;
}

body.dark-theme .controls {
	background-color: #00000094;
}

body.dark-theme .notes b.date-today::after {
	background-color: lime;
}

body.dark-theme .notes li {
	background-color: black;
}

body.dark-theme .modal {
	background-color: #00000093;
}

body.dark-theme .modal-inner {
	background-color: #747474;
}

body.dark-theme textarea {
	background-color: black;
	color: white;
}

body.dark-theme .settings {
	background-color: black;
}

body.dark-theme footer a {
	color: #bebebe;
}

body.dark-theme.delete-mode .notes li {
	background-color: #810000;
}

body.dark-theme.delete-mode .notes li.note-delete {
	background-color: #e00000;
}

@media (max-height: 440px) {
	.modal-inner {
		transform: translate(-50%, 50%);
	}
}

/* Safari fixes */
button {
	color: black;
}
button > svg {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}