index.css

#menu-icon {
	width: 35px;
	height: 35px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	/* animation-name:rotate; */
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
}

@keyframes rotate-open {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(90deg);
	}
}
@keyframes rotate-close {
	0% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(0);
	}
}
#menu {
	background-color: rgb(185, 136, 248);
	border: 1px solid rgb(185, 136, 248);
	color: black;
	filter: opacity(0.9);
	border-radius: 15px;
	position: absolute;
	top: 45px;
	right: 45px;
	text-align: left;

	/* Invisible */
	display: none;
}

select {
	background-color: rgb(185, 136, 248);
	font-size: medium;
	border: none;
}

table {
	padding: 8px;
}
td {
	padding: 5px;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
	text-align: center;
	margin: 0;
	font-size: large;

	transition: linear;
	transition-duration: 0.5s;
}
.body-light {
	background-color: rgb(228, 228, 228);
	color: rgb(23, 23, 23);
}

.body-dark {
	background-color: rgb(33, 33, 33);
	color: white;
}

#notes {
	width: 90%;
	height: 80vh;
	resize: none;
	border-radius: 10px;
	padding: 25px 15px;
	border: none;
	font-size: large;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
	outline: none;
	line-height: 30px;
}

.textarea-light {
	background-color: white;
	color: rgb(23, 23, 23);
}
.textarea-dark {
	background-color: rgb(60, 59, 59);
	color: white;
}