/*@font-face {
    font-family: Lohengrin; 
    src: url(Lohengrin.ttf); 
  }*/
  html{
    background:black;
    color:white;
    /*font-family: Lohengrin;*/
  }
  html,body{
    margin:0;
    padding:0;
  }
  header{
    border-bottom : 1px solid white;
    padding:0 10px 10px 10px;
    display: grid;
    grid-template-columns: repeat(50, auto);
    grid-template-rows: repeat(2, auto);
    gap: 8px;
  }
  header a{
    text-decoration: none;
  }
  #logo{
    grid-row: 1 / 2;
    grid-column: 1 / 1;
    padding:5px;
    align-self: center;
  }
 #title{
     grid-row: 1 / 1;
     grid-column: 2 / 40;
  }
  #title h1{
    margin-bottom:5px;
  }
  #title p{
    margin: 0 0 10px 0;
  }
  nav{
    grid-row: 2 / 2;
    grid-column: 2 / 40;
  }
  nav ul {
    padding-left:0px;
    display: grid;
    grid-template-columns: repeat(12, auto);
  }
  nav ul li {
    display : inline-block;
  }
  .flex {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
  }
  main{
     padding:20px 5%; 
     margin:auto;
     max-width:800px;
     text-align:center;
  }
  main ul{
    padding:0;
  }
  ul li{
    list-style: none;
  }
  main img{
    width:100%;
  }
  main video{
    width:100%;
  }
  section{
    text-align: center;
  }
  footer{
    text-align: center;
    border-top : 1px solid white;
    padding:10px 10px 0 10px;
    margin-top: auto;

  }
  a{
    color: white;
    font-weight: bold;
  }




  #logo{
    height:70px;
    margin:5px 20px 0 0;
  }
  #visuel{
      width: 90%;
      max-width: 500px;
  }
  .float{
    float:left;
  }
  /*.reverse{
    display: inline-block;
          transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
  }*/