*{
    box-sizing: border-box;
}
html{
    height: 100vh;
}
body{
    background-color: black;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.traffic-lights{
    background-color: #41445a;
    height: 50%;
    width: 25%;
    max-height: 400px;
    max-width: 200px;
    border: 3px solid darkblue;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.light{
    background-color: #000000;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 2px solid black;

}
.light.red{
    background-color: red;
    animation-name: blinkingRed;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
.light.yellow{
    background-color: yellow;
    animation-name: blinkingYellow;
    animation-duration: 1s;
    animation-iteration-count: 2;
}
.light.green{
    background-color: green;
    animation-name: blinkingGreen;
    animation-duration: 1s;
    animation-iteration-count: 3;
}

@keyframes blinkingRed{
    from{
        background-color: #000000;
    } to{ background-color: red;
        
    }
}
@keyframes blinkingYellow{
    from{
        background-color: #000000;
    } to{ background-color: yellow;
        
    }
}
@keyframes blinkingGreen{
    from{
        background-color: #000000;
    } to{ background-color: green;
        
    }
}