*{
    margin: 0;
    padding: 0;
}
body{
    background: #1acbfc;
    /* position: relative; */
}
.traffic-light{
    width: 10em;
    height: 22.5em;
    background: #333;
    border: 0.5em solid #eee;
    border-radius: 2em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-5.5em,-50%); 
}
.traffic-light::after{
    content: '';
    width: 3em;
    height: 8em;
    position: absolute;
    top:100%;
    left: 50%;
    transform: translate(-50%);
    background:linear-gradient(rgba(240,240,240,0.9),#1acbfc);
}
.Light{
    width: 6em;
    height: 5.5em;
    background: #000;
    border-radius: 50%;
    border-top: 0.5em solid #000;
    margin: 1em auto;
}
.red{
    /* background: red; */
    animation:red 10s linear infinite;
}
.amber{
    /* background: #ff7100; */
    animation: amber 10s linear infinite;
}
.green{
    /* background: green; */
    animation: green 10s linear infinite;
}

@keyframes red{
    0%{
        background: #000;
    }
    2%,40%{
        background:red;
    }
    42%,100%{
        background: #000;
    }
}
@keyframes amber{
    0%,20%{
        background: #000;
    }
    22%,40%{
        background: #ff7e00;
    }
    42%,80%{
        background: #000;
    }
    82%,100%{
        background: #ff7e00;
    }
}
@keyframes green{
    0%,40%{
        background: #000;
    }
    42%,80%{
        background: green;
    }
    82%,100%{
        background: #000;
    }
}