html{
  height: 100vh;
  width: 100vw;
  --border : 100px;
  --color : white;
  --color2 : black;
}

i{
font-family:  'infinibold';
}

body{
  position: absolute;
  overflow: hidden;
    height: 100vh;
    width: 100vw;
    background: var(--color);
    display: flex;
    align-items: center;
    justify-content: center;
}

main{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
overflow: hidden;
  height: 100%;
  width: 100%;
  mix-blend-mode: multiply;
}

.title{
  left: var(--border);
  top: var(--border);
  height: calc(100% - var(--border)*2);
  width: calc(100% - var(--border)*2);
  position: absolute;
  z-index: 3;
  overflow: hidden;
  box-sizing: border-box;
}

.cercle{
  position: absolute;
  animation-name: showDegrade;
  animation-duration: 0.75s;
  /* animation-timing-function: cubic-bezier(); */
}

.cercleHidden{
  position: absolute;
  animation-name: hideDegrade;
  animation-duration: 0.75s;
  /* animation-timing-function: cubic-bezier(); */
}

.bloc_titre{
  height: calc(var(--border)*1.75);
  width: calc(var(--border)*1.75);
 position: absolute;
 align-items: center;
 justify-content: center;
  display: flex;
  background-color: white;
  color: black;
  z-index: 4;
  border: 1px solid black;
  font-family: 'infiniitalic';


}

 .bloc_titre h1{
position: relative;
   text-align: center;
   display: block;
   height: max-content;
    font-size: 1em;
    line-height: 1.5em;
}

.ligne{
  position: absolute;
  border: 1px solid black;
}

#horizontale{
  height: 100%;
  width: 50%;
    left: 0%;
}

#verticale{
  height: 50%;
  width: 100%;
  top: 0%;
}

ul{
  position: absolute;
}








/* Sur tous types d'écrans orientés verticalement */
@media all and (max-width: 800px){
  html{
    height: 100vh;
    width: 100vw;
    --border : 50px;
    --color : white;
    --color2 : black;
  }

  .bloc_titre{
    height: calc(var(--border)*3.75);
    width: calc(var(--border)*3.75);
  }
}














@keyframes showDegrade {
  from {
  transform: scale(0%);
  }

  to {
    transform: scale(100%);
  }
}


@keyframes hideDegrade {
  from {
  transform: scale(100%);
  }

  to {
    transform: scale(0%);
  }
}