html {
	background-color: #202020ff;
}

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

header a span{
	text-decoration: none !important;
	color: hsl(176.27, 100%, 50%);
	font-weight: 700;
}

header a{
	text-decoration: none !important;
}

header {
	background: #155050d0;
	height: 64px;
	font-size:27px;
	display:flex;
	gap: 32px;
	align-items: center;
	padding-left: 8px;
	padding-right: 8px;
	box-shadow: 0 0 20px #25b6b6;
	margin-bottom: 16px;
}

#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;
	gap: 24px;
	align-items: start;
}

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

.title{
	font-size: 1.25em;
	font-weight: 700;
}

@media only screen and (max-width: 750px){
	header{
		font-size:16px;
	}

	#main-content{
		box-shadow: unset;
		justify-content: center;
		flex-wrap: wrap;
	}

	html{
		background-color: #155050;
	}
}

.characters a {
	text-decoration: none !important;
	color: white;
}