@charset "UTF-8";
body{
    background-color: black;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    
}

.titre{
    position: relative;
    z-index: +1;
    left: 4%;
    font-size: 4em;
    font-family: 'DotGothic16', sans-serif;
    text-align: left;
    color: #f1f1f1;
}

.flex-container {
   
    top: 30%;
    z-index: +1;
    display: flex;
    flex-direction: row;

  }
.flex-item-left{
    opacity: 1;
    transition: opacity 0,25s;

}
.flex-item-left:hover{
    opacity: 0.3;
}
  
.flex-item-center{
    opacity: 1;
    transition: opacity 0,25s;

}
.flex-item-center:hover{
    opacity: 0.3;

}
.flex-item-right {
    opacity: 1;
    transition: opacity 0,25s;

}
.flex-item-right:hover {
    opacity: 0.3;

}
.flex-item-ultraright {
    opacity: 1;
    transition: opacity 0,25s;

}
.flex-item-ultraright:hover {
    opacity: 0.3;
}


@media screen and (max-width: 800px) {
    body{
        width: 100vw;
        height: 100vh;
    
    }
    .flex-container {
      top: 30%;
      left: 50;
      flex-direction: column;
      display: flex;
      float: left;
    
    }
    
  }
.flex-container2 {
    top: 200px;
    z-index: +1;
    display: flex;
    flex-direction: row;
}
.flex-item-left2{
    opacity: 1;
    transition: opacity 0,25s;
}
.flex-item-left2:hover{
    opacity: 0.3;
}

.flex-item-center2{
    opacity: 1;
    transition: opacity 0,25s;
}
.flex-item-center2:hover{
    opacity: 0.3;
}
.flex-item-right2 {
    opacity: 1;
    transition: opacity 0,25s;
}
.flex-item-right2:hover {
    opacity: 0.3;
}
  .flex-item-ultraright2 {
    opacity: 1;
    transition: opacity 0,25s;
   
  }
  .flex-item-ultraright2:hover {
    opacity: 0.3;   
  }
  
@media screen and (max-width: 800px) {
    body{
        width: 100vw;
        height: 100vh;
    
    }
    .flex-container2 {
        top: 30%;
        left: 50;
        flex-direction: column;
        display: flex;
        float: left;
        

    }
  }