/* CSS Document */

body {
	font-family: 'Raleway', sans-serif;
	background: #1f1f1f;
	color: #fff;
}

a {
	color: #fff;
	text-decoration: none;
}

header {
	width: 100%;
	padding: 20px 20%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu {
	list-style-type: none;
	display: flex;
	gap: 5%;
}

.logo {
	font-weight: 600;
	opacity: 0;
	animation: slideRight 1s ease forwards;
	font-size: 1.5rem;
}

header a:hover {
    color: #f39;
}

/*animazione logo*/
@keyframes slideRight {
	0%{
		opacity:0;
		transform: translateX(-100%); /*fuori dallo schermo*/
	}
	
	100% {
		opacity: 1;
		transform: translateX(0); /*dentro lo schermo*/
	}
}

.navbar a {
	display: inline-block; /*è un elemento inline, che non accetta animazioni */
	opacity: 0;
	animation: slideTop .5s ease forwards;
	animation-delay: calc(.2s*var(--i)); /*delay aumenta a cascata, perché moltiplichiamo per il numero assegnato alla variabile */
}

/*animazione menu*/
@keyframes slideTop {
	0% {
		opacity: 0;	
		transform: translateY(-100px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
	
}

.hero {
	padding: 10px 20% 0;
	width: 100%;
	height: calc(100vh - 90px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	/*border: 1px solid #fff; */
}
.hero-content , .hero-img {
	width: 50%;
}
img {
	width: 80%;
   /* padding-left: 50px;*/
	/*max-width: 500px; */
	opacity:0;
	animation: zoomImg 1s ease forwards;
	animation-delay: 2.5s;
}
.hero-img {
	text-align: right;
}
.hero-content h1 {
	animation: slideRight 1s ease forwards;
	delay: 1.5s;
	opacity: 0;
    font-size: 2.5rem;
	
}
.hero-content h3 {
	animation: slideAlto 1s ease forwards;
	delay: 1.7s;
    font-size: 2.2rem;
}
#element {
    color: #f39;
}
.hero-content {
    margin-bottom: 80px;
}
.hero-content p {
    line-height: 1.3;
    font-size: 1.1rem;
}

.hero-content button {
    color: #f39;
    background: none;
    /*border-radius: 10px;*/
    padding:  15px;
    margin-top: 10px;
    border: none;
    border: 2px solid #f39;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.hero-content button:hover {
    transform: scale(1.1) translateZ(20px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


.hero-content p, .hero-content button {
	animation: slideLeft 1s ease forwards;
	delay: 1.9s;
	opacity: 0;
}

/*animazione hero content p*/

@keyframes slideLeft {
	0%{
		opacity:0;
		transform: translateX(100%); /*fuori dallo schermo*/
	}
	
	100% {
		opacity: 1;
		transform: translateX(0); /*dentro lo schermo*/
	}
}


/* animazione h3 */ 
@keyframes slideAlto {
	0% {
		opacity: 0;	
		transform: translateY(100px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
	
/*animazione immagine */
@keyframes zoomImg {
	0%{
		opacity:0;
		transform: scale(0);
	}
	100%{
		opacity:1;
		transform: scale(1);
	}
}