@font-face {
    font-family: "Futura";
    src: url("font/futura-light-bt.woff") format("woff"),
         url("/font/futura-light-bt.woff2") format("woff2");
  }
h1{

    
    padding-bottom: 30px;
    padding-top: 40px;
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-weight: 600;
    cursor:pointer;
    color: black;
}


h1:hover{
    animation: scaleInv 6s linear;
}

@keyframes scaleInv{
    0%{
        transform : scaleX(1);
    }
    100%{
        transform : scaleX(3);
    }
}

*{ font-family: "Futura", Helvetica, sans-serif;}
ul{list-style: none;
    font-weight: 200;
}

main{
    padding-left: 70%;
background-color:black;
color: white ;
cursor:url("cursor-click.png"), auto;
     
}

.main-index{
    animation : 6s changebackgroundcolor infinite linear;
}

@keyframes changebackgroundcolor{
    10%{
        background-color: whitesmoke;
    }
    30%{
        background-color: darkslateblue;
    }
    45%{
        background-color: darkmagenta;
    }
    60%{
        background-color: darkred;
    }
    90%{
        background-color: darkslategray;
    }
    100%{
        background-color: black;
    }
}

h2{
    text-transform: uppercase;
    color: red;
    font-size: 1.5rem;
    padding-bottom: 10px;
    
}
.row-principal{height: 100vh;
}
h3{
    text-transform: uppercase;
    font-size: 1.05rem;
    font-weight: 600;
    color: #BDCAD1;

}
h4{
    text-transform: uppercase;
    font-size: xx-large;
   padding-bottom: 10px;
    padding-top: 30px;

}
p{padding-top: 50px;

}
iframe{margin-top: 100px;
}
a{
    text-decoration: none;
    color: inherit;
}
a:hover{
    color: inherit;
}

.bio{
    font-size: xx-large;
}

.pluie{
    position: absolute;
    border-right: 1px white solid;
    height: 50px;
    animation : pluie 3s infinite linear alternate;
}

@keyframes pluie{
    0%{
        top:25vh;
    }
    100%{
        top : 100vh;
    }
}

.pluie2{
    position: absolute;
    border-right: 1px white solid;
    height: 50px;
    animation : pluieb 3s infinite linear alternate;
}

@keyframes pluieb{
    0%{
        top:0vh;
    }
    100%{
        top : 75vh;
    }
}

.en-cours-de-creation{
    position: absolute;
    text-align: center;
    font-size: 3.25vw;
    font-weight: 200;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: black;
    animation : pluie_texte 3s infinite linear alternate;
}

@keyframes pluie_texte{
    0%{
        top:5vh;
    }
    100%{
        top : 80vh;
    }
}