html, body {
    margin-top: 0;
    height: 100%;
}

.maintext {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

label.btn {
    margin-bottom: 0;
}

#file-op-buttons {
    margin-bottom: 5px;
}

.form-inline .btn {
    margin-left: 10px;
}

.blur {
  -webkit-animation: blur 0.5s 1;
  filter: blur(10px);
  pointer-events: none;
}

@-webkit-keyframes blur {
  from { -webkit-filter: blur(0px); }
  to { -webkit-filter: blur(10px); }
}

#canvas-speed:disabled::-webkit-slider-thumb {
    background: gray;
}

.fileinput {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#editor {
    display: block;
    height: 100%;
    font: 12px 'dejavu sans mono', menlo, monaco, monospace;
    border-radius: 10px;
}

#obtain-secret, #finish-debug {
    display: none;
}

.tab-content, .nav-tabs {
    margin-top: 15px;
}

.tab-content {
    min-height: 200px;
}

.progress-bar {
    border-radius: 2px;
    height: 15px;
}

.full-height {
    height: 100%;
}

.scrollable {
    overflow-y: scroll;
}

#main-div {
    height: calc(100% - 80px);
}

#gif {
    min-height: 270px;
    transition: height 2s;
}

#gif-loading {
    height: 100%;
    width: 100%;
}

#gif-output {
    /* overflow-y: auto; */
    /* overflow-x: auto; */
}

#console-output {
    font-family: monospace;
    background-color: #202020;
    color: white;
    border-radius: 4px 4px 4px 4px;
    padding: 4px;
    overflow: auto;
}

.keyframe-remove {
    float: right;
}

div.form-group label {
    font-weight: bolder;
}

.ace_gutter-cell.ace_breakpoint{
    border-radius: 20px 0px 0px 20px;
    box-shadow: 0px 0px 1px 1px red inset;
    background: LightCoral;
}

.current-line {
    background: LightCoral;
    position: absolute;
}


.table td,.table th {
    text-align: left;
    table-layout: auto;
}

/* Checkbox size! */
.big-checkbox {width: 25px; height: 25px;}

@keyframes fadeInAndBounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0; /* Fade out */
    transform: scale(1);
  }
}

#celebration-animation {
  font-size: 2rem;
  color: #4caf50;
  text-align: center;
  margin-top: 20px;
  animation: fadeInAndBounce 2s ease-in-out; /* Extend duration to 2s for fade-out */
}