#colors {
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 30vh;
  margin-left: auto; 
  margin-right: auto; 
  width: 20vh;
  height: 20vh;
}

.circle {
  position: absolute;
  width: 20vh;
  height: 20vh;
  background-color: gray;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 8vh;
  vertical-align: right;
  border: none !important;
}

.circle.selected {
  border: solid 4pt black !important;
}

.circle.incorrect {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

#confetti {
  position: absolute;
}

.CodeMirror {
  height: 56vh !important;
  border-radius: 0.25rem !important;
}



#color7 {
}

@keyframes stretchDown {
  0% {
    height: 200px;
  }
  50% {
    height: 300px;
  }
  100% {
    height: 200px;
  }
}
@keyframes stretchOut{
    0%{
        width:200px;
    }
    50%{
        width: 300px;
    }
    100%{
        width:200px;
    }
}
@keyframes changeColor{
    0%{
        background-color: "green"
    }
    50%{

    }
    100%{
}   
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}
@keyframes stretchOut {
  0% {
    width: 200px;
  }
  50% {
    width: 300px;
  }
  100% {
    width: 200px;
  }
}