#p5_loading {
    display: none;
}


/*AI*/

@font-face {
    font-family: 'quartzFont';
    src: url('data/Segment14.otf');
}

.start-button {
  position: relative;
  max-width: 8ch;
  display: block;
  background-color: black;
  color: Lime;
  font-size: 36px;
  border: 6px solid rgb(141, 149, 151);
  font-family: quartzFont;
  cursor: pointer;
}

.start-button-parent {
  z-index: 1;
  display: inline;
  filter: drop-shadow(0px 6px 0px rgb(158, 168, 168));
}

.dialogue-button-parent {
    z-index: 1;
    display: inline;
    filter: drop-shadow(0px -10px 0px rgb(158, 168, 168)) drop-shadow(-2.5px 0px 0px rgb(141, 149, 151)) drop-shadow(2.5px 0px 0px rgb(141, 149, 151));
}

.dialogue-button {
    position: relative;
    max-width: 15ch;
    animation: reveal .25s ease-in-out;
    display: block;
    background-color: black;
    color: Lime;
    font-size: 20px;
    border: 4px solid rgb(141, 149, 151);
    font-family: quartzFont;
    cursor: pointer;
    clip-path: inset(0 0 40% 0);
}

.start-button:not(:disabled):hover .flicker-text {
  animation: flicker 1s infinite steps(1);
  transition: none;
}

.dialogue-button:hover .flicker-text {
    animation: flicker 1s infinite steps(1);
    transition: none;
}

@keyframes flicker {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    40% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

@keyframes reveal {
    0% {
        clip-path: inset(0 100% 40% 0);
    }

    100% {
        clip-path: inset(0 0 40% 0);
    }
}

.start-button:disabled {
  color: rgb(64, 128, 64);
  pointer-events: none;
}

.dialogue-button.second-anim-class {
    animation: second-anim 0.5s forwards;
}

@keyframes second-anim {
    0% {
        clip-path: inset(0 0 40% 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0px, -10px);
    }
}

.dialogue-button-parent.init-reveal {
    animation: remove-shadow 0.5s forwards;
    /* delay matches reveal duration */
}

@keyframes remove-shadow {
    0% {
        filter: drop-shadow(0px -10px 0px rgb(158, 168, 168)) drop-shadow(-2.5px 0px 0px rgb(141, 149, 151)) drop-shadow(2.5px 0px 0px rgb(141, 149, 151));
        ;
    }

    100% {
        filter: drop-shadow(0px 5.5px 0px rgb(158, 168, 168));
    }
}

.BigRedButton {
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%);
    z-index: 10; 
}

.volume-slider {
  -webkit-appearance: none;
  width: 12rem;
  background: #000000;
  outline: 1px solid rgb(26, 196, 26);
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.volume-slider:hover {
  opacity: 1;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 30px;

  background: rgb(0, 255, 0);
  cursor: pointer;
}
.volume-slider::-moz-range-thumb {
  width: 25px;
  height: 30px;
  background: rgb(0, 255, 0);
  cursor: pointer;
}