html {
	background-color: #202020ff;
}
body{
	color: white;
	margin: unset;	
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
	background: #155050d0;
	height: 64px;
	font-size:27px;
	display:flex;
	gap: 32px;
	align-items: center;
	padding-left: 8px;
	padding-right: 8px;
}

#grid-of-about{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px;
	
}
#favorites{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px;
}
#grid-of-about> :nth-child(odd){
	font-weight: 700;
	text-align: right;
}
#logoheader {
	height: 48px;
	border-radius: 100vmax;
	background-color: #000;
}
#titleh1{
	margin: unset;
	font-size: 27px;
}

#homelinkheader{
	text-decoration: none;
	color: hsl(176.27, 100%, 50%);
	display: flex;
	gap: 20px;
	align-items: center;
}
.content-centered{
	align-items: center;
}

#main-content{
	background-color: #155050d0;
	border-radius: 24px;
	padding: 24px;
	flex-grow: 1;
	max-width: 700px;
	display: flex;
	box-shadow: 0 0 5px #25b6b6;
	flex-wrap: wrap;
	gap: 24px;
	align-items: start;
}

.article-content{
	display: flex;
	justify-content: center;
}

.title{
	font-size: 1.25em;
	font-weight: 700;
}
nav{
width: 100%;
}
nav>*{
	display: flex;
	align-items: center;
	padding-left: 120px;
	padding-right: 120px;
	justify-content: space-between;
}
nav>:nth-child(odd){
	flex-direction: row-reverse;
}
.navbut{
	align-items: center;
	color: #fff !important;
	border-radius: 100vmax;
	background-color: rebeccapurple;
	width: 120px;
	padding: 12px;
	text-decoration: none;
	font-weight: 700;
	display: flex;
}
.navbut span{
	flex-grow: 1;
}
nav div a img{
height: 14px;
width: 14px;
}
#about-me{
	background: #155050d0;
	height: 500px;
	background-image: url("/assets/index.webp");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#xenodorians{
	background-color: hsl(288 30% 14% / 1);
	background-image: url("https://xenodorian.eltala.dev/assets/logov3.svg");
	height: 500px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#xivali{
	background-image: linear-gradient(#03957f, #007a9a, #03957f);
	height: 500px;
}
#characters{
	background-image: linear-gradient(#03957f, #155050d0, #155050d0, #155050d0, #155050d0);
	height: 500px;
}
@media only screen and (max-width: 750px){
header{
	font-size:16px;
}
#main-content{
	box-shadow: unset;
	justify-content: center;
}
html{
background-color: #155050;
}
}