@import url("nullstyle.css");
/* @import url("animation.css");
@import url("smile-animation.css"); */

@import url(https://fonts.googleapis.com/css?family=Epilogue:regular,800,900&display=swap);

body{
    font-family: "Epilogue", sans-serif;
    font-size: 16px;
    line-height: 200%; /* 32/16 */
    font-weight: 400;
    background: #fff;
    color: #000;
}
main{
    position: relative;
    overflow: hidden;
}
[class*="__container"]{
    max-width: 1170px;
    padding-inline: 20px;
    box-sizing: content-box;
    margin: 0 auto;
}
h2{
    white-space: nowrap;
    overflow: hidden;    
    padding-block: 20px;
    position: absolute;
    top: 0;
    left: 1%;
    right: 1%;
    width: 98%;
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    z-index: 10;
}
h2 span{
    display: inline-block;
}
.header{
    top: 0;
    position: absolute;
    inset-inline: 0;
    background: #fff;
    padding-block: 10px;
    z-index: 99;
}
.header__container{
    position: relative;
}
.logo{
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
}
.logo img{
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;    
}
.header__title{
    width: 100%;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    font-weight: 900;
}
footer{
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    text-align: center;
    color: #fff;
}

.canvas{
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: -99;
}
.canvas img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    
}




/* driver */
.main__person{
    position: absolute;
    right: -9%;
    /* right: 20%; */
    bottom: 20%;
    width: 16%;
    aspect-ratio: 1 / 1;
    z-index: 5;
}
.driver{
    width: 100%;
    height: 100%;
    
}
.driver__body{
    position: absolute;
    top: 29%;
    left: 45%;
    width: 60%;
    /* aspect-ratio: 1;
    background-color: #029a08;
    border-radius: 83% 17% 46% 54% / 42% 17% 83% 58%;
    transform: rotate(-45deg) translate(-25%, -25%); */
}

/* arm */

.arm,
.arm__wrist,
.arm__finger,
.arm__first,
.leg,
.leg__shin{
    aspect-ratio: 1;
    background-color: #029a08;
    border-radius: 93% 7% 71% 29% / 68% 7% 93% 32%;
    transform: rotate(-45deg) translate(-25%, -25%);
}
.arm::before,
.arm__wrist::before,
.arm__finger::before,
.arm__first::before,
.leg::before,
.leg__shin::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 93% 7% 71% 29% / 68% 7% 93% 32%;
    background: radial-gradient(circle at bottom right, transparent 0%, transparent 50%, #000 100%);
    opacity: 0.4;
}
.arm::after,
.arm__wrist::after,
.arm__finger::after,
.arm__first::after,
.leg::after,
.leg__shin::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 93% 7% 71% 29% / 68% 7% 93% 32%;
    background: radial-gradient(circle at top left, transparent 0%, transparent 70%, #000 100%);
    /* background: linear-gradient(to right top, #000 0%, transparent 15%, transparent 100%); */
    opacity: .5;
}

.arm{
    position: absolute;
    left: 87%;
    top: -22%;
    width: 38%;
    aspect-ratio: 1;
    transform-origin: left bottom;
    /* transform: rotate(-123deg); */
    transform: rotate(-169deg);
    z-index: 1;
}
.arm__wrist{
    position: absolute;
    left: 82%;
    top: -14%;
    width: 75%;
    aspect-ratio: 1;
    transform: rotate(53deg);
}
.arm__first{
    position: absolute;
    width: 40%;
    height: 35%;
    left: 76%;
    top: -9%;
    transform: rotate(96deg);
}
.arm__finger{
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    width: 15%;
    aspect-ratio: 1;
    left: 97%;
    top: -19%;
    transform: rotate(-177deg);
}
.arm__finger:nth-of-type(2){
    left: 103%;
    top: 21%;
    transform: rotate(-44deg);
}
.arm__finger:nth-of-type(3){
    left: 104%;
    top: 2%;
    transform: rotate(-165deg);
}
.arm__finger:nth-of-type(4){
    left: 100%;
    top: -8%;
    transform: rotate(-176deg);
}
.arm__finger:nth-of-type(5){
    left: 164%;
    top: 6%;
    transform: rotate(-192deg);
}
/* leg */
.leg{
    position: absolute;
    left: 40%;
    top: 30%;
    width: 38%;
    height: 38%;
    transform-origin: left bottom;
    transform: rotate(-180deg);
    z-index: 1;
    background: linear-gradient(to right top,#f75c2e 44%, #029a08 45%);
}
.leg:hover{
    /* transform: rotate(-360deg); */
}
.leg__shin{
    position: absolute;
    left: 76%;
    top: -48%;
    width: 75%;
    aspect-ratio: 1;
    transform-origin:  10% 60%;
    transform: rotate(-9deg);
}
.leg__foot{
    position: absolute;
    left: 154%;
    top: -20%;
    width: 60%;
    aspect-ratio: 1;
    background-color: #000;
    border-radius: 93% 7% 71% 29% / 68% 7% 93% 32%;
    transform-origin: left bottom;
    transform: rotate(-95deg);
}
.leg__foot::before{
    content: '';
    position: absolute;
    left: -5%;
    top: 50%;
    width: 26%;
    aspect-ratio: 4 / 1;
    background-color: #fff;
    border-radius: 50%;
    transform: rotate(-80deg);
}
.leg__foot::after{
    content: '';
    position: absolute;
    left: 63%;
    top: -1%;
    width: 53%;
    height: 62%;
    background-color: #000;
    border-radius: 20%;
    transform: rotate(-37deg);
}


/* hed */

.head__face,
.driver__body::before,
.driver__body,
.driver__body::after,
.head::before,
.head,
.head::after{
    aspect-ratio: 1;
    background-color: #029a08;
    border-radius: 83% 17% 46% 54% / 42% 17% 83% 58%;
}
.head{
    position: absolute;
    top: -38%;
    left: 82%;
    width: 54%;
    /* overflow: hidden; */
}
.head__face{
    position: absolute;
    inset: 0;
    background-color: transparent;
}
.driver__body{
    transform: rotate(-45deg);
    background: linear-gradient(to top right, #f75c2e 0%, #f75c2e 36%, #029a08 37%, #029a08 100%);
}


.driver__body::before,
.head::before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom right, #000 0%, #000 15%, transparent 100%);
    opacity: 0.4;
}
/* .driver__body::before{
    background: radial-gradient(circle at bottom right, #000 0%, #000 15%, transparent 100%), line-height (to top right, #f75c2e 0%, #f75c2e 36%, #029a08 37%, #029a08 100%);
} */
.driver__body::after,
.head::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right top, #000 0%, #000 18%, transparent 50%, transparent 100%);
    opacity: .5;
}
.head__eye{
    position: absolute;
    left: 56%;
    top: 5%;
    height: 10%;
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    background-color: #fff;
    transform: rotate(-1deg);
}
.head__pupil{
    position: absolute;
    left: 0;
    top: 0;
    height: 80%;
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    background-color: #000;
    transform: rotate(-1deg);

}
.head__pupil::after{
    content: '';
    position: absolute;
    left: 46%;
    top: 6%;
    height: 42%;
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    background-color: #fff;
    transform: rotate(24deg);
}
.head__cap{
    position: absolute;
    top: -16%;
    left: 90%;
    width: 9%;
    aspect-ratio: 1 / 5;
    background-color: blue;
    border-radius: 50%;
    transform: rotate(-45deg);
}
.head__cap::before{
    content: '';
    position: absolute;
    top: 10%;
    left: -50%;
    width: 80%;
    aspect-ratio: 1 / 5;
    background-color: #000;
    background: linear-gradient(to left, #000 0%, #333 85%, #555 100%);
    border-radius: 20%;
}
.head__cap::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to left, #000 0%, transparent 100%);
    opacity: .3;
}
.head__badge{
    position: absolute;
    left: -22%;
    top: 6%;
    width: 69%;
    aspect-ratio: 2 / 1;
    background-color: yellow;
    border-radius: 50%;
    transform: rotate(-26deg);
}

.head__nose::before,
.head__nose{
    border-radius: 100% 0% 60% 40% / 71% 76% 24% 29%;
}
.head__nose{
    position: absolute;
    top: -7%;
    left: 29%;
    width: 20%;
    aspect-ratio: 1;
    background-color: #029a08;
    transform: rotate(45deg);
    overflow: hidden;
}
.head__nose::before{
    content: '';
    position: absolute;
    top: 0%;
    left: -15%;
    width: 129%;
    height: 200%;
    background: radial-gradient(circle at bottom left, #000 0%, #000 15%, transparent 100%);
    opacity: 0.4;
}
.head__mouth{
    position: absolute;
    left: 10%;
    top: 10%;
    width: 50%;
    height: 50%;
    overflow: hidden;
}
.head__mouth::after{
    content: '';
    position: absolute;
    left: 10%;
    top: -37%;
    width: 100%;
    height: 100%;
    border-bottom: 3px solid #000;
    border-radius: 50%;
}

.head__ear{
    position: absolute;
    left: 57%;
    top: 43%;
    width: 30%;
    height: 30%;
    overflow: hidden;
    transform: rotate(-45deg);
}
.head__ear::after{
    content: '';
    position: absolute;
    left: 10%;
    top: -37%;
    width: 100%;
    height: 100%;
    border-bottom: 3px solid #000;
    border-radius: 50%;
}


/* Tractor */
.main__tractor-first{
    position: absolute;
    left: 36%;
    top: 50%;
    width: 40%;
}
/* Second tractor */
.main__tractor-second .head__nose,
.main__tractor-second .arm,
.main__tractor-second .arm__wrist,
.main__tractor-second .arm__finger,
.main__tractor-second .arm__first,
.main__tractor-second .leg,
.main__tractor-second .leg__shin,
.main__tractor-second .driver__body,
.main__tractor-second .head{
    background-color: yellow;
}
.main__tractor-second{
    position: absolute;
    left: 4%;
    top: 63%;
    width: 12%;
    transform: rotateY(180deg);
    z-index: -1;
}
.main__tractor-second .tractor__wing::before,
.main__tractor-second .tractor__body,
.main__tractor-second .tractor__roof{
    background: green;
}
.main__tractor-second .wheel::before{
    width: 124%;
}
.main__tractor-second .wheel.wheel--rear::before{
    width: 115%;
}
.main__tractor-second .tractor__cabine::before {
    bottom: -90%;
}


.main__tractor-third .head__nose,
.main__tractor-third .arm,
.main__tractor-third .arm__wrist,
.main__tractor-third .arm__finger,
.main__tractor-third .arm__first,
.main__tractor-third .leg,
.main__tractor-third .leg__shin,
.main__tractor-third .driver__body,
.main__tractor-third .head{
    background-color: #f75c2e;
}
.main__tractor-third{
    position: absolute;
    right: 10%;
    top: 56%;
    width: 7%;
    z-index: -2;

}
.main__tractor-third .tractor__wing::before,
.main__tractor-third .tractor__body,
.main__tractor-third .tractor__roof{
    background: yellow;
}


.main__tractor-third .wheel::before{
    width: 175%;
}
.main__tractor-third .wheel.wheel--rear::before{
    width: 141%;
}
.main__tractor-third .tractor__cabine::before {
    bottom: -102%;
}



/* Tractor */
.tractor{
    position: relative;
    aspect-ratio: 350/120;
    background-color: transparent;
}
.tractor__body{
    position: absolute;
    left: 0;
    top: 0;    
    width: 87.4%; /* 437/500 */
    height: 80%;
    background: #f75c2e;
    border-top-left-radius: 63%;
    border-bottom-left-radius: 30%;
    margin: 0 auto;
    transform: skew(34deg,0);
    clip-path: polygon(0 0, 60.9% 0, 52.3% 43%, 91% 43%, 83% 100%, 0% 100%);
    overflow: hidden;
}
.tractor__body.tractor__body--dark{
    background: linear-gradient(#222 0, transparent 52%);
    opacity: .4;
}
.tractor__kapot{
    position: absolute;
    top: -0.581395%;
    left: 14%;
    width: 44%;
    height: 28%;
    overflow: hidden;
    transform: skewX(-32deg);
    border-right: 3px solid;
    overflow: hidden;
}
.tractor__kapot::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    inset-block: 0;
    border-bottom: 3px solid #000;
    border-left: 3px solid #000;
    border-radius: 5px;
    transform: skewX(30deg);
}
.tractor__kapot span{
    position: absolute;
    right: -15%;
    bottom: 0%;
    width: 67%;
    height: 51%;
    background: #000;
    transform: skew(-68deg, 0deg);
    border-top-left-radius: 50%;
}
.tractor__kapot span::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #000;
    transform: skewX(-36deg);
}
/* Fara */
.tractor__fara{
    position: absolute;
    top: 38%; /* 73/171 */
    left: 1.8%; /* 9/500 */
    height: 17.54386%; /* 30/171 */
    aspect-ratio: 1 / 2;
    transform: rotate(-23deg);
    background: black;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /* background: linear-gradient(to left, #777, white); */
    background: linear-gradient(to left, yellow, white);
    box-shadow: 1px 1px 1px #555;
}
.tractor__radiator{
    position: absolute;
    left: 9.5%; /* 76/800 */
    bottom: 42.105263%; /* 72/171 */
    width: 6%;
    height: 22%;
    transform: rotate(90deg);
    font-size: 0;
    line-height: 0;
}
.tractor__radiator span{
    display: inline-block;
    width: 54%;
    height: 4%; /* 3/150 */
    background-color: #000;
    border-radius: 2px;
}
.tractor__radiator span:not(:last-of-type){
    margin-bottom: 13%;
}
/* cabine */
.tractor__rear-window{
    position: absolute;
    top: -65%;
    right: 14.5%;
    /* right: -35%; */
    width: 20%;
    height: 98%;
    clip-path: polygon(0% 0%, 78% 0%, 87% 100%, 0 100%);
}
.tractor__rear-window::before{
    content: '';
    position: absolute;
    inset: 0;
    background: #c5e3ee; 
    opacity: .4;   
}
.tractor__rear-window span{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 4%;
    height: 100%;
    background-color: #444;
}
.tractor__rear-window span:nth-child(2){
    top: 0%;
    left: 78%;
    width: 4%;
    height: 100%;
    transform: rotate(-3deg);
}
.tractor__rear-window span:nth-child(3){
    top: 0%;
    left: 0%;
    width: 75%;
    height: 2%;
}
.tractor__door{
    position: absolute;
    top: -65%;
    right: 35.6%;
    /* right: 120%; */
    width: 20%;
    height: 98%;
    /* transform-style: preserve-3d; */
    perspective: 1000px;
    z-index: 2;
}
.door{
    position: absolute;
    overflow: hidden;
    inset-inline: 0;
    inset-block: 0;
    /* opacity: .4; */
    clip-path: polygon(0% 68%, 31% 0%, 100% 0%, 100% 57%, 83% 64%, 77% 70%, 71% 75%, 68% 79%, 64% 87%, 61% 100%, 0 100%);
    z-index: 1;
    /* transform: rotate3d(-8, 23, 3, -48deg) translateY(12px); */
    /* transition: 1s; */
}
.door::before{
    content: '';
    position: absolute;
    inset: 0;
    background: #c5e3ee; 
    opacity: .4;   
}
.door span{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4%;
    height: 31%;
    background-color: #444;
}
.tractor__rear-window span::after,
.door span::after{
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block: 0;
    background: linear-gradient(to right, #555 0%, #000 100%);
    opacity: .2;
}
.door span:nth-child(1){
    top: 69%;
    left: 0%;
    width: 4%;
    height: 31%;
}
.door span:nth-child(2){
    top: -2%;
    left: 15%;
    width: 4%;
    height: 75%;
    transform: rotate(15.1deg);
}
.door span:nth-child(3){
    top: 98%;
    left: 3%;
    width: 56%;
    height: 2%;
}
.door span:nth-child(4){
    top: 0%;
    left: 32%;
    width: 67%;
    height: 2%;
}
.door span:nth-child(5){
    top: 0%;
    left: 96%;
    width: 4%;
    height: 57%;
}
.door::after{
    content: '';
    position: absolute;
    right: -121%;
    bottom: -115px;
    width: 163%;
    aspect-ratio: 1;
    border-radius: 53%;
    border: 7px solid #444;
}
.tractor__cabine{
    /* display: none; */
    position: absolute;
    top: -70%; /* -122/171 */
    right: 15.4%; /* 77/500 */
    width: 41%;
    height: 105%;
    overflow: hidden;
    border-bottom: 8px solid #000;
}
.tractor__cabine::before{
    content: '';
    position: absolute;
    inset: 0;
    background: #c5e3ee;
    opacity: .4;
    clip-path: polygon(16% 0%, 95% 0%, 100% 75%, 50% 100%, 0% 101%, 0% 69%);
}
.tractor__cabine::after{
    /* content: ''; */
    position: absolute;
    top: 4%;
    left: 16%;
    width: 78%;
    height: 100%;
    opacity: .4;
    z-index: -1;
    transform: perspective(43px) rotateX(1deg);
    background-color: #c5e3ee;
}
.tractor__salon{
    display: none;
    position: absolute;
    width: 100%;
    height: 31%;
    bottom: 0;
    left: 0;
    background: #c5e3ee;
    border-top: 5px solid #000;
    z-index: -2;
}

.tractor__cabine span{
    /* display: none; */
    position: absolute;
    left: 50%;
    top: 0%;
    width: 7%;
    height: 100%;
    background-color: #000;
}
.tractor__cabine span:nth-of-type(1){
    left: 5%;
    height: 93%;
    transform: rotate(15deg);
    width: 3.5%;
    top: -1%;
}
.tractor__cabine span:nth-of-type(2){
    left: 90%;
    transform: rotate(-3deg);
    height: 55%;
}
.tractor__cabine span:nth-of-type(3){
    display: none;
    left: 52%;
    top: -43%;
    width: 7%;
    height: 93%;
    transform: rotate(-90deg);
}
.tractor__cabine span:nth-of-type(4){
    left: -5%;
    top: 71%;
}
.tractor__cabine span:nth-of-type(5){
    display: none;
    left: 44%;
    top: 22%;
    width: 1.4%;
    transform: rotate(-90deg);}
.tractor__cabine span:nth-of-type(6){
    width: 3.5%;
}
.tractor__cabine span:nth-of-type(6)~span{
    /* z-index: -2; */
}
.tractor__cabine span:nth-of-type(7){
    left: 81%;
    transform: rotate(-3deg);
}
.tractor__cabine span:nth-of-type(8){
    left: 40%;
}
.tractor__torpeda{
    /* display: none; */
    position: absolute;
    left: -10.152284%;
    top: 69.976744%;
    width: 21%;
    height: 19%;
    background-color: #000;
    border-top-right-radius: 33%;
    border-bottom-right-radius: 33%;
    transform: rotate(-23deg);
    /* z-index: -2; */
}
.tractor__torpeda div{
    position: absolute;
    top: 34.545455%; /* 19/55 */
    left: 98.039216%; /* 50/51 */
    width: 33.333333%; /* 17/51 */
    height: 16.363636%; /* 9/55 */
    background-color: #000;
}
.tractor__torpeda .tractor__drive{
    border-radius: 50%;
    top: 28%;
    left: 86%;
    width: 71%;
    height: 29%;
    transform: rotate(92deg);
    background: #000;
}
/* driver */
.tractor__person{
    position: absolute;
    left: -16%;
    top: 62%;
    width: 69%;
    transform: rotate(9deg);
    z-index: 1;
}
.tractor__person .head{
    left: 71%;
    top: -46%;
    transform: rotate(-18deg);
}
.tractor__person .arm{
    transform: rotate(-160deg);    
}
.tractor__person .arm__wrist{
    transform: rotate(108deg);    
}
.tractor__person .leg{
    transform: rotate(-85deg);
}
.tractor__person .leg__shin{
    /* left: 76%;
    top: -19%;
    width: 75%;
    aspect-ratio: 1;
    transform-origin: 10% 60%; */
    transform: rotate(-92deg);
}

.tractor__roof{
    /* display: none; */
    position: absolute;
    top: -75%; /* -133/192 */
    left: 49%; /* 244/197 */
    width: 35%;
    height: 10%;
    background-color: #f75c2e;
    border-top-left-radius: 200%;
    border-top-right-radius: 200%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    overflow: hidden;
}
.tractor__roof::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 200%;
    border-top-right-radius: 200%;
    background: linear-gradient(to bottom, transparent 40%, #000 100%);
    opacity: .8;
}
.tractor__tube{
    position: absolute;
    left: 39.8%; /* 199/500 */
    top: -69.005848%; /* -118/171 */
    width: 3%;
    height: 69%;
    border-top-right-radius: 10px;
    background: linear-gradient(to right, #888, #000);
}
.tractor__tube span{
    position: absolute;
    left: -90%; /* -14/199 */
    top: -6.4%; /* -8/118 */
    width: 100%;
    height: 25%;
    border-top-right-radius: 10px;
    background: linear-gradient(to right, #888, #000);
    z-index: 1;
    transform: rotate(90deg);
}

/* Wing */
.tractor__wing{
    position: absolute;
    top: -25%;
    right: 0;
    width: 44%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 10px;
    z-index: 3;
}

.tractor__wing::before{
    content: '';
    position: absolute;
    top: 0%;
    right: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 50%, #160601 100%),
    linear-gradient(#f75c2e 50%, transparent 50%);
}
.tractor__wing::after{
    content: '';
    position: absolute;
    top: 38%;
    right: 0;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(#222 31%, transparent 31%);
    border-radius: 50%;
    opacity: .8;
}
/* hodova */
.tractor__hodova{
    position: absolute;
    left: 26%;
    bottom: 19%;
    width: 38%;
    height: 36%;
    background-color: #000;
    transform: skewX(-32deg);
    transition: unset;
    border-radius: 10px;
    background: linear-gradient(#000, #333);
}
/* Wheel */
.tractor__wheel{
    bottom: -33%;
    left: 2%;
}
.tractor__wheel.wheel--rear{
    left: 56%;
    width: 44%;
    z-index: 3;
}
.wheel{
    position: absolute;
    width: 31%;
    aspect-ratio: 1;
    z-index: 1;
    border-radius: 50%;
    border: 7px dashed #222;
}
.wheel.wheel--rear::before{
    width: 101%;
}
.wheel::before{
    content: '';
    position: absolute;
    width: 103%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* background: radial-gradient(circle, #fff 0%, #fff 20%, 
        #aaa 20%, #999 25%, #aaa 30%,
        #000 30%, #333 50%, 
        #000 70%, transparent 70%); */
    background: radial-gradient(circle, #000 0%, #333 50%, #000 100%);
}
.wheel::after{
    /* display: none; */
    content: '';
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #aaa 60%, #fff 75%, #000 100%);
}
.wheel__disk{
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(#aaa 50%, transparent 50%, #aaa 75%) ;
    background-color: #333;
    z-index: 1;
}
.wheel__disk::after{
    content: '';
    position: absolute;
    width: 60%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    
}
.wheel__bolts{
    position: absolute;
    width: 33%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.wheel__bolts span{
    position: absolute;
    width: 20%;
    aspect-ratio: 1;
    background: #aaa;
    border-radius: 50%;
}
.wheel__bolts.wheel__bolts--rotated{
    transform: translate(-50%, -50%) rotate(45deg);

}
.wheel__bolts span:nth-of-type(1){
    top: 0;
    left: 0;
}
.wheel__bolts span:nth-of-type(2){
    top: 0;
    right: 0;
}
.wheel__bolts span:nth-of-type(3){
    bottom: 0;
    left: 0;
}
.wheel__bolts span:nth-of-type(4){
    bottom: 0;
    right: 0;
}
.wheel__hole{
    position: absolute;
    width: 20%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;    
    background: #aaa;
    border-radius: 50%;

}