/* lilex-200italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lilex';
  font-style: italic;
  font-weight: 200;
  src: url('fonts/lilex-v1-latin-200italic.woff2') format('woff2'); 
}

/* lilex-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lilex';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lilex-v1-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lilex-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lilex';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lilex-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{
    font-family: "Lilex";
}

h1 {
  font-family: "Lilex";
  font-style: italic;
  font-weight: 200;
  -webkit-text-stroke: 1px black;
  margin-top: 0px;
  font-size: 32pt;
}
td, th {
  font-family: "Lilex";
  font-style: normal;
  font-weight: 400;
  font-size: 11pt;
}
canvas {
  display: block;
}

#sidebar{
  height:100vh;
  background-color:#FFF;
  width: 400px;
  position:relative;
  
}

#sidebar h1, h2{
  padding:20px;
}

#sidebar h2{
  background-color: #000;
  display: inline;
}
#container{
  display:flex;
  background-color:#99ffdb;
  position: relative;
}

#recherche{
  display:flex;
  height: 90px;
  border-top:1px solid #CCC;
  position:absolute;
  bottom:0;
  width:100%;
  align-items:center;
  justify-content:center;
}

#recherche input{
  padding:4px 12px;
  border-radius:20px;
  border:1px solid #000;
  width: 200px;
}

#bouton_recherche{
  background: #000;
  color:#99ffda ;
  padding: 4px 8px;
  border-radius: 20px;
  border: none;
  margin-left: 12px;
  font-family: "Lilex";
  font-style: normal;
  font-weight: 400;
  font-size: 10pt;
}

.is_ok{
  background:#99ffda;
}

.is_not_ok{
  background:#1f1f1f;
}


table{
  margin-left:20px;  
  width: calc(100% - 40px);
  border-top: 1px solid #000;
  text-align: left;
  margin-top: 30px;
}

#mainDiv{
  max-width: calc(100vw - 400px);
}

#mainDiv img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#legende{
  margin: 20px;
  width: calc(100% - 40px);

}

#sidebar img {
  position: absolute;
  top: 25px;
  left: 280px;
}

#apropos{
  position: absolute;
  top:15vh;
  left: calc(100vw / 2 - 15vw);
  width:30vw;
  height: 60vh;
  background-color: #1f1f1f;
  padding: 30px;
  color: #99ffda;
  font-family: "Lilex";
  transform: rotate(5deg);
  display: none;
}

#apropos.apropos-visible{
  display: block;
}

#apropos button{
  position: absolute;
  right:20px;
  top: 20px;
  background-color: #1f1f1f;
  font-size: 3em;
  color: #FFF;
  border: none;
  cursor: pointer;
}

#apropos button:hover{
  color: #99ffda;
}

#apropos img{
  max-width: 15vw;
  transform: rotate(-5deg);
}

#apropos #bertin{
  text-align: right;
}