/*Naviguation*/
.base-nav{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

}
.base-nav ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50vh, auto);
  margin: 0;
  padding: 0;
  list-style: none;
}
.base-nav ul li{
  background: rgba(255,0,0,.5)
}
.base-nav ul li a{
  display: block;
  height: 100%;
  text-decoration: none;
  color: white;
}
.base-nav ul li a:hover{
  transition: .5s all ease;
  background: rgba(255, 0, 0, 1);
}

#left-nav, #right-nav{
  display: none;
  flex-direction: column;
  flex-grow: 2;
}
a.inside{
  background: green;
  display: block;
  flex-grow: 2;
}
/*Face*/
.container{
  /*display: flex;
  justify-content: center;*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-150px, -200px);
  pointer-events: none; // permet de cliquer sur les liens en dessous (axe z)
}
.overlay{
  overflow: hidden;
  border-radius: 200px 200px 0 0;

}
#face{
  width: 300px;
  height: 400px;
  background: url("img/animationOK.png");
  background-position-x: 0px;
}