:root {
	--bg: #FAFAFA;
	--text: black;
	--btn_bg: #bdbdbd;
	--btn_text: #000a;
	--search_bg: #eee;
	--list_bg: #e0e0e0
}

@media(prefers-color-scheme:dark) {
	:root {
		--bg: #212121;
		--text: white;
		--btn_bg: #757575;
		--btn_text: #fff;
		--search_bg: #424242;
		--list_bg: #616161
	}
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: var(--bg);
	color: var(--text);
}

#add_button {
	position: fixed;
	right: 5vmin;
	bottom: 5vmin;
	height: 15vmin;
	width: 15vmin;
	font-size: 10vmin;
	font-weight: bold;
	border-radius: 5vmin;
	background-color: var(--btn_bg);
	color: var(--btn_text);
	box-shadow: 1px 1px 2px 1px #0002;
	transition: all 0.5s;
	display:flex;
	justify-content:center;
	align-items:center;
}

#add_button:hover{
	transform: scale(0.9);
}

input[type="search"] {
	position: fixed;
	top: 0;
	z-index:2;
	margin: 5vmin;
	width: calc(100% - 10vmin);
	height: 10vmin;
	background-color: var(--search_bg);
	color: var(--search-text);
	border-radius: 10vmin;
	border: none;
	font-size: 5vmin;
	font-weight: bold;
	padding: 0 10vmin;
	box-shadow: 0 1px 2px 1px #0002;
}

ul {
	padding: 0 5vmin;
	list-style-type: none;
	overflow: scroll;
	margin-top: 20vmin;
}

li {
	margin-top: 5vmin;
	border-radius: 5vmin;
	background-color: var(--list_bg);
	padding: 10vmin;
	font-size: 5vmin;
	font-weight: bold;
	font-style: italic;
	transition: all 0.2s ease-in-out;
	user-select:none;
}

li:hover{
	transform: scale(0.95)
}
a{
	text-decoration: none;
	color:inherit;
	user-select: none;
}
li a {
	pointer-events: none;
}

#page{
	position:fixed;
	top:0;
	z-index:3;
	height:calc(100% - 10vmin);
	width:calc(100% - 10vmin);
	background-color: var(--bg);
	color:var(--text);
	padding:5vmin;
	display:none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	animation:appear 0.5s ease-in-out;
}

@keyframes appear{
	from{
		transform: translateX(100%);
	}
	
}

#pageTitle{
	font-size:7vmin;
	font-weight:bold;
	height:100%;
	margin:0;
	padding: 0;
	background: none;
	border:none;
	width: 100%;
	color:inherit;
	outline:none;
}
#pageText{
	height:85%;
	width:95%;
	border:none;
	padding:1vmin;
	background: none;
	color:inherit;
	outline:none;
}
#page div{
	display:flex;
	align-items: center;
	height: 10%;
	width: 100%;
}
#close_button{
	border:none;
	background: none;
	font-size:15vmin;
	font-weight:bold;
	color:var(--btn_text);
	margin-right:5vmin;
}