@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'AlexBrush-Regular';
    src: url('font/AlexBrush-Regular.ttf');
}

@font-face {
font-family: 'TTF';
    src: url('font/LLPIXEL3.ttf');
}
@font-face{
	font-family: 'TTF2';
	src: url('font/GREEN NATURE.ttf')
}
@font-face{
	font-family: 'TTF3';
	src:url('climate/font/MuseoSans_500.otf')
}
@font-face{
	font-family: 'TTF5';
	src:url('font/Righteous-Regular.ttf')
}

.bill{
	font-family: TTF;
	text-align: center;
	font-size: 30px;
	width: 50%;
	height: 50%;
	
}

#Titre{
	height: auto;
	animation: taille 4s;
	height: inherit;
}

@keyframes taille{
    0%{
		font-size: 20px;
        opacity:0;
    }
	10%{
		
		opacity: 1;
	}
    100%{
		font-size: 100px;
        opacity:1;
    }
}
#content{
	animation: slidedown 2s;
	width: 1200px;
	margin: auto;
	text-align: center;
}

@keyframes slidedown{
    from{
        transform: translateY(100%);
        opacity:0.5;
    }
    to{
        transform: translateY(0px);
        opacity:1;
    }
}

h1{
	text-transform: uppercase;
	font-family: TTF5;
	font-size:100px;
	animation: appear 4s, taille 2s;
}

@keyframes appear {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

header{
	background: transparent;
	text-align: center
}
div{
	text-align: center;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.climate2 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
	font-family: TTF3;
}
@media (min-width:856px) {
	.climate2{
		font-size: 40px;
	}
	#content{
		width: 100%;
	}
}
@media (min-width:200px) {
	.climate2{
		font-size: 30px;
	}
	#content{
		width: 100%;
	}
}
@media (min-width:1200px) {
	.climate2{
		font-size: 50px;
	}
	#content{
		width: 1200px;
	}
}

a{
	text-decoration: none;
	color: white;
}

.climatecopy {
  position: absolute;
  bottom: 8px;
  left: 16px;
	font-family: TTF3;
	font-size: 12px;
	text-align: left;
}