body {
    background-color: #1f1f1f;
}

.crossingUp {
    background-color: gray;
    height: 600px;
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.crossingDown {
    background-color: gray;
    height: 200px;
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.arcCircle1A {
    background-color: gray;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 35%;
    top: 14%;
    z-index: -1;
}

.arcCircle1B {
    background-color: #1f1f1f;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 27.6%;
}

.arcCircle2A {
    background-color: gray;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 35%;
    top: 54%;
    z-index: -1;
}

.arcCircle2B {
    background-color: #1f1f1f;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 27.6%;
    top: 64%;
}

.arcCircle3A {
    background-color: gray;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 52%;
    top: 54%;
    z-index: -1;
}

.arcCircle3B {
    background-color: #1f1f1f;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 56.4%;
    top: 64%;
}

.arcCircle4A {
    background-color: gray;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 52%;
    top: 16%;
    z-index: -1;
}

.arcCircle4B {
    background-color: #1f1f1f;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 56.4%;
}

.markingTop {
    background-color: white;
    height: 80px;
    width: 5px;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.markingBottom {
    background-color: white;
    height: 80px;
    width: 5px;
    position: absolute;
    top: 79%;
    left: 50%;
    transform: translateX(-50%);
}

.markingLeft {
    background-color: white;
    height: 5px;
    width: 80px;
    position: absolute;
    top: 50%;
    left: 34%;
    transform: translateX(-50%);
}

.markingRight {
    background-color: white;
    height: 5px;
    width: 80px;
    position: absolute;
    top: 50%;
    left: 66%;
    transform: translateX(-50%);
}

.lightTop {
    background-color: rgb(0, 255, 0);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.lightMiddle {
    background-color: rgb(135, 135, 0);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.lightBottom {
    background-color: rgb(110, 0, 0);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.lightContainerTop {
    position: absolute;
    top: 20%;
    left: 49.4%;
    rotate: 270deg;
}

.lightContainerBottom {
    position: absolute;
    rotate: 90deg;
    top: 45%;
    left: 39%;
}

.glow {
    box-shadow: 0 0 20px 5px rgb(0, 255, 0);
}

.zebravert1{
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 45%;
    transform: translateX(-50%);
}

.zebravert2{
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 46%;
    transform: translateX(-50%);
}

.zebravert3{
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 47%;
    transform: translateX(-50%);
}

.zebravert4{
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 48%;
    transform: translateX(-50%);
}

.zebravert5 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 52%;
    transform: translateX(-50%);
}

.zebravert6 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 53%;
    transform: translateX(-50%);
}

.zebravert7 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 54%;
    transform: translateX(-50%);
}

.zebravert8 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 10.5%;
    left: 55%;
    transform: translateX(-50%);
}

.zebravert16 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 55%;
    transform: translateX(-50%);
}

.zebravert15 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 54%;
    transform: translateX(-50%);
}

.zebravert14 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 53%;
    transform: translateX(-50%);
}

.zebravert13 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 52%;
    transform: translateX(-50%);
}

.zebravert12 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 48%;
    transform: translateX(-50%);
}

.zebravert11 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 47%;
    transform: translateX(-50%);
}

.zebravert10 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 46%;
    transform: translateX(-50%);
}

.zebravert9 {
    background-color: white;
    height: 70px;
    width: 3px;
    position: absolute;
    top: 79.8%;
    left: 45%;
    transform: translateX(-50%);
}

.zebrahori1 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 39%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori2 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 41.3%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori3 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 43.6%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori4 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 45.9%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori5 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 54%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori6 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 56.3%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori7 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 58.6%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori8 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 60.9%;
    left: 34%;
    transform: translateX(-50%);
}

.zebrahori16 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 60.9%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori15 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 58.6%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori14 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 56.3%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori13 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 54%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori12 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 45.9%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori11 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 43.6%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori10 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 41.3%;
    left: 66%;
    transform: translateX(-50%);
}

.zebrahori9 {
    background-color: white;
    height: 3px;
    width: 70px;
    position: absolute;
    top: 39%;
    left: 66%;
    transform: translateX(-50%);
}

.car {
    height: 50px;
    position: absolute;
    top: 53%;
    left: 31%;
    z-index: 5;
}

.bicycle {
    height: 50px;
    position: absolute;
    top: 10%;
    left: 60%;
    z-index: 5;
}

.smartBumpTop {
    background-image: repeating-linear-gradient(
        45deg,
        black,
        black 10px,
        orange 10px,
        orange 20px
    );
    height: 15px;
    width: 80px;
    position: absolute;
    top: 21%;
    left: 50.6%;
    z-index: 4;
}

.smartBumpBottom {
    background-image: repeating-linear-gradient(
        45deg,
        black,
        black 10px,
        rgb(195, 127, 0) 10px,
        rgb(195, 127, 0) 20px
    );
    height: 15px;
    width: 80px;
    position: absolute;
    top: 21%;
    left: 50.6%;
    z-index: 3;
}

/*
background-image: repeating-linear-gradient(
        45deg,
        black,
        black 10px,
        white 10px,
        white 20px
    );
*/