@font-face { font-family: pixel; src: url("Azonix.ttf"); }



body{
    min-height: 100vh;
    background-color: #222;
    background-image: linear-gradient(to right, #333 1px,
    transparent 1px), linear-gradient(to bottom, #333 1px, 
    transparent 1px);
    background-size: 40px 40px;
}

html{
    scroll-behavior: smooth;
}

#name{
    font-family: pixel;
    color: white;
    position: fixed;
    left: 830px;
    top: 0px;
    
}

#pro{
    font-family: pixel;
    background-color: transparent;
    color: white;
    font-size: 15px;
    border: 1px solid white;
    width: 200px;
    height: 50px;
    border-radius: 15px;
    transition-duration: 0.4s;
}

#pro:hover{
    color: #222;
    border: 1px solid white;
    background-color: white;
}

#CAD{
    font-family: pixel;
    background-color: transparent;
    color: white;
    font-size: 15px;
    border: 1px solid white;
    width: 200px;
    height: 50px;
    border-radius: 15px;
    transition-duration: 0.4s;
}

#CAD:hover{
    color: #222;
    border: 1px solid white;
    background-color: white;
}

#about{
    font-family: pixel;
    background-color: transparent;
    color: white;
    font-size: 15px;
    border: 1px solid white;
    width: 200px;
    height: 50px;
    border-radius: 15px;
    transition-duration: 0.4s;
}

#about:hover{
    color: #222;
    border: 1px solid white;
    background-color: white;
}

#cursor{
    position: fixed;
    width: 25px;
    height: 25px;
   

}

#nav{
    position: absolute;
    left: 615px;
    top: 40px;
    width: 100%;
    height: 50px;
    background-color: transparent;
}

#git{
    width: 50px;
    height: 50px;
    position: absolute;
    left: -550px;
    top: 0px;

    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}

#git:hover{
    transform: translateY(-5px);
}

#hello{
    font-family: pixel;
    color: white;
    font-size: 80px;
    position: absolute;
    opacity: 1;
    left: 700px;
    top: 400px;
    animation: animate 4s ease-in;
}

#message{
    font-family: pixel;
    color: white;
    font-size: 20px;
    position: absolute;
    opacity: 1;
    left: 730px;
    top: 600px;
    animation: animate 4s ease-in;
}

@keyframes animate {
    0%{
        opacity: 0;
    }

    50%{
        opacity: .5;
    }

    100%{
        opacity: 1;
    }
    
}

#intro{
    width: 100%;
    height: 1000px;
    
}
#abouts{
    width: 100%;
    height: 600px;
    position: absolute;
    top: 1000px;
   
}

#aboutpanel{
    background-color: transparent;
    border: 2px solid white;
    width: 1000px;
    height:400px;
    border-radius: 15px;
    position: absolute;
    left: 200px;
    top: 30px;
}

#abouthead{
    position: absolute;
    left: 40px;
    color: white;
    font-family: pixel;
    font-size: 40px;
}

#aboutinfo{
    position: absolute;
    left: 40px;
    top: 80px;
    margin-right: 40px;
    color: white;
    font-family: pixel;
    font-size: 20px;
}

#aboutinfo2{
    position: absolute;
    left: 40px;
    top: 180px;
    margin-right: 40px;
    color: white;
    font-family: pixel;
    font-size: 20px;
}

#toabouts{
    font-family: pixel;
    font-size: 20px;
    color: white;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 300px;
    height: 75px;
    position: absolute;
    top: 460px;
    left: 900px;
    transition-duration: 0.4s;
}

#toabouts:hover{
    color: #222;
    border: 1px solid white;
    background-color: white;
}

#frcimage1{
    width: 300px;
    height: 250px;
    border-radius: 15px;
    position: absolute;
    right: 250px;
    border: 2px solid white;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
    
}

#frcimage1:hover{
    transform: translateY(-10px) translateX(-10px);
    z-index: 1;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
}

#frcimage2{
    width: 300px;
    height: 250px;
    border-radius: 15px;
    position: absolute;
    right: 60px;
    top: 160px;
    border: 2px solid white;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
    
}

#frcimage2:hover{
    transform: translateY(-10px) translateX(-10px);
    z-index: 1;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
}

#frcimage3{
    width: 350px;
    height: 250px;
    border-radius: 15px;
    position: absolute;
    right: 190px;
    top: 300px;
    border: 2px solid white;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
    
}

#frcimage3:hover{
    transform: translateY(-10px) translateX(-10px);
    z-index: 1;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
}

#interests{
    width: 100%;
    height: 1100px;
    position: absolute;
    top: 1600px;
}

#inttitle{
    color: white;
    font-family: pixel;
    font-size: 70px;
    position: absolute;
    left: 700px;
}

#interetspanel1{
background-color: transparent;
border: 2px solid white;
border-radius: 15px;
width: 950px;
height: 200px;
position: absolute;
left: 425px;
top: 200px;
}

#intinfo1{
color: white;
font-family: pixel;
font-size: 20px;
margin-left: 30px;
margin-right: 30px;
}

#intartpanel{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 400px;
    height: 450px;
    position: absolute;
    left: 200px;
    top: 500px;
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}

#intpropanel:hover{
    transform: translateY(-10px)
}
#intarttitle{
    color: white;
    font-family: pixel;
    font-size: 40px;
    position: absolute;
    left: 150px;
}

#intartinfo{
    color: white;
    font-family: pixel;
font-size: 20px;
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
}

#intpropanel{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 400px;
    height: 450px;
    position: absolute;
    left: 725px;
    top: 500px;
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}
#intpropanel:hover{
    transform: translateY(-10px)
}

#intprotitle{
    color: white;
    font-family: pixel;
    font-size: 40px;
    position: absolute;
    left: 40px;
}

#intproinfo{
    color: white;
    font-family: pixel;
font-size: 20px;
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
}

#intmuspanel{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 400px;
    height: 450px;
    position: absolute;
    right: 200px;
    top: 500px;
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}

#intmuspanel:hover{
    transform: translateY(-10px)
}

#intmustitle{
    color: white;
    font-family: pixel; 
    font-size: 40px;
    position: absolute;
    left: 120px;
}

#intmusinfo{
    color: white;
    font-family: pixel;
font-size: 20px;
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
}

#intcadtitle{
    color: white;
    font-family: pixel;
}


#projectss{
    width: 100%;
    height: 1000px;
    position: absolute;
    top: 3000px;
}

#prohead{
    font-family: pixel;
    color: white;
    font-size: 70px;
    position: absolute;
    left: 720px;
    top: 10;
}

#lightning{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 1150px;
    
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
    animation: animation1 4s ease-in-out infinite alternate;
}

@keyframes animation1 {

    0%{

    }
    50%{
        transform: translateY(-15px) translateX(5px);

    }
    100%{
        transform: translateY(15px) translateX(-5px);
    }
    
}

#bulb{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 540px;
  
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
    animation: animation2 4s ease-in-out infinite alternate;
}

@keyframes animation2 {

    0%{

    }
    50%{
        transform: translateY(-15px) translateX(-5px);

    }
    100%{
        transform: translateY(15px) translateX(5px);
    }
    
}

#crown{
    width: 280px;
    height: 160px;
    position: absolute;
    left: 300px;
    top: 850px;
    
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
   
}

#wel{
    font-family: pixel;
    font-size: 20px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 1px solid white;
    border-radius: 5px;
    transition-duration: 0.4s;
    position: fixed;
    top: 540px;
    color: white;
    content: '';
    display: none;
}
#wel:hover{
    width: 100px;
    content: 'welcome';
}


#abou{
    font-family: pixel;
    font-size: 20px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 1px solid white;
    border-radius: 5px;
    transition-duration: 0.4s;
    position: fixed;
    top: 580px;
    color: white;
    content: '';
    display: none;
}
#abou:hover{
    width: 100px;
    content: 'about';
    
}


#proj{
    font-family: pixel;
    font-size: 20px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 1px solid white;
    border-radius: 5px;
    transition-duration: 0.4s;
    position: fixed;
    top: 620px;
    color: white;
    content: '';
    display: none;
}
#proj:hover{
    width: 100px;
    content: 'projects';
}


#programprotitlepan{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 250px;

}

#programprotitle{
    font-family: pixel;
    font-size: 30px;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

#programproinfo{
    font-family: pixel;
    font-size: 15px;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

#cadprotitlepan{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 600px;

}

#cadprotitle{
    font-family: pixel;
    font-size: 30px;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

#cadproinfo{
    font-family: pixel;
    font-size: 15px;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

#cadpro1{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    left: 450px;
    top: 600px;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}

#cadpro1:hover{
    transform: translateY(-15px) 
}

#cadpro2{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    left: 1000px;
    top: 600px;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}
#cadpro2:hover{
    transform: translateY(-15px) 
}

#cadpromore{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 200px;
    height: 300px;
    position: absolute;
    right: 100px;
    top: 600px;
    color: white;
    font-family: pixel;
    font-size: 30px;
    transition-duration: 0.4s;
}

#cadpromore:hover{
    color: #222;
    border: 1px solid white;
    background-color: white;
}

#propro1{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    left: 450px;
    top: 250px;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}

#propro1:hover{
    transform: translateY(-15px) 
}

#propro2{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    left: 1000px;
    top: 250px;

    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;

    transition: transform 0.3s;
}

#propro2:hover{
    transform: translateY(-15px) 
}
#propromore{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 200px;
    height: 300px;
    position: absolute;
    right: 100px;
    top: 250px;
    color: white;
    font-family: pixel;
    font-size: 30px;
    transition-duration: 0.4s;
}

#propromore:hover{
    color: #222;
    border: 1px solid white;
    background-color: white;
}

#propro1title{
    color: white;
    font-family: pixel;
    font-size: 20px;
    position: absolute;
    top: 250px;
    left: 30px;
}

#propro1img{
    width: 475px;
    height: 250px;
    border: 2px solid white;
    border-radius: 15px;
    position: absolute;
    top: 5px;
    left: 10px;
 

}

#propro2title{
    color: white;
    font-family: pixel;
    font-size: 20px;
    position: absolute;
    top: 250px;
    left: 30px;
}

#propro2img{
    width: 475px;
    height: 250px;
    border: 2px solid white;
    border-radius: 15px;
    position: absolute;
    top: 5px;
    left: 10px;
 

}

#cadpro1title{
    color: white;
    font-family: pixel;
    font-size: 20px;
    position: absolute;
    top: 250px;
    left: 30px;
}

#cadpro1img{
    width: 475px;
    height: 250px;
    border: 2px solid white;
    border-radius: 15px;
    position: absolute;
    top: 5px;
    left: 10px;
 

}

#cadpro2title{
    color: white;
    font-family: pixel;
    font-size: 20px;
    position: absolute;
    top: 250px;
    left: 30px;
}

#cadpro2img{
    width: 475px;
    height: 250px;
    border: 2px solid white;
    border-radius: 15px;
    position: absolute;
    top: 5px;
    left: 10px;
 

}




#sata{
    width: 370px;
    height: 250px;
    position: absolute;
    top: -65px;
    right: -40px;
    rotate: 0deg;

    animation: float 6s ease-in-out alternate infinite;
}
@keyframes float {

    0%{

    }
    50%{
        rotate: 20deg;
    }
    100%{
        rotate: -20deg;
    }
    
}

/* PROJECT PAGE ------------------------------------------- */




#allpro{
    width: 100%;
    height: 2100px;
 
}



#proprojectstitle{
    color: white;
    font-family: pixel;
    font-size: 50px;
    position: absolute;
    left: 560px;
    top: 300px;
}

#proproject1{ 
background-color: transparent;
border: 2px solid white;
border-radius: 15px;
width: 500px;
height: 300px;
position: absolute;
top: 500px;
left: 100px;

transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
transition-delay: 0s;

transition: transform 0.3s;
}

#proproject1:hover{
    transform: translateY(-10px);
}

#propro1img{
    width: 450px;
    height: 240px;
    position: absolute;
    left: 25px;
    top: 15px;
    border: 2px solid white;
    border-radius: 15px;
}



#proprojecttitle1{
color: white;
font-family: pixel;
font-size: 20px;
margin-left: 20px;
position: absolute;
top: 250px;

}

#proproject2{ 
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
top: 500px;
left: 675px;
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
transition-delay: 0s;

transition: transform 0.3s;
}

#proproject2:hover{
    transform: translateY(-10px);
}

#propro2img{
    width: 450px;
    height: 240px;
    position: absolute;
    left: 25px;
    top: 15px;
    border: 2px solid white;
    border-radius: 15px;
}


    

    
#proprojecttitle2{
    color: white;
    font-family: pixel;
    font-size: 20px;
    margin-left: 20px;
position: absolute;
top: 250px;
    }
#proproject3{ 
        background-color: transparent;
        border: 2px solid white;
        border-radius: 15px;
        width: 500px;
        height: 300px;
        position: absolute;
top: 500px;
right: 100px;
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
transition-delay: 0s;

transition: transform 0.3s;
}

#proproject3:hover{
    transform: translateY(-10px);
}

#propro3img{
    width: 450px;
    height: 240px;
    position: absolute;
    left: 25px;
    top: 15px;
    border: 2px solid white;
    border-radius: 15px;
}


        
       
#proprojecttitle3{
        color: white;
        font-family: pixel;
        font-size: 20px;
        margin-left: 20px;
position: absolute;
top: 250px;
}

#proproject4{ 
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 850px;
    left: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject4:hover{
        transform: translateY(-10px);
    }

    #propro4img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
#proprojecttitle4{
    color: white;
    font-family: pixel;
    font-size: 20px;
    margin-left: 20px;
position: absolute;
top: 250px;
    
}
    
#proproject5{ 
        background-color: transparent;
        border: 2px solid white;
        border-radius: 15px;
        width: 500px;
        height: 300px;
        position: absolute;
    top: 850px;
    left: 675px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject5:hover{
        transform: translateY(-10px);
    }

    #propro5img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
        
    
        
#proprojecttitle5{
        color: white;
        font-family: pixel;
        font-size: 20px;
        margin-left: 20px;
position: absolute;
top: 250px;
        }
#proproject6{ 
            background-color: transparent;
            border: 2px solid white;
            border-radius: 15px;
            width: 500px;
            height: 300px;
            position: absolute;
            top: 850px;
    right: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject6:hover{
        transform: translateY(-10px);
    }

    #propro6img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
            
           
#proprojecttitle6{
            color: white;
            font-family: pixel;
            font-size: 20px;
            margin-left: 20px;
position: absolute;
top: 250px;
}

#proproject7{ 
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 1200px;
    left: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject7:hover{
        transform: translateY(-10px);
    }

    #propro7img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
    
    
    
#proprojecttitle7{
    color: white;
    font-family: pixel;
    font-size: 20px;
    margin-left: 20px;
position: absolute;
top: 250px;
    
}
    
#proproject8{ 
        background-color: transparent;
        border: 2px solid white;
        border-radius: 15px;
        width: 500px;
        height: 300px;
        position: absolute;
        top: 1200px;
    left: 675px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject8:hover{
        transform: translateY(-10px);
    }

    #propro8img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
        
    
        
#proprojecttitle8{
        color: white;
        font-family: pixel;
        font-size: 20px;
        margin-left: 20px;
position: absolute;
top: 250px;
        }
#proproject9{ 
            background-color: transparent;
            border: 2px solid white;
            border-radius: 15px;
            width: 500px;
            height: 300px;
            position: absolute;
            top: 1200px;
    right: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject9:hover{
        transform: translateY(-10px);
    }

    #propro9img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
            
           
#proprojecttitle9{
            color: white;
            font-family: pixel;
            font-size: 20px;
            margin-left: 20px;
position: absolute;
top: 250px;
}

#proproject10{ 
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
         top: 1550px;
    left: 100px;
    transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
transition-delay: 0s;

transition: transform 0.3s;
}

#propro10img{
    width: 450px;
    height: 240px;
    position: absolute;
    left: 25px;
    top: 15px;
    border: 2px solid white;
    border-radius: 15px;
}

#proproject10:hover{
    transform: translateY(-10px);
}


    
    
    
#proprojecttitle10{
    color: white;
    font-family: pixel;
    font-size: 20px;
    margin-left: 20px;
position: absolute;
top: 250px;
    
}
    
#proproject11{ 
        background-color: transparent;
        border: 2px solid white;
        border-radius: 15px;
        width: 500px;
        height: 300px;
        position: absolute;
        top: 1550px;
    left: 675px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject11:hover{
        transform: translateY(-10px);
    }

    #propro11img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
        
    
        
#proprojecttitle11{
        color: white;
        font-family: pixel;
        font-size: 20px;
        margin-left: 20px;
position: absolute;
top: 250px;
        }
#proproject12{ 
            background-color: transparent;
            border: 2px solid white;
            border-radius: 15px;
            width: 500px;
            height: 300px;
            position: absolute;
            top: 1550px;
    right: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #proproject12:hover{
        transform: translateY(-10px);
    }

    #propro12img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
            
           
#proprojecttitle12{
            color: white;
            font-family: pixel;
            font-size: 20px;
            margin-left: 20px;
position: absolute;
top: 250px;
}

#allcad{
    width: 100%;
    height: 2000px;
    position: absolute;
    top: 2100px;
}

#cadprojectstitle{
    color: white;
    font-family: pixel;
    font-size: 50px;
    position: absolute;
    left: 700px;
    
}

#cadproject1{ 
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 200px;
    left: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #cadproject1:hover{
        transform: translateY(-10px);
    }
    
    #cadpro1img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
    
    
    
    
    
    #cadprojecttitle1{
    color: white;
    font-family: pixel;
    font-size: 20px;
    margin-left: 20px;
position: absolute;
top: 250px;
    
    }
    
    #cadproject2{ 
        background-color: transparent;
        border: 2px solid white;
        border-radius: 15px;
        width: 500px;
        height: 300px;
        position: absolute;
        top: 200px;
    left: 675px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #cadproject2:hover{
        transform: translateY(-10px);
    }
    #cadpro2img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
        
    
        
    #cadprojecttitle2{
        color: white;
        font-family: pixel;
        font-size: 20px;
        margin-left: 20px;
position: absolute;
top: 250px;
        }
    #cadproject3{ 
            background-color: transparent;
            border: 2px solid white;
            border-radius: 15px;
            width: 500px;
            height: 300px;
            position: absolute;
            top: 200px;
    right: 100px;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #cadproject3:hover{
        transform: translateY(-10px);
    }

    #cadpro3img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
            
           
    #cadprojecttitle3{
            color: white;
            font-family: pixel;
            font-size: 20px;
            margin-left: 20px;
position: absolute;
top: 250px;
    }

    #cadproject4{ 
        background-color: transparent;
        border: 2px solid white;
        border-radius: 15px;
        width: 500px;
        height: 300px;
        position: absolute;
        top: 550px;
        left: 100px;
        transition-duration: 0.3s;
        transition-property: transform;
        transition-timing-function: ease;
        transition-delay: 0s;
        
        transition: transform 0.3s;
        }
        
        #cadproject4:hover{
            transform: translateY(-10px);
        }

        #cadpro4img{
            width: 450px;
            height: 240px;
            position: absolute;
            left: 25px;
            top: 15px;
            border: 2px solid white;
            border-radius: 15px;
        }
        
        
        
        #cadprojecttitle4{
        color: white;
        font-family: pixel;
        font-size: 20px;
        margin-left: 20px;
position: absolute;
top: 250px;
        
        }
        
        #cadproject5{ 
            background-color: transparent;
            border: 2px solid white;
            border-radius: 15px;
            width: 500px;
            height: 300px;
            position: absolute;
            top: 550px;
        left: 675px;
        transition-duration: 0.3s;
        transition-property: transform;
        transition-timing-function: ease;
        transition-delay: 0s;
        
        transition: transform 0.3s;
        }
        
        #cadproject5:hover{
            transform: translateY(-10px);
        }

        #cadpro5img{
            width: 450px;
            height: 240px;
            position: absolute;
            left: 25px;
            top: 15px;
            border: 2px solid white;
            border-radius: 15px;
        }
            
        
            
        #cadprojecttitle5{
            color: white;
            font-family: pixel;
            font-size: 20px;
            margin-left: 20px;
position: absolute;
top: 250px;
            }
        #cadproject6{ 
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                width: 500px;
                height: 300px;
                position: absolute;
                top: 550px;
        right: 100px;
        transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: transform 0.3s;
    }
    
    #cadproject6:hover{
        transform: translateY(-10px);
    }

    #cadpro6img{
        width: 450px;
        height: 240px;
        position: absolute;
        left: 25px;
        top: 15px;
        border: 2px solid white;
        border-radius: 15px;
    }
                
               
        #cadprojecttitle6{
                color: white;
                font-family: pixel;
                font-size: 20px;
                margin-left: 20px;
position: absolute;
top: 250px;
        }

        #cadproject7{ 
            background-color: transparent;
            border: 2px solid white;
            border-radius: 15px;
            width: 500px;
            height: 300px;
            position: absolute;
            top: 900px;
            left: 100px;
            transition-duration: 0.3s;
            transition-property: transform;
            transition-timing-function: ease;
            transition-delay: 0s;
            
            transition: transform 0.3s;
            }
            
            #cadproject7:hover{
                transform: translateY(-10px);
            }

            #cadpro7img{
                width: 450px;
                height: 240px;
                position: absolute;
                left: 25px;
                top: 15px;
                border: 2px solid white;
                border-radius: 15px;
            }
            
            
            
            #cadprojecttitle7{
            color: white;
            font-family: pixel;
            font-size: 20px;
            margin-left: 20px;
position: absolute;
top: 250px;
            
            }
            
            #cadproject8{ 
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                width: 500px;
                height: 300px;
                position: absolute;
                top: 900px;
            left: 675px;
            transition-duration: 0.3s;
            transition-property: transform;
            transition-timing-function: ease;
            transition-delay: 0s;
            
            transition: transform 0.3s;
            }
            
            #cadproject8:hover{
                transform: translateY(-10px);
            }

            #cadpro8img{
                width: 450px;
                height: 240px;
                position: absolute;
                left: 25px;
                top: 15px;
                border: 2px solid white;
                border-radius: 15px;
            }
                
            
                
            #cadprojecttitle8{
                color: white;
                font-family: pixel;
                font-size: 20px;
                margin-left: 20px;
position: absolute;
top: 250px;
                }
            #cadproject9{ 
                    background-color: transparent;
                    border: 2px solid white;
                    border-radius: 15px;
                    width: 500px;
                    height: 300px;
                    position: absolute;
                    top: 900px;
            right: 100px;
            transition-duration: 0.3s;
            transition-property: transform;
            transition-timing-function: ease;
            transition-delay: 0s;
            
            transition: transform 0.3s;
            }
            
            #cadproject9:hover{
                transform: translateY(-10px);
            }
            #cadpro9img{
                width: 450px;
                height: 240px;
                position: absolute;
                left: 25px;
                top: 15px;
                border: 2px solid white;
                border-radius: 15px;
            }
                    
                   
            #cadprojecttitle9{
                    color: white;
                    font-family: pixel;
                    font-size: 20px;
                    margin-left: 20px;
position: absolute;
top: 250px;
            }




            /* ABOUT SECTION --------------------------------------------*/

            #aboutme{
                width: 100%;
                height: 800px;
            }

            #coolphotos{
                width: 100%;
                height: 1600px;
                position: absolute;
                top: 1000px;
            }
            #aboutpanel1{
                background-color: transparent;
                border: 2px solid white;
                width: 1000px;
                height:400px;
                border-radius: 15px;
                position: absolute;
                left: 400px;
                top: 300px;
            }
            
            #abouthead1{
                position: absolute;
                left: 40px;
                color: white;
                font-family: pixel;
                font-size: 40px;
            }
            
            #aboutinfo1{
                position: absolute;
                left: 40px;
                top: 80px;
                margin-right: 40px;
                color: white;
                font-family: pixel;
                font-size: 20px;
            }

            #photitle{
                color: white;
                font-family: pixel;
                font-size: 50px;
                position: absolute;
                left: 400px;
            }

            #photo1{
                width: 300px;
                height: 350px;
            }


            #photoimg1{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 100px;
                top: 150px;
            }

            #infoimg1{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 420px;
                left: 100px;
            }

            #photoimg2{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 550px;
                top: 150px;
            }

            #infoimg2{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 420px;
                left: 550px;
            }
            #photoimg3{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                top: 150px;
                right: 550px;
                
            }

            #infoimg3{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 420px;
                right: 550px;
            }
            #photoimg4{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                right: 100px;
                top: 150px;
            }

            #infoimg4{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 420px;
                right: 100px;
            }

            #photoimg5{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 100px;
                top: 500px;
            }

            #infoimg5{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 780px;
                left: 100px;
            }

            #photoimg6{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 550px;
                top: 500px;
            }

            #infoimg6{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 780px;
                left: 550px;
            }
            #photoimg7{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                right: 550px;
                top: 500px;
            }

            #infoimg7{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                right: 550px;
                top: 780px;
            }
            #photoimg8{
                width: 300px;
                height: 275px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                right: 100px;
                top: 500px;
            }

            #infoimg8{
                color: white;
                font-family: pixel;
                font-size: 20px;
                position: absolute;
                top: 780px;
                right: 100px;
            }


            /* INTERESTS -------------------------------------------- */

            #int{
                width: 100%;
                height: 2000px;
            }


            #intitlemain{
                font-family: pixel;
                font-size: 50px;
                color: white;

                position: absolute;
                top: 100px;
                left: 770px;
            }

            #intartmain{
                width: 400px;
                height: 500px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 100px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                }
                
                #intartmain:hover{
                    transform: translateY(-10px);
                }
                  

            #intartmaintitle{
                font-family: pixel;
                color: white;
                font-size: 40px;
                margin-left: 20px;
            }

            #intartmaininfo{
                font-family: pixel;
                color: white;
                font-size: 15px;
                margin-left: 20px;
            }


            #intartex{
                width: 170px;
                height: 210px;
                border: 2px solid white;
                border-radius: 15px;  
                position: absolute;
                left: 110px;
                top: 250px;          
            }

            #intmusmain{
                width: 400px;
                height: 500px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                right: 100px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                }
                
                #intmusmain:hover{
                    transform: translateY(-10px);
                }

            #intmusmaintitle{
                font-family: pixel;
                color: white;
                font-size: 40px;
                margin-left: 20px;
            }

            #intmusmaininfo{
                font-family: pixel;
                color: white;
                font-size: 15px;
                margin-left: 20px;
                margin-right: 20px;
            }

            #intpromain{
                width: 400px;
                height: 500px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 730px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                }
                
                #intpromain:hover{
                    transform: translateY(-10px);
                }

            #intpromaintitle{
                font-family: pixel;
                color: white;
                font-size: 40px;
                margin-left: 20px;
            }

            #intpromaininfo{
                font-family: pixel;
                color: white;
                font-size: 15px;
                margin-left: 20px;
            }

            #intprobut{
                background-color: transparent;
                color: white;
                font-family: pixel;
                font-size: 20px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                bottom: 20px;
                left: 25px;
                width: 350px;
                height: 50px;
                transition-duration: 0.4s;
            }

            #intprobut:hover{
                color: #222;
                border: 1px solid white;
                background-color: white;
            }

            #intcadmain{
                width: 400px;
                height: 500px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 730px;
                top: 900px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                }
                
                #intcadmain:hover{
                    transform: translateY(-10px);
                }

            #intcadmaintitle{
                font-family: pixel;
                color: white;
                font-size: 40px;
                margin-left: 20px;
            }

            #intcadmaininfo{
                font-family: pixel;
                color: white;
                font-size: 15px;
                margin-left: 20px;
            }
            #intcadbut{
                background-color: transparent;
                color: white;
                font-family: pixel;
                font-size: 20px;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                bottom: 20px;
                left: 25px;
                width: 350px;
                height: 50px;
                transition-duration: 0.4s;
            }

            #intcadbut:hover{
                color: #222;
                border: 1px solid white;
                background-color: white;
            }
            #intdevmain{
                width: 400px;
                height: 500px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                left: 100px;
                top: 900px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                }
                
                #intdevmain:hover{
                    transform: translateY(-10px);
                }

            #intdevmaintitle{
                font-family: pixel;
                color: white;
                font-size: 40px;
                margin-left: 20px;
            }

            #intdevmaininfo{
                font-family: pixel;
                color: white;
                font-size: 15px;
                margin-left: 20px;
            }

            #intbikmain{
                width: 400px;
                height: 500px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                position: absolute;
                right: 100px;
                top: 900px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                }
                
                #intbikmain:hover{
                    transform: translateY(-10px);
                }

            #intbikmaintitle{
                font-family: pixel;
                color: white;
                font-size: 40px;
              margin-left: 20px;
            }

            #intbikmaininfo{
                font-family: pixel;
                color: white;
                font-size: 15px;
                margin-left: 20px;
            }

            #intlearnmore{
                width: 400px;
                height: 50px;
                background-color: transparent;
                border: 2px solid white;
                border-radius: 15px;
                font-family: pixel;
                color: white;
                font-size: 20px;
                position: absolute;
                bottom: 50px;
                left: 725px;
                transition-duration: 0.4s;
            }
            #intlearnmore:hover{
                color: #222;
                border: 1px solid white;
                background-color: white;
            }

            #arcade{
                width: 175px;
                height: 200px;
                position: absolute;
                right: 400px;
                top: 240px;
                animation: arcrotate 6s ease-in-out alternate infinite;
            }

            @keyframes arcrotate {

                0%{
                    rotate: 20deg;
                }
                50%{
                    rotate: -40deg;
                    
                }
                100%{
                    rotate: 20deg;
                }
                
            }

            #comp{
                width: 200px;
                height: 150px;
                position: absolute;
                left: 360px;
                top: 280px;

                animation: comprotate 6s ease-in-out alternate infinite;
            }

            @keyframes comprotate {

                0%{
                    rotate: -20deg;
                }
                50%{
                    rotate: 40deg;
                }
                100%{
                    rotate: -20deg;
                }
                
            }

            #square1{
                position: absolute;
                left: 300px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 10s ease-in-out alternate infinite;
            }
            #square2{
                position: absolute;
                right: 350px;
                top: 250px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite;
            }
            #square3{
                position: absolute;
                left: 270px;
                top: 240px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite;
            }
            #square4{
                position: absolute;
                right: 270px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 10s ease-in-out alternate infinite;
            }

            #triangle1{
                position: absolute;
                left: 350px;
                top: 160px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 17s ease-in-out alternate infinite;
            }
            #triangle2{
                position: absolute;
                right: 250px;
                top: 250px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite;
            }
            #triangle3{
                position: absolute;
                left: 200px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 13s ease-in-out alternate infinite;
            }

            #triangle4{
                position: absolute;
                right: 300px;
                top: 350px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 13s ease-in-out alternate infinite;
            }

            #circle1{
                position: absolute;
                left: 180px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 15s ease-in-out alternate infinite;
            }
            #circle2{
                position: absolute;
                right: 350px;
                top: 180px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 15s ease-in-out alternate infinite;
            }
            #circle3{
                position: absolute;
                right: 180px;
                top: 320px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 11s ease-in-out alternate infinite;
            }

            /* INTRO PARTICALS*/

            #squarem1{
                position: absolute;
                right: 270px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 10s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squarem1{
                position: absolute;
                right: 270px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 10s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarem2{
                position: absolute;
                left: 300px;
                top: 400px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 7s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squarem3{
                position: absolute;
                right: 330px;
                top: 600px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 16s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarem4{
                position: absolute;
                left: 150px;
                top: 700px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squarem5{
                position: absolute;
                left: 50px;
                top: 250px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squarem6{
                position: absolute;
                right: 80px;
                top: 700px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 13s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarem7{
                position: absolute;
                right: 700px;
                top: 800px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 15s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarem8{
                position: absolute;
                left: 700px;
                top: 700px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: fade 8s ease-in;
                animation: rotatevar1 8s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarem9{
                position: absolute;
                left: 800px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 11s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarem10{
                position: absolute;
                right: 900px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 15s ease-in-out alternate infinite, fade 4s ease-in;
            }



            #trim1{
                position: absolute;
                left: 300px;
                top: 640px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 13s ease-in-out alternate infinite, fade 4s ease-in;
            }
            
            #trim2{
                position: absolute;
                right: 400px;
                top: 400px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 16s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #trim3{
                position: absolute;
                right: 100px;
                top: 500px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 18s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #trim4{
                position: absolute;
                left: 150px;
                top: 450px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 15s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #trim5{
                position: absolute;
                left: 700px;
                top: 350px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #trim6{
                position: absolute;
                left: 850px;
                top: 850px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #trim7{
                position: absolute;
                right: 700px;
                top: 400px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 19s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm1{
                position: absolute;
                left: 380px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #circm2{
                position: absolute;
                right: 380px;
                top: 250px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 10s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm3{
                position: absolute;
                right: 250px;
                top: 450px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 6s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm4{
                position: absolute;
                left: 250px;
                top: 750px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm4{
                position: absolute;
                left: 250px;
                top: 750px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm5{
                position: absolute;
                left: 550px;
                top: 500px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm6{
                position: absolute;
                right: 550px;
                top: 500px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circm7{
                position: absolute;
                right: 750px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 8s ease-in-out alternate infinite, fade 4s ease-in;
            }


            #squarea1{
                position: absolute;
                left: 110px;
                top: 100px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 6s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarea2{
                position: absolute;
                left: 40px;
                top: 300px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarea3{
                position: absolute;
                right: 20px;
                top: 20px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 6s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circa1{
                position: absolute;
                left: 20px;
                top: 0px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circa2{
                position: absolute;
                right: 80px;
                top: 100px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarep1{
                position: absolute;
            left: 300px;
                top: -70px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 20s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarep2{
                position: absolute;
            right: 400px;
                top: 40px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 19s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarep3{
                position: absolute;
            left: 360px;
                top: 20px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 7s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarep4{
                position: absolute;
            left: 500px;
                top: -70px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarep5{
                position: absolute;
            right: 200px;
                top: 0px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 18s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarep6{
                position: absolute;
            left: 300px;
                top: 100px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #circp1{
                position: absolute;
            right: 300px;
                top: -60px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 16s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circp2{
                position: absolute;
            left: 200px;
                top: -20px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 11s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circp3{
                position: absolute;
            right: 300px;
                top: 100px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 10s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circp4{
                position: absolute;
            left: 440px;
                top: 70px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squaream1{
                position: absolute;
                left: 440px;
                    top: 130px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squaream2{
                position: absolute;
                right: 300px;
                    top: 400px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squaream3{
                position: absolute;
                left: 150px;
                    top: 800px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squaream4{
                position: absolute;
                right: 200px;
                    top: 700px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circam1{
                position: absolute;
                right: 40px;
                    top: 500px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circam2{
                position: absolute;
                left: 200px;
                    top: 500px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circam3{
                position: absolute;
                right: 400px;
                    top: 100px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #circam4{
                position: absolute;
                left: 200px;
                    top: 200px;
                    transition-duration: 0.3s;
                    transition-property: transform;
                    transition-timing-function: ease;
                    transition-delay: 0s;
                    
                    transition: transform 0.3s;
                    animation: rotatevar1 12s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squarei1{
                position: absolute;
            left: 200px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squarei2{
                position: absolute;
            right: 400px;
                top: 100px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarei3{
                position: absolute;
            right: 600px;
                top: 500px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            #squarei4{
                position: absolute;
            left: 600px;
                top: 900px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }

            #squareim1{
                position: absolute;
            left: 200px;
                top: 100px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 6s ease-in-out alternate infinite, fade 4s ease-in;
            }
            
            #squareim2{
                position: absolute;
            right: 200px;
                top: 200px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            
            #squareim3{
                position: absolute;
            left: 650px;
                top: 600px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }
            
            #squareim4{
                position: absolute;
            right: 600px;
                top: 800px;
                transition-duration: 0.3s;
                transition-property: transform;
                transition-timing-function: ease;
                transition-delay: 0s;
                
                transition: transform 0.3s;
                animation: rotatevar1 14s ease-in-out alternate infinite, fade 4s ease-in;
            }



            




            @keyframes rotatevar1 {

                0%{
                    rotate: 20deg;
                }
                50%{
                    rotate: -120deg;
                    transform: translateY(-20px) translateX(-3px);
                }
                100%{
                    rotate: 80deg;
                    transform: translateY(20px) translateX(3px);
                }
                
            }

            #ps3{
                position: absolute;
                right: 550px;
                top: 40px;
                animation: ps3rot 8s ease-in-out alternate infinite;
            }

            @keyframes ps3rot {

                0%{
                    rotate: 20deg;
                }
                50%{
                    rotate: -40deg;
                }
                100%{
                    rotate: 20deg;
                }
                
            }

            @keyframes fade {

                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
                
            }