:root {
	--text: #ffffff;
	--background: #0d1210;
	--primary-button: #a23125;
	--secondary-button: #ffffff;
	--accent: #a23125;
}

body {
	margin: 0;
	background-color: var(--background);
	font-family: 'Belanosima', sans-serif;
	font-size: 1.5rem;
	color: var(--text);

	text-align: center;
}

.image{
	border: 4px var(--primary-button) solid;
	box-shadow: 5px 5px 0px 0px var(--secondary-button);
}

#logo {
	width: 7%;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 10px;
}

.title {
	font-family: 'Bagel Fat One', cursive;
	color: var(--text);
	font-size: 4rem;
	background-color: var(--accent);
	text-align: center;
	margin: 0;
	width: 100%;
}

#mainPic {
	width: 30%;
}

#main {
	min-height: 100vh;
}

#about {
	min-height: 100vh;
}

#about div {
	display: flex;
	justify-content: left;
	text-align: left;
	flex-wrap: wrap;
	padding: 40px;
}

#about fieldset {
	width: 20%;
	text-align: left;
}

#contact {
	min-height: 100vh;
	position: relative;
}

.neocities{
	width: 50%;
	position: absolute; 
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 10px;
}

@media (max-width: 800px) {
	#about div {
		flex-direction: row;
		justify-content: start;
	}
	#about fieldset {
		width: 100%;
	}
}

.links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.material-symbols-outlined {
	font-size: 32px;
	vertical-align: middle;
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

#about .material-symbols-outlined {
	vertical-align: middle;
	font-size: 64px;
}

a:link {
  color: var(--text);
}

a:visited {
  color: var(--accent);
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}