@font-face {
    font-family: 'bluu';
    src: url('bluunext-bold-webfont.woff2') format('woff2'),
         url('bluunext-bold-webfont.woff') format('woff'),
         url('bluunext-bold.ttf') format('truetype'),
         url('bluunext-bold-webfont.svg#bluu_nextbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bluuI';
    src: url('bluunext-bolditalic-webfont.woff2') format('woff2'),
         url('bluunext-bolditalic-webfont.woff') format('woff'),
         url('bluunext-bolditalic.ttf') format('truetype'),
         url('bluunext-bolditalic-webfont.svg#bluu_nextbold_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'bluu_nexttitling';
    src: url('BluuNext-Titling.ttf') format('truetype'),
        url('bluunext-titling.woff2') format('woff2'),
        url('bluunext-titling.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
    background-color: rgb(0, 0, 0);
}

#titre{
font-family: bluu_nexttitling;
font-size: 80px;
color: slategrey;
text-align: center;
text-decoration: darkseagreen overline solid;
display: block;

}

#sous{
font-family: bluuI;
font-size: 40px;
color: silver;
text-align: center; 

}

h2{
    font-family: bluuI;
    font-size: 30px;
    color: silver;
    text-align: center;
    padding: 50px;

    }

p{
    font-family: bluu;
    font-size: 16px;
    color: darkseagreen;
    width: 200px;
    margin-left: 100px;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    animation: type 8s steps(60, end); 
    height: auto;
    white-space: normal;
    text-align: justify;
}

h2:hover {
	text-decoration: none;
	color: white; 
	text-shadow: white 0 0 15px; 
	text-decoration: none;
}

p:hover{
    text-shadow: ghostwhite 15px 15px 15px;
}

#p10{
    font-family: bluu;
    font-size: 20px;
    color: darkseagreen;
    width: 500px;
    display: inline-block;
    margin-left: 100px; 
    position: relative;
    animation: taille 10s ease-in-out;
    animation-iteration-count: 1;
    padding: 10px;
}

#p10, #p11, #titre, #sous:hover{
    text-decoration: none;
	/*color: transparent; */
	text-shadow: white 0 0 50px; 
	text-decoration: none;   
}

#p11{
    font-family: bluu;
    font-size: 20px;
    color: darkseagreen;
    width: 500px;
    display: inline-block;
    animation: couleur 5s ease-in-out infinite;
    padding: 10px;
    transform: matrix(0.352,-0.8,0.8,0.866,0,0);
    background-color: blanchedalmond;
}

 @keyframes type{ 
   from { 
        width: 0; 
        } 
    to {
        height: 100%;
    }
    }

@keyframes taille{
  0%   {font-size: 12px;}
  50%  {font-size: 60px;}
  100% {font-size: 20px;}
}

@keyframes couleur{
    0% {color: darkseagreen;}
    25% {color: darkslategray;}
    50% {color: darkseagreen;}
    100%{ color: darkslategray;}
}

section {
    display: none;
}
 #section1{
     display: block;
  }

#img2{
    position: fixed;
    align-content: center;
}
#img1{
transform: matrix(1, 2, -1, 1, 80, 80);
width: 500px;
height: 250px;
}

#img3{
    width: 300px;
}

#img6{
    width: 500px;
}