*{
  padding: 0;
  margin: 0;
}
body{
  overflow: hidden;
}
a{
  color: white;
  text-decoration: none;
}

/* top */

.svg{
  z-index: 0;
  width: 100%;
  position: absolute;
}
.logo{
  z-index: 1;
top: 47%;
position: absolute;
left: 35%;
}

.couche1{
  z-index: -4;
}

.couche2{
  z-index: -1;
}

.couche1, .couche2 {
position: absolute;
width: 100%;
}


.carre, .barre, .fn, .cm, .year{
  transition: all 2.7s;
}
.titre:hover .carre, .titre:hover .barre {
  moz-box-shadow: 0px 0px 8px 5px #34cdf9;
-webkit-box-shadow: 0px 0px 8px 5px #34cdf9;
-o-box-shadow: 0px 0px 8px 5px #34cdf9;
box-shadow: 0px 0px 8px 5px #34cdf9;

}

.titre:hover .fn, .titre:hover .cm, .titre:hover .year{
  text-shadow: 2px 2px 5px #34CDF9;
}

.spin{
  width: 180%;
  height: 279%;
  position: absolute;
  z-index: -2;
  -webkit-animation: spin 9s linear infinite;
  -moz-animation: spin 9s linear infinite;
  animation: spin 9s linear infinite;
      animation-duration: 9s;
  animation-duration: 9s;
  animation-duration: 43s;
  margin-left: calc(-39% - 150px);
  margin-top: calc(-22% - 150px);
  left: 10%;
  top: -4%;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg);
}}

@keyframes spin { 100% { -webkit-transform: rotate(360deg);
  transform:rotate(360deg); }
}