* {
    box-sizing: border-box;

}

body{
    margin: 0;

}

.road{
    width: 1000px;
    height: 1000px;
    position: absolute;
    top: 100px;
    left: 100px;

}

.car2{
    width: 200px;
    height: 90px;
    transform: scaleX(-1);
    position: absolute;
    left: 400px;
    top: 900px;

}

.car1{
    position: absolute;
    left: 600px;
    top: 980px;
}

@keyframes way1{
    0%{
        left: 600px;
        top: 980px;
    }

    
    12%{
        left: 840px;
        top: 980px; 
        transform: rotate(0deg);
    }

    14%{
        left: 900px;
        top: 960px; 
        transform: rotate(-25deg);
    }
    
    16%{
        left: 940px;
        top: 900px; 
        transform: rotate(-60deg);

    }

    18%{
        left: 940px;
        top: 850px; 
        transform: rotate(-90deg);

    }

    40%{
        left: 940px;
        top: 300px; 
        transform: rotate(-90deg);  

    }

    41%{
        left: 940px;
        top: 200px; 
        transform: rotate(-90deg);  
    }

    42%{
        left: 920px;
        top: 190px; 
        transform: rotate(-110deg);
    }

    43%{
        left: 910px;
        top: 180px; 
        transform: rotate(-130deg);

    }

    44% {
        left: 880px;
        top: 160px; 
        transform: rotate(-150deg);

    }

    45%{
        left: 820px;
        top: 145px; 
        transform: rotate(-180deg);
    }

    60%{
        left: 300px;
        top: 145px; 
        transform: rotate(-180deg); 

    }

    62%{
        left: 250px;
        top: 145px; 
        transform: rotate(-190deg); 
    }

    63%{
        left: 210px;
        top: 150px; 
        transform: rotate(-200deg); 

    }

    64%{
    
        left: 190px;
        top: 165px; 
        transform: rotate(-210deg); 

    }


    65%{
        left: 170px;
        top: 175px; 
        transform: rotate(-220deg); 

    }

    66% {
        left: 150px;
        top: 190px; 
        transform: rotate(-240deg); 
    }

    67%{
        left: 130px;
        top: 210px; 
        transform: rotate(-260deg); 
    }

    68%{
        left: 110px;
        top: 260px; 
        transform: rotate(-270deg); 
    }

    83%{
        left: 110px;
        top: 850px; 
        transform: rotate(-270deg);  
    }

    84%{
        left: 120px;
        top: 890px; 
        transform: rotate(-280deg); 
    }

    85%{
        left: 140px;
        top: 910px; 
        transform: rotate(-290deg); 

    }
    
    86%{
        left: 160px;
        top: 930px; 
        transform: rotate(-300deg); 

    }

    87%{
        left: 180px;
        top: 950px; 
        transform: rotate(-320deg); 

    }

    88%{
        left: 190px;
        top: 960px; 
        transform: rotate(-340deg); 
    }

    89%{
        left: 200px;
        top: 970px; 
        transform: rotate(-350deg); 

    }

    90%{
        left: 210px;
        top: 980px; 
        transform: rotate(-360deg);  
    }

    
    100%{
        left: 600px;
        top: 980px;
        transform: rotate(-360deg);
    }


}

/* .car3{
    position: absolute;
    left: 840px;
        top: 980px; 

} */


.car1{
    animation-name: way1;
    animation-duration: 6s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
}

@keyframes way2{
    0%{
    
        left: 400px;
        top: 900px;

    }

    5%{
        left: 780px;
        top: 900px;

    }

    6%{
        left: 790px;
        top: 890px;
        transform: scaleX(-1) rotate(10deg);

    }

    7%{
        left: 800px;
        top: 880px;
        transform: scaleX(-1) rotate(20deg);
    }

    8%{
        left: 810px;
        top: 870px;
        transform: scaleX(-1) rotate(40deg);  

    }
    9%{
        left: 820px;
        top: 850px;
        transform: scaleX(-1) rotate(70deg);   

    }

    10%{
        left: 840px;
        top: 820px;
        transform: scaleX(-1) rotate(90deg);  

    }

    15%{
        left: 840px;
        top: 300px;
        transform: scaleX(-1) rotate(90deg);
    }

    16%{
        left: 830px;
        top: 290px;
        transform: scaleX(-1) rotate(100deg);
    }

    17%{
        left: 825px;
        top: 280px;
        transform: scaleX(-1) rotate(110deg);
    }

    18%{
        left: 830px;
        top: 250px;
        transform: scaleX(-1) rotate(130deg);
    }
    
    19%{
        left: 810px;
        top: 230px;
        transform: scaleX(-1) rotate(150deg);

    }

    20%{
        left: 790px;
        top: 210px;
        transform: scaleX(-1) rotate(170deg);
    }

    21%{
        left: 770px;
        top: 210px;
        transform: scaleX(-1) rotate(180deg);

    }

    26%{
        left: 270px;
        top: 210px;
        transform: scaleX(-1) rotate(180deg);
    }

    27%{
        left: 260px;
        top: 220px;
        transform: scaleX(-1) rotate(190deg);
    }

    28%{
        left: 250px;
        top: 220px;
        transform: scaleX(-1) rotate(200deg);
    }

    29%{
        left: 220px;
        top: 230px;
        transform: scaleX(-1) rotate(220deg);
    }
    30%{
        left: 200px;
        top: 240px;
        transform: scaleX(-1) rotate(240deg);
    }

    31%{
        left: 180px;
        top: 260px;
        transform: scaleX(-1) rotate(260deg);
    }
    
    32%{
        left: 165px;
        top: 290px;
        transform: scaleX(-1) rotate(270deg);
    }

    37%{
        left: 165px;
        top: 800px;
        transform: scaleX(-1) rotate(270deg);  
    }

    38%{
        left: 170px;
        top: 820px;
        transform: scaleX(-1) rotate(290deg);
    }

    39%{
        left: 180px;
        top: 840px;
        transform: scaleX(-1) rotate(310deg);
    }

    40%{
        left: 190px;
        top: 860px;
        transform: scaleX(-1) rotate(330deg);
    }

    41%{
        left: 210px;
        top: 880px;
        transform: scaleX(-1) rotate(350deg);
    }

    42%{
        left: 230px;
        top: 900px;
        transform: scaleX(-1) rotate(360deg);
    }

    47%{
        left: 780px;
        top: 900px; 
        transform: scaleX(-1) rotate(360deg);
    }
    
    48%{
        left: 790px;
        top: 890px;
        transform: scaleX(-1) rotate(370deg);

    }

    49%{
        left: 800px;
        top: 880px;
        transform: scaleX(-1) rotate(380deg);
    }

    50%{
        left: 810px;
        top: 870px;
        transform: scaleX(-1) rotate(390deg);  

    }
    51%{
        left: 820px;
        top: 850px;
        transform: scaleX(-1) rotate(440deg);   

    }

    52%{
        left: 840px;
        top: 820px;
        transform: scaleX(-1) rotate(450deg);  
    }

    57%{
        left: 840px;
        top: 300px;
        transform: scaleX(-1) rotate(450deg);
    }

    58%{
        left: 830px;
        top: 290px;
        transform: scaleX(-1) rotate(460deg);
    }

    59%{
        left: 825px;
        top: 280px;
        transform: scaleX(-1) rotate(470deg);
    }

    60%{
        left: 830px;
        top: 250px;
        transform: scaleX(-1) rotate(490deg);
    }
    
    61%{
        left: 810px;
        top: 230px;
        transform: scaleX(-1) rotate(510deg);

    }

    62%{
        left: 790px;
        top: 210px;
        transform: scaleX(-1) rotate(520deg);
    }

    63%{
        left: 770px;
        top: 210px;
        transform: scaleX(-1) rotate(540deg);
    }

    64%{
        left: 750px;
        top: 180px;
        transform: scaleX(-1) rotate(550deg);
    }

    65%{
        left: 730px;
        top: 160px;
        transform: scaleX(-1) rotate(570deg);
    }
    66%{
        left: 710px;
    top: 130px;
    transform: scaleX(-1) rotate(590deg);
    }

    70%{
        left: 690px;
        top: 150px;
        transform: scaleX(-1) rotate(670deg);
    }

    71%{
        left: 640px;
        top: 190px;
        transform: scaleX(-1) rotate(730deg);

    }

    72%{
        left: 590px;
        top: 230px;
        transform: scaleX(-1) rotate(770deg);
    }

    73%{
        left: 560px;
        top: 260px;
        transform: scaleX(-1) rotate(790deg);   
    }

    74%{
        left: 520px;
        top: 300px;
        transform: scaleX(-1) rotate(810deg); 
    }

    75%{
        left: 500px;
        top: 320px;
        transform: scaleX(-1) rotate(830deg); 
    }

    76%{
        left: 470px;
        top: 330px;
        transform: scaleX(-1) rotate(850deg);       
    }   

    77%{
        left: 440px;
        top: 350px;
        transform: scaleX(-1) rotate(870deg);
    }

    78%{
        left: 410px;
        top: 360px;
        transform: scaleX(-1) rotate(890deg);
    }

    79%{
        left: 370px;
        top: 380px;
        transform: scaleX(-1) rotate(920deg);

    }


    100%{
        left: 370px;
        top: 380px;
        transform: scaleX(-1) rotate(920deg);   
    }

}



/* .car4{
    position: absolute;
    width: 200px;
    height: 90px;
    transform: scaleX(-1);
    left: 710px;
    top: 130px;
    transform: scaleX(-1) rotate(590deg);

} */

.car2{
    animation-name: way2;
    animation-duration: 14s;
    animation-delay: 4.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}

a{
    margin: 2rem;
    color: rgb(146, 182, 17);
    opacity: 0.3;
    transition: 0.5s;
    font-size: 3rem;
}

a:hover{
    transition: 0.3s;
    opacity: 1;
    transform: scaleX(1.2);
}