/* setting */
html {
	font-family: sans-serif;
	cursor: crosshair;
}
body {
	user-select: none;
	color: #1e1e1e;
	background-color: white;
}
.body-hovered {
	background-color: #1e1e1e;
	color: #f2f2f2;
}


/* NAV */
a {
	text-decoration: none;
	color: #1e1e1e;
}
a:hover {
	cursor: url(../media/cursor.png),default;
}
#adjust {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	position: fixed;
	top: 35%;
	right: 4%;
}
button {
	width: 55px;
	font-family: "Lexend", sans-serif;
	font-size: 35px;
	font-weight: 100;
	aspect-ratio: 1/1;
	background-color: #fefefe40;
	border-radius: 0;
	border: none;
	transition: all 0.5s;
	cursor: grabbing;
}
.button-hovered {
	background-color: #1e1e1e;
	color: #f2f2f2;
}
nav {
	z-index: 999;
}
#title {
	position: absolute;
	left:2%;
	top: 10px;
	font-family: "Lexend", sans-serif;
	font-size: 14.5vw;
	font-weight: 100;
	padding: 2px 6px;
	transition: all 0.5s ease-in;
	cursor: grabbing;
}
.title-hovered{
	color: #f2f2f2;
	font-weight: 100;
}
#about {
	position: absolute;
	font-size: 2em;
	font-family: "Lexend", sans-serif;
	font-weight: 100;
	text-align: justify;
	width: fit-content;
	height: fit-content;
	z-index: 100;
	padding: 0 5px;
	width: fit-content;
	top: 35%;
	left: 2%;
	transition: all 0.5s;
}
.about-hovered {
	color: #f2f2f2;
}

/* content */
.space {
	width: 100%;
	padding: 0;
	margin: 30% auto 5%;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-evenly;
	cursor: url(../media/cursor.png),default;
	z-index: 0;
}
.Spot {
	width: 250px;
	align-content: center;
}
.Spot img {
	width: 100%;
}
img {
	image-rendering: pixelated;
}

@media only screen and (max-width: 1000px){
	#about {
		top: 26%;
	}
	#adjust {
		top: 26%;
	}
	.space {
		margin: 50% auto;
		margin-bottom: 15%;
	}
}
@media only screen and (max-width: 700px){
	.space {
		justify-content: space-evenly;
	}
}
@media only screen and (max-width: 600px){
	#title {
		left:2.5%;
	}
	#adjust {
		top: 21%;
		right: 5%;
	}
	#title {
		font-size: 14vw;
	}
	#about {
		width: fit-content;
		top: 21%;
		left: 3%;
		right: none;
		border: none;
	}
	.space {
		margin: 50% auto;
		margin-bottom: 15%;
		justify-content: space-evenly;
	}
}
@media only screen and (max-width: 450px){
	#adjust {
		top: 15%;
	}
	#about {
		top: 13%;
	}
	.space {
		margin: 70% auto;
		margin-bottom: 15%;
		justify-content: space-evenly;
	}
}