body {
  background: url(dark_mosaic.png);
  background-attachment: fixed;
}







.cm-s-dracula .CodeMirror-gutters,
.cm-s-dracula.CodeMirror {
  xbackground-color: #282a36 !important;
  background-color: transparent !important;
  color: #f8f8f2 !important;
  border: none
}

.cm-s-dracula .CodeMirror-gutters {
  color: #282a36;
}

.cm-s-dracula .CodeMirror-cursor {
  border-left: solid thin #f8f8f0
}

.cm-s-dracula .CodeMirror-linenumber {
  color: #6d8a88
}

.cm-s-dracula .CodeMirror-selected {
  background: rgba(255, 255, 255, .1)
}

.cm-s-dracula .CodeMirror-line::selection,
.cm-s-dracula .CodeMirror-line>span::selection,
.cm-s-dracula .CodeMirror-line>span>span::selection {
  background: rgba(255, 255, 255, .1)
}

.cm-s-dracula .CodeMirror-line::-moz-selection,
.cm-s-dracula .CodeMirror-line>span::-moz-selection,
.cm-s-dracula .CodeMirror-line>span>span::-moz-selection {
  background: rgba(255, 255, 255, .1)
}

.cm-s-dracula span.cm-comment {
  color: #6272a4
}

.cm-s-dracula span.cm-string,
.cm-s-dracula span.cm-string-2 {
  color: #f1fa8c
}

.cm-s-dracula span.cm-number {
  color: #bd93f9
}

.cm-s-dracula span.cm-variable {
  color: #50fa7b
}

.cm-s-dracula span.cm-variable-2 {
  color: #fff
}

.cm-s-dracula span.cm-def {
  color: #50fa7b
}

.cm-s-dracula span.cm-operator {
  color: #ff79c6
}

.cm-s-dracula span.cm-keyword {
  color: #ff79c6
}

.cm-s-dracula span.cm-atom {
  color: #bd93f9
}

.cm-s-dracula span.cm-meta {
  color: #f8f8f2
}

.cm-s-dracula span.cm-tag {
  color: #ff79c6
}

.cm-s-dracula span.cm-attribute {
  color: #50fa7b
}

.cm-s-dracula span.cm-qualifier {
  color: #50fa7b
}

.cm-s-dracula span.cm-property {
  color: #66d9ef
}

.cm-s-dracula span.cm-builtin {
  color: #50fa7b
}

.cm-s-dracula span.cm-type,
.cm-s-dracula span.cm-variable-3 {
  color: #ffb86c
}

.cm-s-dracula .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, .1)
}

.cm-s-dracula .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #fff !important
}



.CodeMirror {
  height: 100% !important;
  min-height: 80vh !important;
  background-color: transparent !important;
}


.CodeMirror-gutters {
  background: transparent !important;
  border-right: none !important;
}




.CodeMirror ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.CodeMirror ::-webkit-scrollbar-track {
  background: transparent;
}

.CodeMirror ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5); /* bílý průhledný */
  border-radius: 4px;
}


.CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.05) !important; /* nebo libovolná barva */
}






.hammer-hit {
  display: inline-block;
  transform: scaleX(-1);
  transform-origin: center bottom;
  animation: hammer-hit-animation 3s ease forwards;
}

@keyframes hammer-hit-animation {
  0% {
    transform: scaleX(-1) rotate(0deg);
  }
  25% {
    transform: scaleX(-1) rotate(-20deg);
  }
  100% {
    transform: scaleX(-1) rotate(0deg);
  }
}