@import url("base.css");


#enter {
	z-index: 99;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 19vw;
	right: -50vw;
	width: 12vw;
	height: 5vw;
	margin: 0;
	padding: 0;

}

#enter>h1 {
	padding: 1.5vw;
	margin: 0;
}

#enter>h1:hover {
	transform: scale(1.2);
	cursor: not-allowed;
}

main {
	height: 100vh;
	justify-content: center;
	align-content: center;
	display: grid;
	padding: 1vw 2vw 3vw 2vw;
	grid-template-columns: 100%;
	grid-template-rows: 10vw 25vw 4vw 8vw;
	grid-template-areas: 'logo'
		'about'
		'buttons'
		'socials';
	max-width: 60%;
	min-width: 60%;

	background-color: var(--main-bg-color);
	box-sizing: border-box;
}

#logo {
	grid-area: logo;
	justify-self: center;
	align-self: center;
	text-align: center;
	text-shadow: 0.25vw 0.25vw 0 var(--main-fg-color);
	font-size: 4vw;
}

#about {
	grid-area: about;
	box-sizing: border-box;
	overflow: hidden;

}

#content {
	padding: 0 1vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	flex-direction: column;
}

#social {
	grid-area: socials;
}





.vivi-img {
	float: left;
	object-fit: cover;
	height: 20vw;
	/* padding: 1vw; */
	margin-left: 0;
}



@media only screen and (max-width: 1100px) {
	body {
		background-size: 16.65vw !important;
	}

	main {
		width: auto;
		height: auto;
	}

	#splash {
		top: auto;
		align-self: center;
		width: 220%;
		height: auto;
	}

	#enter {
		text-shadow: 0 0 1vw var(--main-fg-color);
		margin-top: 5vw;
		font-size: 6vw;
	}

	#enter:hover {
		text-decoration: none;
		font-size: 8vw;
		text-shadow: 0 0 2vw var(--main-fg-color);
	}

	.vivi-img {
		float: none;
		max-width: 40vw;
		min-width: 0vw;
		margin: 1vw 0vw;
		object-fit: contain;
	}

}