.code-container {
	min-width: 500px;
	padding: 1.5rem;

  border-radius: 0.75rem;

  background: var(--black);
}

@media (max-width: 768px) {
	.code-container {
		min-width: 0px;
		max-width: 80%;
	}
}

.pending, .space {
  color: gray;
}

.highlight {
  color: gray;
  animation: blink 0.75s infinite ease-in-out;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
}

.incorrect-space {
  border-bottom: 1px solid red;
}

.incorrect-enter {
  border-left: 1px solid red;
}

@keyframes blink {
  0% {
    border-left: 1px solid white;
  }

  50% {
    border-left: 1px solid transparent;
  }

  100% {
    border-left: 1px solid white;
  }
}
