.code-html,
.code-css,
.code-js {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  font-family: "Monaco", "Consolas", "Courier New", monospace;
  /* font-family: "Roboto Mono", monospace; */
  font-weight: 600;
}

pre {
  width: 100%;

  padding: 1rem;

  border-radius: 10px;

  background-color: #292d3e;
}

code {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 1.4rem;
}
/* #endregion GUIDE PRE CODE */
/* #region GUIDE BUTTON */
.copy-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  /* background-color: #007bff; */
  /* color: white; */
  background-color: hsl(200, 100%, 39%);
  font-size: 1.4rem;
  cursor: pointer;
}
/* #endregion GUIDE BUTTON */
/* #region GUIDE COLORS */
.comment {
  color: #6a9955;
}

#cssCode .selector,
#cssCode .curly-bracket,
#jsCode .backtick .backtick-brackets,
#jsCode .brackets2 {
  color: #fcca6b;
}

#cssCode .property,
#jsCode {
  color: #c4c8e2;
}

#cssCode .value,
#cssCode .number {
  color: #f78c6c;
}

#cssCode .punctuation,
#jsCode .operator {
  color: #90eaff;
}

#jsCode .function .keyword,
#jsCode .variable,
#jsCode .arrow-function {
  color: #c678dd;
}

#jsCode .number {
  color: #e06c75;
}

.indentation-0 {
  color: #f8f8f2;
}

.red {
  color: #fc757b;
}

.green {
  color: #cbf291;
}

.event .brackets1 {
  color: #0da960;
}

.purple {
  color: #c490e6;
}

#jsCode .backtick .content-inside-brackets {
  color: #c4c8e2;
}
.darkgrey {
  color: #676e95;
}

#jsCode .function .name,
#jsCode .event .keyword,
#jsCode .callfunction .keyword {
  color: #80a9fd;
}

#jsCode .function .brackets1,
#jsCode .callfunction .brackets {
  color: #1966ff;
}

.test {
  color: #d26;
}

#jsCode .string,
#jsCode .string .operator,
#jsCode .string > *,
#jsCode .backtick,
#jsCode .backtick .punctuation {
  color: #98c379;
}
/* #endregion GUIDE COLORS */