#gears {
    position: absolute;
    display: inline-flex;
    width: 50vw;
    height: 300px;
    top: -500px;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

#gear1 {
    position: relative;
    left: -4%;
    width: 200px;
    animation: rotation 20s infinite linear;
}

#gear2 {
    position: relative;
    right: 8%;
    top: -30%;
    width: 150px;
    transform: rotate(12.5deg);
    animation: revrotation 20s infinite linear;
}

@keyframes rotation {
    from{transform: rotate(360deg);}
    to{}
}
@keyframes revrotation {
    from{transform: rotate(-360deg);}
    to{}
}

path {
    fill: #bfc0c0;
}