style.css

.algoBraces .algoBrace {
  font-size: 30px;
}

.algoBrace {
  padding: 2px;
}

.curbrace {
  animation: pulse 800ms;
  color: blue;
}
@keyframes pulse {
  0% {
    /* background-color: #2f80ed; */
    /* padding: 2px; */
  }

  50% {
    /* color: white; */
    transform: scale(0.1);
  }
  75% {
    /* color: white; */
    transform: scale(1.5);
  }
  87% {
    /* color: white; */
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

.highlitbrace-up {
  animation: highlightup 800ms ease;
  color: blue;
  border-radius: 15px;
}

.highlitbrace-down {
  animation: highlightdown 800ms ease;
  color: blue;
  border-radius: 15px;
}

@keyframes highlightup {
  0% {
  }
  50% {
    color: white;
  }
  100% {
    color: darkblue;

    /* padding: 5px; */
  }
}

@keyframes highlightdown {
  0% {
    /* background-color: #2f80ed; */
    color: darkblue;
    /* padding: 2px; */
  }
  50% {
    color: white;
  }
  100% {
    color: blue;
    /* padding: 5px; */
  }
}

button:hover {
  transform: scale(1.1, 1.1);
  transition: 600ms ease;
}

/* .takestep:hover {

} */

@keyframes stepper {
  0% {
    background-color: green;
  }
  100% {
    background-color: darkcyan;
  }
}

/* code block -------------------------------- */

.codeblock {
  border: 2px solid brown;
  text-align: justify;
  font-size: large;
  /* wow great color lavenderblush */
  width: 1000px;
  background-color: lavenderblush;
}
.keyword {
  color: blueviolet;
}

.operator {
  color: blue;
}

.punctuation {
  color: brown;
}

.builtin {
  color: chocolate;
}

.parameter {
  color: chocolate;
}

.number {
  color: cornflowerblue;
}

.boolean {
  color: hotpink;
}

.function {
  color: crimson;
}

.string {
  color: darkmagenta;
}

.modal-body {
  width: 1000px;
  margin-left: -20px;
}

.modal {
}

.modal-content {
  width: 120%;
  margin-left: -20px;
  /* overflow: hidden; */
}

pre {
  overflow: hidden;
  margin-left: -20px;
  /* overflow: hidden; */
}

#thecodeblock {
  margin-top: 40px;
  overflow: hidden;
}

.explain {
  /* full width */
  /* border: 1px solid black; */
}
/* .explaincontent {
  width: 130%;
} */

#explainbraces {
  /* justify-self: start; */
}
.bodyexplainbraces {
}

#explaincontent {
  width: auto;
  /* position: absolute; */
  /* left: 272px; */
  /* left: -200px; */
}

.contain {
  border: 1px solid black;
  border-radius: 3px;
  /* came across this, just learned that inline-block was exactly for this purpose, wow */
  /* https://stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents */
  display: inline-block;
}

.contain button {
  margin: 5px;
}

.stackItems {
  font-size: 25px;
  color: purple;
}

.justpopped {
  animation: popping 1s ease-in;

  color: #800080;
  position: absolute;
  margin-right: 100px;
}

@keyframes popping {
  100% {
    opacity: 0;
    transform: translate(50px);
  }
}