body {
  margin: auto;
  background: rgb(17,0,78);
  background: linear-gradient(180deg, rgba(17,0,78,1) 0%, rgba(51,0,54,1) 100%);
  overflow: hidden;

}

html {
  scroll-behavior: smooth;
}

#nom {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fleche{
  color: white;
  width: 3%;
  position: absolute;
  bottom: 10px;
  right: 50%;
}

#flechehaut {
  color: rgb(217, 22, 22);
  width: 3%;
  position: absolute;
  top: 10px;
  left: 10px;
  transform: rotate(180deg);
  z-index: 11111111;
}

#portrait {
  width: 80vh;
  z-index: 10000;
}

#container {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;

  justify-content: center;
  align-items: end;
  position: relative;
  overflow: hidden;
  transition-duration: 1s;
}

.logo {
  width: 15vh;
  position: absolute;
  transition-duration: 5s;
}

.logo:hover {
  transform: scale(1.2);
  transition-duration: 1s;
}





#tennis {
  bottom: 40%;
  left: 30%;

}

#illustrator {
  top: 20%;
  right: 7%;

}

#xbox {
  top: 10%;
  left: 30%;
}

#tesla {
  top: 10%;
  right: 30%;
}

#twitch {
  top: 50%;
  right: 30%;
}

#youtube {
  top: 20%;
  left: 5%;
}

#xiaomi {
  top: 23%;
  left: 20%;
}

#samsung {
  top: 5%;
  left: 12%;
  width: 16%;
}

#cuba {
  top: 12%;
  right: 20%;
}

#aftereffect {
  bottom: 10%;
  right: 15%;
}

#premierpro {
  bottom: 7%;
  left: 7%;
  width: 9%;
}

#photoshop {
  bottom: 30%;
  left: 7%;
}

#adobe {
  top: 40%;
  left: 13%;
}

#smartphone {
  top: 40%;
  right: 20%;

}

#pc {
  bottom: 40%;
  right: 10%;
}

#canada {
  top: 5%;
  right: 10%;
}

#grece {
  bottom: 10%;
  left: 90%;
}

#manette {
  bottom: 20%;
  left: 10%;
  width: 30%;
}





     /* Google chrome */
     @-webkit-keyframes svg-text-anim {
      40% {
         stroke-dashoffset: 0;
         fill: transparent;
       }
       60% {
         stroke-dashoffset: 0;
         fill: #f16f6b;
       }
       100% {
         stroke-dashoffset: 0;
         fill: #f16f6b;
       }
       
   }
   /* Most browsers */
   @keyframes svg-text-anim {
      40% {
         stroke-dashoffset: 0;
         fill: transparent;
       }
       60% {
         stroke-dashoffset: 0;
         fill: #f16f6b;
       }
       100% {
         stroke-dashoffset: 0;
         fill: #f16f6b;
       }
       
   }