#traffic-light {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -160px;
    background-color: #333;
    width: 120px;
    height: 320px;
    border-radius: 30px;
  }

  #traffic-light > input {
    appearance: none;
    position: relative;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: 20px;
    margin-left: -40px;
    background-color: grey;
    /*vertical-align: middle;*/
    border-radius: 100%;
    display: block;
  }

  input#color1 {
    background-color: #b30000;
  }

  input#color1:hover {
    animation: blink1 1.1s step-end infinite;
  }

  input#color1:checked {
    background-color: #FF0000;
    box-shadow: 0 0 6em #ff3333;
  }

  input#color2 {
    background-color: #b2b300;
  }

  input#color2:hover {
    animation: blink2 1s step-end infinite;
  }

  input#color2:checked {
    background-color: #FFFF00;
    box-shadow: 0 0 6em #ffff33;
  }

  input#color3 {
    background-color: #00b300;
  }

  input#color3:hover {
    animation: blink3 1s step-end infinite;
  }

  input#color3:checked {
    background-color: #00FF00;
    box-shadow: 0 0 6em #33ff33;
  }

  @keyframes blink1 {
    0% {
      background-color: #FF0000;
      box-shadow: 0 0 6em #ff3333;
    }

    50% {
      background-color: #b30000;
      box-shadow: 0 0 0em transparent;
    }
  }

  @keyframes blink2 {
    0% {
      background-color: #FFFF00;
      box-shadow: 0 0 6em #ffff33;
    }

    50% {
      background-color: #b2b300;
      box-shadow: 0 0 0em transparent;
    }
  }

  @keyframes blink3 {
    0% {
      background-color: #00FF00;
      box-shadow: 0 0 6em #33ff33;
    }

    50% {
      background-color: #00b300;
      box-shadow: 0 0 0em transparent;
    }
  }

  * {
    user-select: none;
    outline: none;
  }