/* defaults */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;

  background-color: red;
  overflow: hidden;

  /* mix-blend-mode: inherit; */
}

@font-face {
  font-family: "microgamma";
  src: url(../fonts/microgamma.woff2) format("woff2"),
    url(../fonts/microgamma.woff) format("woff");

  text-transform: uppercase;
}

::selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

ol,
ul {
  list-style: none;
}

#container {
  overflow: hidden;
}

.bagel {
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  height: 180%;
  z-index: 12;
}

.glowbackground {
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  overflow: hidden;
  outline: 10vh blue;
  outline-offset: -50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 120vw;
  height: 100%;
  border-radius: 50%;
  background-color: blue;
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index: 0;

  animation-name: crushbleu;
  animation-duration: 3s;

  animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

/* @keyframes crushbleu {
  0% {
  
  height: 100%;
  }
  
 
  
  100% {
  
  height: 55vw;
  }
  } */

.glowbackground2 {
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 100vw;
  height: 100%;
  border-radius: 50%;
  background-color: white;
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index: 1;
}

.glow {
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  outline: 10vh blue;
  outline-offset: -50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background-color: white;
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index: 10;
}

.glow2:hover {
  transform: scale(1.3);
}

.rondgris {
  position: absolute;
  /* border: 1px solid red; */
  /* outline: 10vh  blue; */
  transform: translate(-50%, -50%) rotateZ(0deg);
  top: 50%;
  left: 50%;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: blue;
  transition: all 0.2s ease;
  /* opacity: 80%; */
  cursor: pointer;
  z-index: 20;
}

.rondgris:hover {
  background-color: yellow;
}

.wrapper {
  margin: 0%;
  overflow: hidden;
}

#circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height:100vh;
  width: 100vw;
  z-index: 20;
}


#circle text {
  font-family: "microgamma";
  font-size: 20.3px;
  font-weight: bold;
  fill: blue; /*stroke:blue ;stroke-width:0.03em ;*/
  z-index: 20;
}

#circle svg {
  left: 0%;
  top: 0%;
  width: 80%;
  height: auto;

  animation-name: rotate;

  animation-duration: 15s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}

/* .glow2{
  position: absolute;
  top: 40%;
  left: 15%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  border: 7px solid red;
  background-color: white;
  box-shadow:
    0 0 60px 30px #fff,
    0 0 80px 60px white,
    0 0 80px 100px rgb(255, 175, 100)
    ;
 
}






#circle2 { position: absolute; width: 30%;  top: -25.2%;
  left: 27%;
  transform: translate(-50%, -50%) rotateZ(0deg);}

#circle2 text { font-family: 'microgamma'; font-size: 15.5px; font-weight: bold; fill:blue;stroke:rgb(255, 60, 0) ;stroke-width:0.01em }

#circle2 svg { position: absolute; left: -40%; top: 0%; width: 100%; height: 1200px;
  


        animation-name: rotate2;

        animation-duration: 15s;

        animation-iteration-count: infinite;

        animation-timing-function: linear;

}


@keyframes rotate2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}





.glow3{
  position: absolute;
  top: 40%;
  right: 4%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  border: 7px solid red;
  background-color: white;
  box-shadow:
    0 0 60px 30px #fff,
    0 0 80px 60px white,
    0 0 80px 100px rgb(255, 175, 100);

 
}

#glow3 svg:hover {

  transform: scale(2);
  box-shadow: 0 0 80px 100px green;


}





#circle3 { position: absolute; width: 30%;  top: -25.2%;
  right: 27%;
  transform: translate(-50%, -50%) rotateZ(0deg);}

#circle3 text { font-family: 'microgamma'; font-size: 15.5px; font-weight: bold; color:red; }

#circle3 svg { position: absolute; right: -140%; top: 0%; width: 100%; height: 1200px;
  


        animation-name: rotate3;

        animation-duration: 15s;

        animation-iteration-count: infinite;

        animation-timing-function: linear;

}


@keyframes rotate3 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
*/