@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');
/*
888            d8b          888           .d8888b.  
888            Y8P          888          d88P  Y88b 
888                         888               .d88P 
888888 888d888 888 88888b.  888  .d88b.      8888"  
888    888P"   888 888 "88b 888 d8P  Y8b      "Y8b. 
888    888     888 888  888 888 88888888 888    888 
Y88b.  888     888 888 d88P 888 Y8b.     Y88b  d88P 
 "Y888 888     888 88888P"  888  "Y8888   "Y8888P"  
                   888                              
                   888                              
                   888                              
*/


html{
  margin:0;
}
body {
  /overflow:hidden;
    font-family: 'Open Sans', sans-serif;
    //background: radial-gradient(#21202b, #248e77);
    //background-size: 400% 400%;
    width:100vw;
    height:100vh;
    //-webkit-animation: AnimationName 18s ease infinite;
    //-moz-animation: AnimationName 18s ease infinite;
    //animation: AnimationName 18s ease infinite;
    color:#000000;
    margin:0;
}
video {
  /filter:invert(0.2);
  /filter:brightness(25%);
  background-size: cover;
  min-width: 100%; min-height: 100%;
  position:fixed;
  width: auto; height: auto; z-index: 10;
  opacity:0.5;
}
#main {
   margin-top:0;
   margin-left:0;
}
#logo {
  width:200px;
  height:200px;
}
.tribot1 {
  animation: hideshow 7.7s ease;
  opacity:1;
}
.tribot2 {
  animation: hideshow 6.6s ease;
  opacity:1;
}
.trileft1 {
  animation: hideshow 3.3s ease;
  opacity:1;
}
.trileft2 {
  animation: hideshow 2.2s ease;
  opacity:1;
}
.triright1 {
  animation: hideshow 5.5s ease;
  opacity:1;
}
.triright2 {
  animation: hideshow 4.4s ease;
  opacity:1;
}


#content {
    z-index:1000;
    width:100%;
    margin:auto;position:relative;
    text-align:center;
    padding-top:12%;
    opacity:0.9;
}


#content a {
  text-decoration:none;
}
a {
  color:darkblue;
  animation: hideshow 14s ease;
}
#bottom {
  margin-top:1%;
}
h1 {
  cursor:default;
  font-weight:400;
  font-size:4.9em;
  margin:0;
  animation: hideshow 9s ease;
}
h2 {
  cursor:default;
  font-size:1.618em;
  margin:0;
  font-weight:300;
  animation: hideshow 11s ease;
}
h3 {
    cursor:help;
  font-size:1.2em;
  margin:0;
  font-weight:300;
  animation: hideshow 12s ease;
}

#defil > :first-child {
  font-weight:400;
  background: -webkit-linear-gradient(#343434, #454545);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity:0.8;
  font-size:1.1em;
  display: inline-block;                /* modèle de boîte en ligne */
  //padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement 40s infinite linear;
}



@keyframes hideshow {
  0% { opacity: 0; }
  10% { opacity: 0; }
  100% { opacity: 1; }
}