body {
	background-color: var(--light-color);
	padding-top: 10%;
}

#not-found {
	color: var(--associated-color);
	text-align: center;
}

#not-found h1 {
	color: var(--associated-color);
	font-size: 6em;
	text-align: center;
	margin-bottom: 1em;
}

#not-found span {
	color: var(--main-accent-color);
	font-size: 2em;
	padding-right: 0.5em;
	font-weight: bold;
}

#not-found a {
	color: var(--main-text-color);
	font-size: 3em;
	font-style: italic;
}

#not-found a:hover {
	color: var(--main-accent-color);
	text-decoration: underline;
}




/*=== Media ===*/

@media screen and (min-width: 760px) and (max-width: 1300px) {


#not-found h1 {
	font-size: 4em;
}

}


@media screen and (min-width: 400px) and (max-width: 760px) {

body {
	padding: 5%;
}

#not-found h1 {
	font-size: 1.5em;
}


#not-found a {
	font-size: 1.1em;
}

}

@media screen and (min-width: 200px) and  (max-width: 400px){

body {
	padding: 4%;
}

#not-found h1 {
	font-size: 1em;
}


#not-found a {
	font-size: 1em;
}

}