html, body {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;;
}
h1{
	color:#333
}
body {
	color: #333;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
#modal{
	display:none;
}
.navbar{
	display: flex;
	justify-content: center;
}
.close_modal{
	display:flex;
	justify-content: flex-start;
}
.container{
	padding:5px;
	padding-top:20px;
	padding-bottom:20px;
	background-color: #F2F2F7;
	border-radius:10px;
}
.grid{
	display:grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	margin: auto;
	justify-items: center;
}
.item{
	padding:10px;
	background-color: #E5E5EA;
	width:90%;
	margin-bottom:15px;
	border-radius:10px;
}
#footer{
	font-size: 13px;
	color:#AAAAAA
}
@media(max-width:1000px){
	.grid{
		grid-template-columns: 100%;
	}
}
input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 0px solid #F2F2F6;
	border-radius: 2px;
}
input, a{
	font-family: inherit;
	font-size: inherit;
	border-radius:5px;
	overflow: hidden;
	background-color: #F2F2F7;
	outline: none;
}
a{
	padding:8px 10px;
	outline: none;
}
ion-icon{
	margin:0px 0px -2px 0px;
}
input{
	padding: 8px 5px;
	width:250px;
}
@media(prefers-color-scheme: dark){
	html, body{
		background-color: #1C1C1D;
	}
	.container, #x, #search, input{
		background-color: #2C2C2E;
		color:white;
	}
	.item{
		background-color:#393A3C;
	}
	h1, h2 h3, p{
		color:#FBFBFF;
	}
}

.loader {
	margin: auto;
	border: 6px solid #FFFFFF;
	border-top: 6px solid #80CFFB;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 4s linear infinite;
 }
 
 @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
 }