@import url('/fonts/google-sans-code.css');
@import url('/fonts/staatliches.css');

html, body{				
	color: #ffffff;				
	height: 100%;
	margin: 0;
	background-color: #e30613;
	font-family: 'Google Sans Code';	
}

a {
	color: #ffffff;				
}

#up {
	height: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

#up img {
	max-height: 100px;
}

#central {	
	position: relative;
	height: 60vh;
	text-transform: uppercase;
	font-size: 60vh;
	line-height: 60vh;		
	white-space: nowrap;
	overflow: hidden;	
	color: #e30613;
	font-family: 'Staatliches';
	text-shadow:
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;

}

#slogan {
	position: absolute;
	font-size: 80vh;
	line-height: 80vh;			
	margin-top: -8vh;
	display: inline-block;
	padding-left: 100%; /* Inizia da fuori destra */
	animation: marquee 25s linear infinite; /* Nome, Durata, Velocità, Loop */
}

@keyframes marquee {
  /*0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* Si sposta a sinistra */
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }  
}

#down {
	height: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;				
}

.email {
	display: block;
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 30px;				
	text-align: center;
	padding-bottom: 20px;
}

.copy {
	display: block;
	font-size: 16px;
	text-align: center;
}

@media all and (max-width: 700px){
	.email {
		font-size: 22px;
	}

	.copy {
		font-size: 14px;
	}	
}

@media all and (min-width: 2000px){
	#up img {
		max-height: 200px;
	}	
	
	.email {
		font-size: 40px;
	}

	.copy {
		font-size: 24px;
	}		
	
	#central {	
		text-shadow:
		-4px -4px 0 white,
		 4px -4px 0 white,
		-4px  4px 0 white,
		 4px  4px 0 white;

	}	
	
}

@media all and (max-height: 420px){
	#up {
		height: 30vh;
		min-height: 108px;
	}
	
	#central {	
		height: 40vh;		
		min-height: 128px;
	}

	#slogan {
		font-size: 50vh;
		line-height: 50vh;			
		margin-top: -4vh;
	}

	#down {
		height: 30vh;
		min-height: 108px;
	}	
	
	.email {
		font-size: 22px;
	}

	.copy {
		font-size: 14px;
	}		
	
}