/* Color Palatte */
* {
    --robinsEgg: #b0f2ff;
    --robinDark: #18242d;
    --lemonDrop: #daffb0;
    --bubbleGum: #ffb0ed;
    --lavenderMist: #c9b0ff;
    --peachCannon: #ffb0b0;
    --errorCute: #b66565;
    --crystalOrb: #e2fff8;
    --sunsetFuzz: #fff2d7;
    --soursopDrink: #bd55c7;
    --coolSunglasses: #331b3c;
    --lcdGoo: #6b397d;
    --poisonApple: #3a0d4b;
    --photoFrame: #283f65;
    --gameBoyAdvanced: #a8b7c7;
}

/* browser settings and interactibility */
body {
    position: relative;
    height: 763px;

    z-index: -5;

    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none;

              transform: scale(.7);
}

.container {
    background: rgb(255, 255, 255);
    padding: 16px;
    border-radius: 4px;
    }

/* Background Stuff */

.background {
    width: 100%;
    height: 130%;
    position: absolute;
    z-index: 1;
    transform: scale(2);
}

#background-a {
    z-index: -1;
    background-color: var(--robinsEgg);
}

#background-b {
    z-index: -2;
    background-color: var(--lemonDrop);
}

/* Splash Screen Elements */

.splash-screen {
    position: absolute;
    color: var(--crystalOrb);
    top: 50%;
    left: 50%;
    padding: 1rem;
    width: 5rem;
    height: 2.5rem;
    margin: 3.5rem 0 0 -3.5rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 1rem;
    background-color: var(--lavenderMist);
    z-index: 2;
}

#starter-background {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    height: 34rem;
    width: 18rem;
    left: 50%;
    top: 54.5%;
    padding: 2rem;
    margin: -17.5rem 0 0 -11rem;
    background: var(--crystalOrb);
    color: black;
    z-index: 2;
    border-radius: 3rem;
}

#begin-button {
    top: 86.5%;
}

#begin-button:hover {
    background-color: var(--peachCannon);
}

#intro-backdrop {
    background: var(--lemonDrop);
    width: 24rem;
    height: 44rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -17rem 0 0 -12rem;
    z-index: 1;
    border-radius: 3rem;
}

/* Dictation Field */
#dictation-field {
    position: absolute;
    width: 9.5rem;
    height : 2rem;
    top: 79%;
    left: 50%;
    margin: 4.2rem 0 0 -5.25rem;
}

::placeholder {
    text-align: center;
}

/* Sound Elements */

#sounds-container {
    position: absolute;
    width: 30rem;
    height: 10rem;
    border: 1px;
    top: 50%;
    left: 50%;
    margin: -15rem 0 0 -15rem;
}

.single-sound {
    /* position: absolute; */
    grid-template-columns: repeat(5, 20%);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-style: ;
    /* width: 6rem; */
    height: 2rem;
    line-height: 2rem;
    padding: 1rem;
    margin: 1rem;
    background-color: var(--peachCannon);
    border-radius: 2rem;
}

#length-must-text {
    position: absolute;
    text-align: center;
    color: var(--sunsetFuzz);
    font-style: oblique;
    width: 30rem;
    height: 7rem;
    line-height: 2.5rem;
    top: 81%;
    left: 50%;
    margin: -5rem 0 0 -15rem;
    background-color: var(--errorCute);
    border-radius: 2rem;
}

#waiting-text {
    position: absolute;
    text-align: center;
    font-size: .9rem;
    line-height: 3rem;
    color: var(--sunsetFuzz);
    font-style: oblique;
    width: 6.9rem;
    height: 7rem;
    line-height: 2.5rem;
    top: 74.5%;
    left: 50%;
    margin: -5rem 0 0 10.5rem;
    background-color: var(--errorCute);
    border-radius: 10rem;
}

#error-container {
    position: absolute;
    text-align: center;
    font-size: .9rem;
    line-height: 3rem;
    font-style: oblique;
    width: 6.9rem;
    height: 7rem;
    line-height: 2.5rem;
    top: 74.5%;
    left: 50%;
    margin: -5rem 0 0 10.5rem;
    background-color: var(--crystalOrb);
    border-radius: 10rem;
}

.hidden {
    display: none;
}
  

#main-title {
    line-height: 80%;
    font-size: 4rem;
    text-align: center;
    position: absolute;
    width: 18rem;
    color: var(--crystalOrb);
    top: 50%;
    left: 50%;
    margin: -30rem 0 0 -9rem;
    transform: scale(1.5);
}

#main-title:hover {
    color:var(--coolSunglasses);
}

.trigger-input-form {
    position: absolute;
    width: 9.5rem;
    height : 2rem;
    top: 33.5%;
    left: 50%;
    margin: 0rem 0 0 -4.4rem;
    z-index: 3;
}

.text-field {
    margin-bottom: .3rem;
}


.slide-container-1 {
    position: absolute;
    top: 83%;
    left: 50%;
    width: 20rem;
    margin: 6rem 0 0 -10.2rem;
}

.slide-container-2 {
    position: absolute;
    top: 86.5%;
    left: 50%;
    width: 20rem;
    margin: 6.5rem 0 0 -10.2rem;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;  
    background: var(--soursopDrink);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 2rem;
    border-radius: 20%;
    background: radial-gradient(var(--gameBoyAdvanced), var(--gameBoyAdvanced) 60%, var(--coolSunglasses));
    cursor: pointer;
}
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--gameBoyAdvanced);
    cursor: pointer;
}

.left-red {
    background: linear-gradient(90deg, var(--soursopDrink) 0% 75%, red 100%);
}

.right-red {
    background: linear-gradient(270deg, var(--soursopDrink) 0% 75%, red 100%);
}

#min-display {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    color: var(--coolSunglasses);
    top: 78.25%;
    left: 50%;
    margin: 5.2rem 0 0 -9rem;
}

#max-display {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    color: var(--coolSunglasses);
    top: 78.25%;
    left: 50%;
    margin: 5.2rem 0 0 6.25rem;
}

.error-red {
    background-color: red;
}

#preferences-button {
    width: 3rem;
    height: 3rem;
    background-color: var(--coolSunglasses);
    border-style: dashed;
    border-color: white;
    border-width: .1rem;
    border-radius: 2rem;
    position: absolute;
    top: 92%;
    left: 50%;
    margin: 6rem 0 0 -1.5rem;
}

#preferences-button:hover {
    background-color: var(--peachCannon);
  }


#close-prefs-button {
    width: 10rem;
    top: 84.25%;
    left: 50%;
    margin: 9.5rem 0 0 -6rem;
}

#close-prefs-button:hover {
    background-color: var(--peachCannon);
}

#prefs-backdrop {
    background: var(--coolSunglasses);
    width: 24rem;
    height: 43rem;
    position: absolute;
    top: 26%;
    left: 50%;
    margin: 0rem 0 0 -12rem;
    z-index: 1;
    border-radius: 3rem;
}

#prefs-background {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    height: 34rem;
    width: 18rem;
    left: 50%;
    top: 54.5%;
    padding: 2rem;
    margin: -12.5rem 0 0 -11rem;
    background: var(--crystalOrb);
    color: black;
    z-index: 2;
    border-radius: 3rem;
}

#max-sounds-slider {
    position: absolute;
    top: 54%;
    font-family: 'Courier New', Courier, monospace;
    left: 50%;
    width: 20rem;
    margin: 5rem 0 0 -10.2rem;
    z-index: 3;
}

#sound-rate-slider {
    position: absolute;
    top: 62%;
    font-family: 'Courier New', Courier, monospace;
    left: 50%;
    width: 20rem;
    margin: 7rem 0 0 -10.2rem;
    z-index: 3;
}

.big-phone {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    height: 60rem;
    width: 36rem;
    margin: -17rem 0 0 -18rem;
    background-color: var(--crystalOrb);
    opacity: 20%;
    border-width: .1rem;
    border-style: dotted;
    border-radius: 4rem;
}

#big-phone-dark {
    opacity: 90%;
    border-color: var(--crystalOrb);
    background-color: var(--poisonApple);
}

#randomize-button {
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
    top: 87.5%;
    left: 63%;
    border: solid;
    border-radius: .3rem;
    border-color: var(--coolSunglasses);
    border-width: .2rem;
    z-index: 2;
}

/* ANIMATIONS */

@keyframes searchingLight {
    0% {color: var(--crystalOrb);}
    90% {color: var(--robinsEgg);}
    100% {color: var(--crystalOrb);}
}

.searchingLight {
    animation-name: searchingLight;
    animation-duration: .7s;
}

@keyframes searchingDark {
    0% {color: var(--peachCannon);}
    90% {color: var(--robinDark);}
    100% {color: var(--peachCannon);}
}

.searchingDark {
    animation-name: searchingDark;
    animation-duration: .7s;
}




/* @keyframes looping {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.looping {
    display: flex;
    align-items: center;
}

.looping::before {
    content: '';
    position: absolute;
    width: 70rem;
    height: 100%;
    left: 0%;
    background: white;
    animation: looping 4s linear infinite;
}

.looping::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: black;
    border-radius: 6rem;
    overflow: hidden;

}

.looping-contents {
    position: relative;
    color: ;

} */