#frame-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	height: 100%;
	width: 100%;
	font-family: 'Verdana', sans-serif;
}

#logo-container {
	position: relative;
	width: 100vw;
	height: 40vh;
	margin-top: -1vh
}

#logo-image,
#logo-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain
}

#logo-glow {
    opacity: 0;
	animation: glowFade 5s infinite linear
}

@keyframes glowFade {
	0%   { opacity: 0; }
	5%  { opacity: 1; }
	10% { opacity: 0; }
	100% { opacity: 0; }

}

#menu-wrapper {
	margin-top: 2vh;
	align-items: center;
	justify-content: center;
	width: auto
}

#menu-top,
#menu-bottom {
	position: relative;
	height: 14vh;
	width: 100%;
}

.menu-item {
	position: absolute;
	text-decoration: none;
	color: #FFFFFF;
	transition: color 0.3s;
	background: none;
	padding: 0;
	text-shadow:
		-0.1rem -0.1rem 0 black,
		0.1rem -0.1rem 0 black,
		-0.1rem  0.1rem 0 black,
		0.1rem  0.1rem 0 black
}

.menu-item-disabled {
	position: absolute;
	text-decoration: none;
	color: #999999;
	background: none;
	padding: 0
}

.menu-description {
	position: absolute;
	top: 90%;
	left: 0;
	margin-top: 0;
	font-size: 1.5vmin;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease
}

.menu-item:hover {
	color: #FFCC00; 
	text-shadow: 0 0 1rem #FFCC00;
	transform: scale(1.05)
}

.menu-item:hover .menu-description {
	color: #FFCC00;
	opacity: 1;
	visibility: visible;
	transform: scale(1.05)
}
@media (orientation: portrait) {
  /* Stili per schermo verticale */
	#bioband {
		bottom: 9.8vh;
		left: 15%;
		font-size: max(3.1vmin, 18px)
	}

	#calendario {
		bottom: 8.7vh;
		left: 38.5%;
		font-size: max(4.9vmin, 32px)
	}

	#gallery {
		bottom: 0.8vh; 
		left: 17%;
		font-size: max(6.6vmin, 38px)
	}

	#audio {
		bottom: 2.8vh;
		left: 50.3%;
		font-size: max(4vmin, 24px)
	}

	#video {
		top: 1.5vh;
		left: 20%;
		font-size: max(4vmin, 34px)
	}

	#repertorio {
		top: 1.5vh;
		left: 59.8%;
		font-size: max(4vmin, 28px)
	}

	#contatti {
		top: 7.6vh;
		left: 53.9%;
		font-size: max(3.1vmin, 18px)
	}
}

@media (orientation: landscape) {
  /* Stili per schermo orizzontale */
	#bioband {
		bottom: 9.8vh;
		left: 15%;
		font-size: 3.1vmin
	}

	#calendario {
		bottom: 8.7vh;
		left: 38.5%;
		font-size: 4.9vmin
	}

	#gallery {
		bottom: 0.8vh; 
		left: 17%;
		font-size: 6.6vmin
	}

	#audio {
		bottom: 2.8vh;
		left: 50.3%;
		font-size: 4vmin
	}

	#video {
		top: 1.5vh;
		left: 20%;
		font-size: 4vmin
	}

	#repertorio {
		top: 1.5vh;
		left: 59.8%;
		font-size: 4vmin
	}

	#contatti {
		top: 7.6vh;
		left: 53.9%;
		font-size: 3.1vmin
	}
}

#strip-image {
	height: auto;
	width: 100vmin;
	margin: 1vh 1vh
}

#frame-content {
	position: absolute;
	margin-top: 2vh;
	background-color: rgba(0, 0, 0, 0.75);
}

#urltext {
	font-size: max(3.2vmin, 22px);
	color: #FFCC00;
	text-shadow: 0 0 1vmin #FFCC00;
	background-color: rgba(51,51,51,0.75);
	cursor:default
}

#urlclose {
	position: absolute;
	left: 96%;
	top: 1%;
	font-size: max(1.6vmin, 11px);
	color: #FFCC00
}

#urltext a,
#urlclose a {
	color: #FFFFFF; 
	text-shadow: 0 0 0;
	text-decoration: none
}

#urltext a:hover,
#urlclose a:hover {
	color: #FFCC00;
	text-shadow: 0 0 1vmin #FFCC00
}