@charset "UTF-8";

@font-face {
  font-family: "Proxima_bold";

  src: url("fonts/Mark\ Simonson\ -\ Proxima\ Nova\ Alt\ Bold-webfont.ttf");
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  filter: contrast(5);
  overflow-y: hidden;


  /* background-color: #000000; */
}
/* -----------------------etoiles-------------------------- */
div {
  position: absolute;
  background: linear-gradient(to top, #000000 0%, #000000 100%);
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  z-index: -100;
}
span {
  width: 12vmin;
  height: 12vmin;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: blinking 4s ease-in-out infinite both;
  will-change: opacity;
}
span:after {
  display: block;
  content: "*";
}

@keyframes blinking {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

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


#dadi {
  padding: 0;
  margin: 0;
  font-size: 450px !important;
  font-family: "Proxima_bold" !important;
  letter-spacing: 0px !important;
  background: rgba(0, 0, 0, 0);
  color: white;
  line-height: 0.8;
  z-index: 3;
  filter : blur(10px);
  display : none;

}

#do {
  padding: 0;
  margin: 0;
  font-size: 450px !important;
  font-family: "Proxima_bold" !important;
  letter-spacing: 0px !important;
  background: rgba(0, 0, 0, 0);
  color: white;
  line-height: 0.8;
  z-index: 2;
  filter : blur(10px);
  display : none;


}

#meta {
  padding: 0;
  margin: 0;
  font-size: 450px !important;
  font-family: "Proxima_bold" !important;
  letter-spacing: 0px !important;
  background: rgba(0, 0, 0, 0);
  color: white;
  line-height: 0.8;
  z-index: 1;
  filter : blur(10px);
  display : none;
}


/* -------------solar system------------------- */


.skills-top-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20vh;
  height: 20vh;
  border-radius: 50%;
  filter: lighten;
  background: rgb(238, 0, 255);
  /* box-shadow: 0 0 50px#ffffff; */
  filter : blur(10px);
  transition: 0.15s linear;
  z-index: 5;
  animation: blobRadius 10s ease infinite;

}


.skill-orbit1 {
 /* border: 6px solid rgba(255, 255, 255,1); */
  background: rgb(255, 221, 0);
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: none;
  width: 47.5vh;
  height: 47.5vh;
  transition: 0.15s linear;
  z-index:4;
  filter : blur(10px);
  animation : blobRadius 20s ease-in-out infinite;

 
}

.skill-orbit2 {
  /* border: 6px solid rgba(255, 255, 255,1); */
  background: rgb(255, 0, 0);
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: none;
  width: 65vh;
  height: 65vh;
  transition: 0.15s linear;
  z-index: 3;
  filter : blur(10px);
  animation : blobRadius2 20s ease-in-out infinite;


}

.skill-orbit3 {
  /* border: 6px solid rgba(255, 255, 255,1); */
  background: rgb(51, 0, 255);
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: none;
  width: 82.5vh;
  height: 82.5vh;
  transition: 0.15s linear;
  z-index: 2;
  filter : blur(10px);
  animation : blobRadius3 20s ease-in-out infinite;

}

@keyframes blobRadius {
  0%{
    transform: rotate(0deg) translate3d(0, 0, 0);
    border-radius: 45% 72% 61% 59%/57% 75% 65% 73%;

  }
  10% {
    border-radius: 45% 72% 61% 59%/57% 75% 65% 73%;
  }
  20% {
    border-radius: 47% 73% 61% 59%/47% 75% 45% 73%;
  }
  40% {
    border-radius: 46% 74% 74% 46%/74% 58% 62% 46%;
    
  }
  60% {
    border-radius: 47% 73% 61% 59%/40% 40% 80% 80%;
  }
  80% {
    border-radius: 50% 70% 52% 68%/51% 61% 59% 69%;
  }
  100% {
    border-radius: 45% 72% 61% 59%/57% 75% 65% 73%;
    transform: rotate(-360deg) translate3d(0, 0, 0);
  }
}


@keyframes blobRadius2 {
  0%{
    transform: rotate(0deg) translate3d(0, 0, 0);
    border-radius: 47% 73% 61% 59%/47% 75% 45% 73%;

  }
  10% {
    border-radius: 45% 72% 61% 59%/57% 75% 65% 73%;
  }
  20% {
    border-radius: 45% 72% 61% 59%/57% 75% 65% 73%;
   
  }
  40% {
    border-radius: 46% 74% 74% 46%/74% 58% 62% 46%;

  }
  60% {
    border-radius: 50% 70% 52% 68%/51% 61% 59% 69%;

  }
  80% {
    border-radius: 47% 73% 61% 59%/40% 40% 80% 80%;
  }
  100% {
    border-radius: 47% 73% 61% 59%/47% 75% 45% 73%;
    transform: rotate(360deg) translate3d(0, 0, 0);

  }
}

@keyframes blobRadius3 {
  0%{
    transform: rotate(0deg) translate3d(0, 0, 0);
    border-radius: 50% 70% 52% 68%/51% 61% 59% 69%;

  }
  10% {
    border-radius: 47% 73% 61% 59%/47% 75% 45% 73%;

  }
  20% {
   
    border-radius: 46% 74% 74% 46%/74% 58% 62% 46%;  

   
  }
  40% {

    border-radius: 46% 74% 74% 46%/74% 58% 62% 46%;
  }
  60% {
    border-radius: 45% 72% 61% 59%/57% 75% 65% 73%;

  }
  80% {
    border-radius: 47% 73% 61% 59%/40% 40% 80% 80%;
  }
  100% {
    border-radius: 50% 70% 52% 68%/51% 61% 59% 69%;
    transform: rotate(-360deg) translate3d(0, 0, 0);

  }
}

@media only screen and (max-height: 1000px) {

#meta {


    padding: 0;
    margin: 0;
    font-size: 380px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(10px);
   
  }

  #dadi {


    padding: 0;
    margin: 0;
    font-size: 380px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(10px);
   
  }

  #do {


    padding: 0;
    margin: 0;
    font-size: 380px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(10px);
   
  }

}

@media only screen and (max-width: 960px) {

  #meta {


    padding: 0;
    margin: 0;
    font-size: 200px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(10px);
   
  }

  #dadi {


    padding: 0;
    margin: 0;
    font-size: 200px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(10px);
   
  }

  #do {


    padding: 0;
    margin: 0;
    font-size: 200px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(10px);
   
  }

  .skills-top-circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15vh;
    height: 15vh;
    border-radius: 50%;
    filter: lighten;
    background: rgb(238, 0, 255);
    /* box-shadow: 0 0 50px#ffffff; */
    filter : blur(10px);
    transition: 0.15s linear;
    z-index: 5;
    animation: blobRadius 10s ease infinite;
  
  }
  
  
  .skill-orbit1 {
   /* border: 6px solid rgba(255, 255, 255,1); */
    background: rgb(255, 221, 0);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: none;
    width: 37.5vh;
    height: 37.5vh;
    transition: 0.15s linear;
    z-index:4;
    filter : blur(10px);
    animation : blobRadius 20s ease-in-out infinite;
  
   
  }
  
  .skill-orbit2 {
    /* border: 6px solid rgba(255, 255, 255,1); */
    background: rgb(255, 0, 0);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: none;
    width: 50vh;
    height: 50vh;
    transition: 0.15s linear;
    z-index: 3;
    filter : blur(10px);
    animation : blobRadius2 20s ease-in-out infinite;
  
  
  }
  
    .skill-orbit3 {
      /* border: 6px solid rgba(255, 255, 255,1); */
      background: rgb(51, 0, 255);
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: none;
      width: 65.5vh;
      height: 65.5vh;
      transition: 0.15s linear;
      z-index: 2;
      filter : blur(10px);
      animation : blobRadius3 20s ease-in-out infinite;
    
    }
    
    }
    



@media only screen and (max-width: 600px) {

 
  #meta {


    padding: 1px;
    margin: 0;
    font-size: 105px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(3px);
    display: none;
  }

  #dadi {


    padding-left: 1px;
    margin: 0;
    font-size: 105px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(3px);
    margin-top:60%;
    display: none;


   
  }

  #do {
    padding-left: 1px;
    margin: 0;
    margin-top:122%;
    font-size: 105px !important;
    font-family: "Proxima_bold" !important;
    letter-spacing: 0px !important;
    background: rgba(0, 0, 0, 0);
    color: white;
    line-height: 0.8;
    z-index: 1;
    filter : blur(3px);
    display: none;

   
  }

  .skills-top-circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    filter: lighten;
    background: rgb(238, 0, 255);
    /* box-shadow: 0 0 50px#ffffff; */
    filter : blur(10px);
    transition: 0.15s linear;
    z-index: 5;
    animation: blobRadius 10s ease infinite;
  
  }
  
  
  .skill-orbit1 {
   /* border: 6px solid rgba(255, 255, 255,1); */
    background: rgb(255, 221, 0);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: none;
    width: 22.5vh;
    height: 22.5vh;
    transition: 0.15s linear;
    z-index:4;
    filter : blur(10px);
    animation : blobRadius 20s ease-in-out infinite;
  
   
  }
  
  .skill-orbit2 {
    /* border: 6px solid rgba(255, 255, 255,1); */
    background: rgb(255, 0, 0);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: none;
    width: 30vh;
    height: 30vh;
    transition: 0.15s linear;
    z-index: 3;
    filter : blur(10px);
    animation : blobRadius2 20s ease-in-out infinite;
  
  
  }
  
    .skill-orbit3 {
      /* border: 6px solid rgba(255, 255, 255,1); */
      background: rgb(51, 0, 255);
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: none;
      width: 40.5vh;
      height: 40.5vh;
      transition: 0.15s linear;
      z-index: 2;
      filter : blur(10px);
      animation : blobRadius3 20s ease-in-out infinite;
    
    }
    
    }
    
    @media only screen and (max-width: 500px) {

 /* div br {
  display:none;

 } */
      #meta {
    
    
        padding: 10px;
        margin: 0;
        font-size: 20px !important;
        font-family: "Proxima_bold" !important;
        letter-spacing: 0px !important;
        background: rgba(0, 0, 0, 0);
        color: white;
        line-height: 0.8;
        z-index: 1;
        filter : blur(1px);
        display: none;
      }
    
      #dadi {
        padding: 10px;
        padding-left: 35vh;
        margin: 0;
        font-size: 20px !important;
        font-family: "Proxima_bold" !important;
        letter-spacing: 0px !important;
        background: rgba(0, 0, 0, 0);
        color: white;
        line-height: 0.8;
        z-index: 1;
        filter : blur(1px);
        /* margin-top:80%; */
        display: none;
    
    
       
      }
    
      #do {
        padding: 10px;

        padding-left: 19vh;
        margin: 0;
        /* margin-top:150%; */
        font-size: 20px !important;
        font-family: "Proxima_bold" !important;
        letter-spacing: 0px !important;
        background: rgba(0, 0, 0, 0);
        color: white;
        line-height: 0.8;
        z-index: 1;
        filter : blur(1px);
        display: none;
    
       
      }
    
      .skills-top-circle {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 10vh;
        height: 10vh;
        border-radius: 50%;
        filter: lighten;
        background: rgb(238, 0, 255);
        /* box-shadow: 0 0 50px#ffffff; */
        filter : blur(10px);
        transition: 0.15s linear;
        z-index: 5;
        animation: blobRadius 10s ease infinite;
      
      }
      
      
      .skill-orbit1 {
       /* border: 6px solid rgba(255, 255, 255,1); */
        background: rgb(255, 221, 0);
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: none;
        width: 22.5vh;
        height: 22.5vh;
        transition: 0.15s linear;
        z-index:4;
        filter : blur(10px);
        animation : blobRadius 20s ease-in-out infinite;
      
       
      }
      
      .skill-orbit2 {
        /* border: 6px solid rgba(255, 255, 255,1); */
        background: rgb(255, 0, 0);
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: none;
        width: 30vh;
        height: 30vh;
        transition: 0.15s linear;
        z-index: 3;
        filter : blur(10px);
        animation : blobRadius2 20s ease-in-out infinite;
      
      
      }
      
        .skill-orbit3 {
          /* border: 6px solid rgba(255, 255, 255,1); */
          background: rgb(51, 0, 255);
          border-radius: 100%;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: none;
          width: 40.5vh;
          height: 40.5vh;
          transition: 0.15s linear;
          z-index: 2;
          filter : blur(10px);
          animation : blobRadius3 20s ease-in-out infinite;
        
        }
        
        }
        
    
        @media only screen and (min-width: 1700px) {

          #dadi {
            padding: 0;
            margin: 0;
            font-size: 600px !important;
            font-family: "Proxima_bold" !important;
            letter-spacing: 0px !important;
            background: rgba(0, 0, 0, 0);
            color: white;
            line-height: 0.8;
            z-index: 3;
            filter : blur(10px);
            display : none;
          
          }
          
          #do {
            padding: 0;
            margin: 0;
            font-size: 600px !important;
            font-family: "Proxima_bold" !important;
            letter-spacing: 0px !important;
            background: rgba(0, 0, 0, 0);
            color: white;
            line-height: 0.8;
            z-index: 2;
            filter : blur(10px);
            display : none;
          
          
          }
          
          #meta {
            padding: 0;
            margin: 0;
            font-size: 600px !important;
            font-family: "Proxima_bold" !important;
            letter-spacing: 0px !important;
            background: rgba(0, 0, 0, 0);
            color: white;
            line-height: 0.8;
            z-index: 1;
            filter : blur(10px);
            display : none;
          }
          
      }