@viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');
* {
    font-family: 'Chakra Petch', sans-serif;
    
}

body {
    background-color: rgb(0, 0, 0);
    color: rgb(0, 255, 106);
    margin: 0;
    overflow-x: hidden; 
    overflow-y: hidden; 
}


.button {
    cursor: pointer;
    margin-top: 2em;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height : 65px;
    width : 215px;
    font-size: 25px;
    font-weight: bold;
    color: #00ff6a;
    border-color: #00ff6a;
    border-style: solid;
    transition: all 0.5s;
    background-color: black;
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px  #009d41,10px 20px  #005323,15px 30px  #003014,20px 40px #001b0b;
    
}

.button:hover{
    background-color: #00ff6a;
    color: rgb(0, 0, 0);
    box-shadow: 5px 10px #000000;
}
.button i{
    margin-right: 8px;
}
.button2 {
    margin-top: 5em;
    cursor: pointer;
    margin-bottom: 2%;
    height : 30px;
    font-size: 25px;
    border-style: none;
    color: #00ff6a;
    display: block;
    margin-left: auto;
    margin-right: auto;

    width: 430px;
    background-color: none;
}


.github {

    color:rgb(255, 255, 255);
    margin-top: 3vh;
    width:fit-content;
    padding: 0.5em;
    background-color: #00000044;
    border-radius: 15%;

}

h1 {

    font-size:5em;
    margin-top: 2em;
}

a{

    color:rgb(255, 255, 255);
    font-weight: bold;
}

.up {
    color:#ffffff;
}


form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.btn-upload{
    cursor: pointer;
    margin-top: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: solid 3px #00ff6a;
    flex-direction: column;
    height: 90px;
    width: 90px;
    box-shadow: 5px 10px  #009d41,10px 20px  #005323,15px 30px  #003014,20px 40px #001b0b;
    transition: all 0.2s;

}
.btn-upload:hover{
background-color: #00ff6a;
color: #000000;
box-shadow: none;

}

.gw{
    animation: gw 5s infinite;
}

.btn-upload .top i{
 font-size: 32px;
 transition: all 0.5s;
 margin-top: 0px;
}



footer {
    float: none;
    padding-bottom: 100px;
    font-size: 20px;
    text-align: center;
    flex-shrink: 0;
    color:rgb(255, 255, 255);
}




.file {
    margin-top: 1vh;
}





@keyframes git {

    0%{
        
        transform: translateX(50px) translateY(20px)
        
    }

    25%{
        
       
        transform: translateX(-50px)translateY(20px)
    }

    50%{
        
        transform: translateX(50px)translateY(-20px)
    }
    75%{
        
        transform: translateX(-50px)translateY(-20px)
    }
    100%{
        
        transform: translateX(50px)translateY(20px)
    }

}

















.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -25;
    margin: 0;
}
.circles div{
    position: absolute;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: calc(100% + 150px);
   
    animation: animateParent 25s linear infinite;
   
}
.circles li{

  
    
    display:block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #008f3c;
    animation: animateBlur 25s cubic-bezier(.6,.01,.93,.46) infinite,animateRotate 25s linear infinite;

    bottom: 0px;
    filter: blur(0px);
}



.circles div:nth-child(1){
    left: 25%;
    animation-delay: 0s;
}

.circles div:nth-child(1) li{
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles div:nth-child(2){
    left: 10%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles div:nth-child(2) li{
    
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}


.circles div:nth-child(3){
    left: 70%;
    animation-delay: 4s;
}


.circles div:nth-child(3) li{
    
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles div:nth-child(4){
    left: 40%;
    animation-delay: 0s;
    animation-duration: 18s;
}



.circles div:nth-child(4) li{
    
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles div:nth-child(5){
    left: 65%;
    animation-delay: 0s;
}


.circles div:nth-child(5) li{
   
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles div:nth-child(6){
    left: 75%;
    animation-delay: 3s;
}



.circles div:nth-child(6) li{
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}


.circles div:nth-child(7){
    left: 35%;
    animation-delay: 7s;
}


.circles div:nth-child(7) li{
    
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles div:nth-child(8){
    left: 50%;
    animation-delay: 15s;
    animation-duration: 45s;
}



.circles div:nth-child(8) li{
  
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles div:nth-child(9){
    left: 20%;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles div:nth-child(9) li{

    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles div:nth-child(10){
    left: 85%;
    animation-delay: 0s;
    animation-duration: 11s;
}

.circles div:nth-child(10) li{
  
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animateBlur {

    0%{
        filter: blur(0px);
    }
  
    100%{
 
        filter: blur(100px);
    }

}

@keyframes animateRotate {

    0%{
        transform: rotate(0deg);
        opacity: 1;
        border-radius: 0;
       
    }
  
    100%{
        transform: rotate(720deg);
        opacity: 0;
        border-radius: 50%;
        
    }

}






@keyframes animateParent {

    0%{
        transform: translateY(0);
    
    }
  
    100%{
        transform: translateY(-100%);
      
    }

}



@keyframes gw {

    0%{
        color:#00ff6a
    }
    50% {
        color:#ffffff
    }
    100%{
        color:#00ff6a
    }

}


.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }