body {
	background-color: black;
	font-family: Arial, sans-serif;
	overflow: hidden;
}
body a {
	color: rgb(96, 192, 255);
	text-decoration: none;
}

.menu {
	position: absolute;
	top: 50%; left: 50%;
	width: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-family: Arial, sans-serif;
}
.menu .title {
	font-weight: bold;
	color: azure;
	font-size: 4vw;
	animation: glow 1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	user-select: none;
}
@keyframes glow {
	from {
		text-shadow: 0 0 0 white;
	}
	to {
		text-shadow: 0 0 8px white;
	}
}
.menu button {
	all: unset;
	color: azure;
	margin-inline: 4%;
	font-size: 2vw;
}
.menu button:hover {
	cursor: pointer;
	text-shadow: 0px 0px 20px white;
}


.window {
	position: absolute;   
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle,rgb(64, 64, 64, 0.96) 0%, rgb(16, 16, 16, 0.96) 100%);
	border-radius: 20px;
	border: #000000 solid 4px;
	visibility: hidden;
	z-index: 2;  
	font-size: 2vh;
	padding: 1vh;
	width: auto;
	max-height: 90vh;
	overflow-y: auto;
	color: azure;
}
.window img {
	margin-inline: auto;
	display: block;
}
.window .close {
	position: absolute;
	color: azure;
	top: 4px;
	right: 8px;
	background: none;
	border: none;
	font-weight: bold;
	font-size: 4vh;
	z-index: 100;
	cursor: pointer;
}
.window .close:hover {
	text-shadow: 0px 0px 20px white;
}


.flexicons {
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	font-size: 3vh;
	justify-content:center;
	text-align:center;
}
.flexicons a {
	color:azure;
	text-decoration:none;
}
.flexicons .icon {
	text-align:center;
	padding-inline: 1vh;
	padding: 1vh;
}
.flexicons .icon img {
	width:6vh;
	height:6vh;
}



@media (pointer:none), (pointer:coarse), (max-width: 600px) {
	.menu {
		width: 90%;
	}
	.menu .title {
		font-size: 8vw;
	}
	.menu button {
		font-size: 4vw;
		margin: 10px;
	}
	#about {
		width: 90%;
	}
}