@font-face { font-family: ChillMed; src: url("Fonts/Chillax-Medium.otf"); }
@font-face { font-family: ChillReg; src: url("Fonts/Chillax-Regular.otf" );}
@font-face { font-family: ChillSemi; src: url("Fonts/Chillax-Semibold.otf"); }
@font-face { font-family: ChillLight; src: url("Fonts/Chillax-Light.otf"); }
@font-face { font-family: ChillExt; src: url("Fonts/Chillax-Extralight.otf"); }

body {
    background-color: black;
}

/* NAVAGATION ----------------------------------------------------------------------------------------- */
#navbar{
    width: 100%;
    height: 50px;
    background-color: rgb(0, 0, 0);
}
#nav-projects{
    height: 100%;
    width: 200px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: relative;
    left: 72%;
    
}
#nav-projects:hover{
    background-color: white;
    color: black;
    width: 210px;
    left: left-10px;
      box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}
#nav-about-me{
    height: 100%;
    width: 200px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: relative;
    left: 72%;
    
}
#nav-about-me:hover{
    background-color: white;
    color: black;
    width: 210px;
    left: left-10px;
    box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}
/* MAIN BLOCK ----------------------------------------------------------------------------------------- */
#mainblock{
    width: 100%;
    height: 750px; 
}
#mainblock-title1{
    font-family: ChillLight;
    font-size: 80px;
    color: white;
    text-align: left;   
    position: absolute;
    left: 300px;
    top: 25%;
    animation: IN-ANI 1s ease-in-out ;
  
    
    
   
     transition-duration: .4s;
   
     
 text-shadow: 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232;     
     
}


#mainblock-title2{
    font-family: ChillLight;
    font-size: 80px;
    color: white;
    text-align: right;
    position: absolute;
    right: 300px;
    top: 25%;
    animation: IN-ANI 1s ease-in-out ;


     text-shadow: 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232, 0 0 30px #323232; 
}

#mainblock-cube{
    width: 425px;
    height: 250px;
    position: relative;
    top: 23%;
    left: 35%;
    background-color: transparent;
    animation: CUBE-IN-ANI 1.75s ease-in-out ;
}

#mainblock-start{

    width: 300px;
    height: 50px;
    background-color: black;
    color: white;
    font-family: ChillLight;
    font-size: 20px;
    border: transparent;
    border-radius: 10px;
    position: absolute;
    left: 40%;
    top: 75%;
    transition-duration: .4s;
}

#mainblock-start:hover{
    background-color: white;
    color: black;
    height: 75px;
    box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
}

#mainblock-title3{
     font-family: ChillLight;
    font-size: 80px;
    color: white;
    text-align: left;   
    position: absolute;
    opacity: 0%;
    top: 100%;
    
}

#mainblock-para1{
    font-family: ChillLight;
    font-size: 20px;
    color: white;
    text-align: left;   
    position: absolute;
    opacity: 0%;
    top: 100%;
    
}





@keyframes CUBE-IN-ANI {
       0%{
        top: 10%;
        opacity: 25%;
    }

    100%{
         top: 23%;
        opacity: 100%;
    }
    
}

@keyframes IDLE-ANI {

    25%{

    top: 26%;
    }

    50%{
   top: 25%;
   font-size: 90px;
   left: 280px;
   
    }

    75%{
top: 24%;
    
    }

    100%{
top: 25%;
font-size: 80px;
 left: 280px;
    }
    
}

@keyframes IN-ANI {

    0%{
        top: 20%;
        opacity: 25%;
    }

    100%{
         top: 25%;
        opacity: 100%;
    }
    
}



#mainblock-title1.fade{
    animation: start-ani 2s ease-in-out;
    
}
#mainblock-title2.fade{
   animation: start-ani 2s ease-in-out;
   
}
#mainblock-cube.fade{
    animation: start-ani 2s ease-in-out;
   
}

#mainblock-start.fade{
    animation: start-ani 3s ease-in-out;
   
}

@keyframes start-ani {

    100%{
opacity: 0%;
top: 0px;
    }
    
}

#mainblock-title3.start{
    
 animation: who-start-ani 2s ease-in-out;

}

#mainblock-para1.start{
    
    animation: who-start-ani 2s ease-in-out;
   
    
}

@keyframes who-start-ani {
    0%{
        opacity: 0%;
        top: 100%;

    }
    100%{
        opacity: 100%;
        top: 25%;
        
    }
}


#who-block{
    width: 100%;
    height: 700px;
    position: relative;
    background-color: rgb(0, 0, 0);
}

#who-title{
    color: white;
    font-family: ChillLight;
    font-size: 60px;
    position: absolute;
    left:200px;
    top: 100px;
     text-shadow: 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a;     
}

#who-para{
    color: white;
    font-family: ChillLight;
    font-size: 20px;
    position: absolute;
    left: 200px;
    top: 200px;
    width: 700px;
}

/* PROJECTS ----------------------------------------------------------------------------------------- */

#projects-nav{
    width: 100%;
    height: 50px;
    background-color: rgb(0, 0, 0);
}
#projectnav-home{
    height: 100%;
    width: 200px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: relative;
    left: 72%;
    
}
#projectnav-home:hover{
    background-color: white;
    color: black;
      box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}
#projectnav-about-me{
    height: 100%;
    width: 200px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: relative;
    left: 72%;
    
}
#projectnav-about-me:hover{
    background-color: white;
    color: black;
      box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}

#projects-mainblock{
    width: 100%;
    height: 150px;
    background-color: rgb(0, 0, 0);
      border-radius: 25px;

}

#projects-title{
    color: white;
    font-family: ChillLight;
    font-size: 80px;
    text-align: center;
    position: relative;
    top: 0px;
   animation: PROJECTS-IN-ANI 1s ease-in-out ;
    text-shadow: 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a;     
}

@keyframes PROJECTS-IN-ANI {
      0%{
        top: -15px;
        opacity: 25%;
    }

    100%{
         top: 0px;
        opacity: 100%;
    }
}


#project-cadsection{
    width: 100%;
    height: 400px;
   border-radius: 25px;
    background-color: #000000;
    position: relative;
    top: 10px;
   
   
   
}


#projects-cadsectitle{
     color: white;
    font-family: ChillLight;
    font-size: 50px;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 350px;
    animation: PROJECTS-TITLE-IN-ANI 1s ease-in-out ;
    text-shadow: 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a; 

}


#projects-cad{
    height: 200px;
    width: 300px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: absolute;
    left: 65%;
    top: 100px;  
    animation: PROJECTS-BUTTON-IN 1s ease-in-out ;
}
#projects-cad:hover{
    background-color: white;
    color: black;
   width: 320px;
   
  box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}

#projects-cadpara{
    color: white;
    font-family: ChillLight;
    font-size: 20px;
    position: relative;
    top: 150px;
    left: 225px;
    width: 600px;
    text-align: left;
}

#projects-cadcube{
    width: 150px;
    height: 150px;
    position: relative;
    left: 175px;
    top: -110px;
    animation: cadcube-ani 1s ease-in-out;
}

@keyframes cadcube-ani {
         0%{
        top: -210px;
        opacity: 0%;
    }

    100%{
         top: -110px;
        opacity: 100%;
    }
}

#project-programmingsection{
    width: 100%;
    height: 400px;
   border-radius: 25px;
    background-color: #000000;
    position: relative;
    top: 10px;
 
   
}
#projects-codingsectitle{
     color: white;
    font-family: ChillLight;
    font-size: 50px;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 350px;
    animation: PROJECTS-TITLE-IN-ANI 1.5s ease-in-out ;
    text-shadow: 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a;     
}
#projects-coding{
    height: 200px;
    width: 300px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: absolute;
    left: 65%;
    top: 100px; 
  
    animation: PROJECTS-BUTTON-IN 1.5s ease-in-out ;
}
#projects-coding:hover{
    background-color: white;
    color: black;
    width: 320px;
    
    box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}

#projects-codingpara{
    color: white;
    font-family: ChillLight;
    font-size: 20px;
    position: relative;
    top: 150px;
    left: 225px;
    width: 600px;
    text-align: left;
}

#projects-codecube{
    width: 150px;
    height: 150px;
    position: relative;
    left: 175px;
    top: -80px;
     animation: codecube-ani 1.5s ease-in-out;
}

@keyframes codecube-ani {
         0%{
        top: -180px;
        opacity: 0%;
    }

    100%{
         top: -80px;
        opacity: 100%;
    }
}

#project-printingsection{
  width: 100%;
    height: 400px;
   border-radius: 25px;
    background-color: #000000;
    position: relative;
    top: 10px;
}
#projects-printsectitle{
     color: white;
    font-family: ChillLight;
    font-size: 50px;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 350px;
    animation: PROJECTS-TITLE-IN-ANI 2s ease-in-out ;
    text-shadow: 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a;     
}
#projects-printing{
    height: 200px;
    width: 300px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
   position: absolute;
    left: 65%;
    top: 100px; 
    animation: PROJECTS-BUTTON-IN 2s ease-in-out ;
    
}
#projects-printing:hover{
    background-color: white;
    color: black;
    width: 320px;
   box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
    
}

#projects-printcube{
    width: 150px;
    height: 150px;
    position: relative;
    left: 175px;
    top: 0px;
    animation: printcube-ani 2s ease-in-out;
    
}

@keyframes printcube-ani {
         0%{
        top: -100px;
        opacity: 0%;
    }

    100%{
         top: 0px;
        opacity: 100%;
    }
}

@keyframes PROJECTS-BUTTON-IN {
       0%{
        top: 0px;
        opacity: 0%;
    }

    100%{
         top: 100px;
        opacity: 100%;
    }
}

@keyframes PROJECTS-TITLE-IN-ANI {
      0%{
        top: -15px;
        opacity: 25%;
    }

    100%{
         top: 0px;
        opacity: 100%;
    }
}

/* ABOUT PAGE ----------------------------------------------------------------------------------------- */

#about-nav{
    width: 100%;
    height: 50px;
    background-color: rgb(0, 0, 0);
}
#aboutnav-home{
    height: 100%;
    width: 200px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: relative;
    left: 72%;
    
}
#aboutnav-home:hover{
    background-color: white;
    color: black;
      box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}
#aboutnav-projects{
    height: 100%;
    width: 200px;
    font-family: ChillMed;
    font-size: 25px;
    color: white;
    background-color: black;
    border: 2px solid black;
    border-radius: 15px;
    transition-duration: .4s;
    position: relative;
    left: 72%;
    
}
#aboutnav-projects:hover{
    background-color: white;
    color: black;
      box-shadow: 0 10px 25px 0 rgba(255, 255, 255, 0.2), 0 10px 25px 0 rgba(255, 255, 255, 0.19);
    
}

#about-title{
    font-family: ChillLight;
    font-size: 80px;
    color: white;
    position: absolute;
    left: 35%;
    top: 100px;
    animation: about-in-title 1s ease-in-out;
    text-shadow: 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a, 0 0 30px #3a3a3a;     
}

#about-para{
    font-family: ChillLight;
    font-size: 20px;
    color: white;
    position: absolute;
    left: 25%;
    top: 300px;
    width: 700px;
    text-align: center;

}

@keyframes about-in-title {
      0%{
        top: 0px;
        opacity: 25%;
    }

    100%{
         top: 100px;
        opacity: 100%;
    }
}