@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Kosugi+Maru&family=Noto+Sans+Arabic:wght@500&family=Schoolbell&display=swap');

#good-job-display {
    cursor: pointer;
    transition: all 300ms;
    color: rgb(220, 255, 47);
}

#good-job-display:hover {
    text-shadow: 0 0 10px yellowgreen,
                 0 0 30px yellowgreen,
                 0 0 80px yellowgreen,
                 0 0 120px yellowgreen,
                 0 0 200px yellowgreen
}

#word-display {
    font-size: 1em;
    margin-top: -100;
}

/* specify styles of all buttons */
button {
    font-size: 1em;
    border-radius: 50px;
    font-family: 'Gaegu';

}

#answer-display {
    font-size: 100px;
    color: rgb(245, 68, 68);
}

#alphabet-input {
    font-size: 100px;
    color: rgb(189, 108, 37);
    width: 100px;
    text-align: center;
    font-family: 'Gaegu';

}



#guesses-display {
    color: brown;
}


body {
    margin-top: -10px;
    font-family: 'Gaegu';
    background-color: rgb(65, 59, 59);
    color: beige;
    font-size: 100px;
    text-align: center;
}

input {
    padding: 20px;
    border-radius: 20px;
}

button {
    padding: 20px;
    border-radius: 20px;
}

/* Question: why can't set input button both elements at the same time? */


/* add glow to remaining letters */

.glow {
    margin-top: -100px;
    transition: all 200ms;
    cursor: pointer;
    position: relative;
}

.glow span { 
    /* each letter glows on its own (not together all at once), so individual spans are needed */
    color: #fff;
    transition: all 300ms;
}
.glow span:hover {
    text-shadow: 0 0 10px #0698a5,
                 0 0 30px #0698a5,
                 0 0 80px #0698a5,
                 0 0 120px #0698a5,
                 0 0 200px #0698a5
}
.glow span.attempted:hover {
    text-shadow: 0 0 10px yellowgreen,
                 0 0 30px yellowgreen,
                 0 0 80px yellowgreen,
                 0 0 120px yellowgreen,
                 0 0 200px yellowgreen
}

/* Attach little unicorn at the bottom of the screen. */

.little-unicorn-container {
    /* visibility: hidden;
    opacity: 0; */
    transition: .2s;
    position: fixed;
    bottom: 1.2rem;
    right: 1.5rem;
    z-index: -100;
}

.little-unicorn-container img {
    width: 20rem;
    margin-bottom: 50vh;
}


/* pancake counter area */

#pancake-area-container {
    position: absolute;
    top: 40%;
    left: -25%;
    width: 80%;
    z-index: -100;
  }


  #pancake-area {
    top: 2px;
    left: 2px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-bottom: 30%;
    position: relative;
    

  }
  
  #plate {
    margin: -2.5% 0;
    width: 27%;
    /* width: 300px; */
  }
  
  #strawberry {
    /* width: 300px; */
    width: 25%;
    position: absolute;  
    bottom: -3.5%;
  }
  
  img.pancake {
    /* margin-bottom: -90px; */
    margin-bottom: -7.2%;
    width: 22%;
    

  }