html, body{
  height: 100%;
  font-size: 1.5em;
  line-height: 1.2em;
  overflow: hidden;
  background: black;
  color: black;
}

h1 {
  color: white;
 }

h2 {
  color: white;
  font-size: 5vw;
  line-height:120% 
}

/* contenu */
#containerDroite,
#containerGauche {
  box-sizing: border-box;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  width: 99vmin;
  height: 99vmin;
  border: 3px solid white;
  overflow: hidden;
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  color: white;
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
}

/*#containerGauche::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
}

#containerDroite::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
}*/

p {
  font-size: 1vw,
}

.liste-pythagoriciens {
  font-size: 4vw;
  line-height: 4vw;
}

#containerDroite img,
#containerGauche img {
  width: 100%;
}

#containerDroite:hover {
  z-index: 1000000000;
}

/* ...... */
#containerGauche {
  left: calc(50% - (80vmin / 4));
  z-index: 50;
  padding-left: 39px;
  padding-right: 39px;
  padding-top: 100px;
  background-color: black; 
}

#containerDroite {
  left: calc(50% + (80vmin / 4));
  z-index: 0;
  background-color: black;
}

/* menu */
#containerMenuDroite,
#containerMenuGauche {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  width: 99vmin;
  height: 99vmin;
  border: 3px solid white;
  overflow: hidden;
  padding-right: 0px;
  padding-left: 0px;
  border-radius: 100%;
  color: white;
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
}

#containerMenuGauche {
  left: calc(50% - (80vmin / 4));
  background-color: white;
}

#containerMenuGauche:hover {
  z-index: 1000000000;
}

#containerMenuDroite {
  left: calc(50% + (80vmin / 4));
}

.menu-rond {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: white;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 1s ease-in-out;
}

.menu-rond-2 {
  width: calc(100% - (1 *(100%/7)));
  height: calc(100% - (1 *(100%/7)));
  background-color: black;
}
.menu-rond-3 {
  width: calc(100% - (2 *(100%/7)));
  height: calc(100% - (2 *(100%/7)));
  background-color: white;
}
.menu-rond-4 {
  width: calc(100% - (3 *(100%/7)));
  height: calc(100% - (3 *(100%/7)));
  background-color: black;
}
.menu-rond-5 {
  width: calc(100% - (4 *(100%/7)));
  height: calc(100% - (4 *(100%/7)));
  background-color: white;
}

.menu-rond-6 {
  width: calc(100% - (5 *(100%/7)));
  height: calc(100% - (5 *(100%/7)));
  background-color: black;
}

.menu-rond-7 {
  width: calc(100% - (6 *(100%/7)));
  height: calc(100% - (6 *(100%/7)));
  background-color: white;
  pointer-events: none;
}
.menu-rond:hover {
  transform: translate3d(-50%, -50%, 0) rotateZ(180deg);
}

.menu-rond svg {
}

#logo-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - (6.5 *(100%/7)));
  height: calc(100% - (6.5 *(100%/7)));
  z-index: 500;
  transform: translate(-50%, -50%)
}

/* Content */
.img-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

#logo {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 60px;
  height: auto;
  z-index: 500;
}

/* Outils */
.stop-scroll {
  overflow: hidden;
}