*,
*::after,
*::before {
	box-sizing: border-box;
}
:root{
	--neutral-800: #000000;
}
body {
	margin: 0;
	--neutral-800: #000000;
}


#app {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: absolute;
	bottom: 10%;
	left: 0;
	z-index: 0;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
}
canvas {
	width: 100%;
	height: 100%;
}
.globe-container {
	width: 100%;
	height: 60vh; /* Adjust the height as needed */
	overflow: hidden;
	position: absolute;
	left: 0%;
	scale: 1.2;
}
@media only screen and (max-width: 600px){
	.globe-container {
		width: 100%;
		height: auto; /* Adjust the height as needed */
		overflow: hidden;
		position: absolute;
		top:30%;
		left: 0%;
		scale: 1.2;
	}
}

.globe {
	width: 100%; 
	height: 100%; 
	object-fit: cover;
	scale: 1.4;
    transform: translate(0%, 14%);
}