header {
	/*background: linear-gradient(90deg,#CD5C5C,#F08080,#FA8072,#E9967A,#FFA07A);*/

	margin-top: 20px;

	display: flex;

	height: 2em;

	border-bottom-width: 2px;
	border-color: #777;
	border-bottom-style: solid;

	margin-left: 20px;

	border-left-width: 5px;
	border-left-style: solid;

	border-bottom-left-radius: 13px;
}

h1 {

	position: relative;

	padding: 6px;
	padding-left: 20px;
	padding-right: 20px;

	margin: 0px;
	margin-top: -10px;
	margin-right: 10px;

	width: 200px;

	transition: 1s;
}

h1 a {
	content: "";

	position: absolute;

	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;

	text-align: center;

	/*padding-top: 5px;*/

	color: #fff;

	text-decoration: none;

	font: 30px "Fira Sans", sans-serif;

	font-family: 'Michroma', sans-serif;

	transition: 0.5s;
}

h1.anime:hover a {
	color: #000;

	transition: 0.5s;
}

h1::before {
	content: "";

	position: absolute;

	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;

	background:
		repeating-linear-gradient(0.17turn, transparent, transparent 10px, #82af3355 10px, #82af3355 16px),
		linear-gradient(0.25turn, #b8db1d, #8bbd33);
	z-index: -1;

	border-radius: 7px;

	transition: 1s;
}

h1.anime:hover::before {
	right: 100%;

	opacity: 50%;

	transition: 1s;
}

.navigation {
	color: #777;
	padding: 6px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
	margin-right: 10px;

	font: 20px "Fira Sans", sans-serif;

	font-family: 'Michroma', sans-serif;

	text-decoration: none;

	--underline-top: 27px;
}

.navigation::before {
	content: "";

	position: absolute;

	left: var(--start-pos);

	width: 0px;
	height: var(--underline-top);

	border-bottom: solid #8bbd33 2px;

	transition: 0.5s;

	z-index: -1;
}

.navigation:hover::before {

	left: var(--end-pos);

	width: var(--width);

	transition: 0.5s;
}