.trafficlight {
  background: #222;
  width: 37px;
  height: 37px;
  border-radius: 5px;
  position: relative;
  border: solid 1px #333;
  display: inline-block !important;
  aspect-ratio: 1/1;
}

.red {
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  animation: 13s red infinite;
  border: dotted 2px red;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px red;
}

.yellow {
  background: yellow;
  background-image: radial-gradient(yellow, transparent);
  background-size: 5px 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: dotted 2px yellow;
  animation: 13s yellow infinite;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px yellow;
}

.orange {
  background: orange;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: dotted 2px orange;
  animation: 13s orange infinite;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px orange;
}

.white {
  background: white;
  background-image: radial-gradient(white, transparent);
  background-size: 5px 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: dotted 2px white;
  animation: 13s white infinite;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px white;
}

.green {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: dotted 2px lime;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px lime;
  animation: 13s green infinite;
}

.opaque {
  opacity: 0.2;
}