body {
  position: static;
  background-color: rgb(222, 219, 219);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

img {
  height: 50px;
  width: auto;
}

.startFinish {
  display: flex;
  justify-content: space-between;
}

hr {
  border-top: 5px dashed black  ;
}

.car1-toggle {
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-fill-mode: forwards; 
}

@keyframes moveRight {
  0% {
    left: 1vw;
  }
  100% {
    left: 89vw;
  }
}

.car2-toggle {
  position: relative;
  animation-name: moveRight-2;
  animation-duration: 8s;
  animation-fill-mode: forwards; 
}

@keyframes moveRight-2 {
  0% {
    left: 1vw;
  }
  100% {
    left: 89vw;
  }
}

.car3-toggle {
  position: relative;
  animation-name: moveRight-3;
  animation-duration: 6s;
  animation-fill-mode: forwards; 
}

@keyframes moveRight-3 {
  0% {
    left: 1vw;
  }
  100% {
    left: 89vw;
  }
}

.popup {
  visibility: hidden;
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: azure;
  font-size: 50px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#raceSelections {
  display: flex;
  flex-direction: column;
}

#raceSelections select {
  padding: 10px;
  margin: 10px;
  width: 20em;
}

#raceButtons {
  display: flex;
  flex-direction: row;
}

.startRace, .reset, .counter{
  padding: 10px;
  margin: 10px;
  width: 22.5em;
}

#raceDash {
  display: flex;
  flex-direction: row;
}

#rightItems {
  width: 20em;
}

.counter {
  border: 1px solid black;
  background-color: rgb(4, 200, 249);
  width: auto;
  border-radius: 3px;
}

.startRace {
  background-color: green;
  border-radius: 3px;
}

.startRace img {
  width: 10px;
}

.reset {
  background-color: red;
  border-radius: 3px;
}

#introCar {
  vertical-align: middle;
}