body {
    background-image: url(media/background-garden.png);
    background-repeat: repeat;
    background-position: center;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* nero con trasparenza */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}



#overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-text {
  color: white;
  font-size: 1rem;
  font-family: monospace;
  text-align: center;
  padding: 20px;
}

/*Hovers */
.flowerContainer:hover .flowerLabelContainer {
	display:block;
}

.flowerLabelContainer.positionAbove {
    bottom: calc(100% + 15px);
}

.flowerLabelContainer.positionBelow {
    top: calc(100% + 15px);
}

/* Giardino*/
.flowerContainer{
	position:absolute;
}

#margherita{
	bottom:5%;
	left:25%;
}

#mughetto{
	top:10%;
	right:10%;
}

#rosa{
	top:15%;
	left:10%;
}

#gelsomino{
	top:40%;
	right:20%;
}

#basilico{
	bottom:10%;
	right:18%;
}

#lavanda{
	top:35%;
	left:20%;
}

#giacinto{
	top:50%;
	right:10%;
}

#angelica{
	top:60%;
	left:5%;
}

.flowerImage img{
	width:150px;
}

.flowerLabelContainer{
	position:absolute;
	background-color:#FFF6F4;
	padding:8px 16px;
	border: #eddbc4 2px solid;
	border-radius: 16px;
	display:none;
	width:250px;
	height:auto !important;
	z-index:2;
	transform: translateX(-25%); 
}



/* Ape che vola */

.flier img{
    width:48px;
    position: relative;
}

#bzz {
    background-color:#FFF6F4;
    padding: 8px 16px;
    border-radius: 16px;
    width:128px;
    display:none;
    position:absolute;
    top:-48px;
    left:24px;
	font-size:10px;
	border: 2px #5A384B dashed;
}


.flier:hover #bzz{
    display:block; 
}


.flier > * {
/* Adjust animation duration to change the element’s speed */
    animation: fly 100s linear infinite;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%);
	position: fixed;
	animation-delay: 1s;
	z-index: 5;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {
	
	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh)
	}

	15% {
		transform: translateX(100vw) translateY(-100%)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%)
	}

	40% {
		transform: translateX(-200%) translateY(3vh)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%)
	}

	65% {
		transform: translateX(100vw) translateY(50vh)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%)
	}

	95% {
		transform: translateX(10vw) translateY(100vh)
	}
}/* FINE ape che vola */

.content{
	padding-top:64px;
}

.container {
    background-color: #FFF6F4;
    width:300px;
    height: 300px;
    margin:auto;
    padding: 24px;
    font-family: monospace;
    border: 64px solid transparent;
    border-image: url('media/pizzo.png') round;
    background-clip: padding-box;
    border-image-slice: 15%;
    text-align:left;
    position: relative;
}

#description{
	margin-top:32px;
}

#door-info{
    width:50%;
    text-align:center;
    margin-top:64px;
    transform: rotate(-10deg);
}

.container img {
    position:absolute;
    right:0;
    bottom:-64px;;
}

/* Animazione porta che si apre */
#porta-aperta {
    display:none;
}

#porta:hover #porta-aperta{
    display:block;
}

#porta:hover #porta-chiusa{
    display:none;
}

#porta img{
	width:150px;
}