@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro|Indie+Flower|Modak|Nova+Square|Righteous|Kumar+One+Outline&display=swap');

#title_screen {
  font-family: 'Kumar One Outline', cursive;
  color: #ffe96f;
  margin-bottom: -25px;
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-size: 70px;
  font-weight: 500;
  -webkit-animation: glow 0.8s ease-in-out infinite alternate;
  -moz-animation: glow 0.8s ease-in-out infinite alternate;
  animation: glow 0.8s ease-in-out infinite alternate;
}
#discordBox{
  display: flex;
  justify-content: center;
  margin: auto;
  width: 5%;
  height: 5%;
}
#discordLink img{
  width: 100%;
  height: 100%;
  margin: 0px;
}
.cells{
  width: 15px;
  height: 15px;
  background-color: #383838;
  border: 1px solid black;
  text-align: center;
  font-size: 65%;
}
@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffe96f, 0 0 40px #ffe96f, 0 0 50px #ffe96f, 0 0 60px #ffe96f, 0 0 70px #ffe96f;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px white, 0 0 40px lemonchiffon, 0 0 50px lemonchiffon, 0 0 60px lemonchiffon, 0 0 70px lemonchiffon, 0 0 80px lemonchiffon;
  }
}
@keyframes ezFlash {
  from {color: #ffe96f}
  to{color: springgreen}
}
@keyframes nrmlFlash {
  from {color: #ffe96f}
  to{color: rgb(224, 180, 255)}
}
@keyframes hrdFlash {
  from {color: #ffe96f}
  to{color: red}
}

#secondaryTitleScreen{
  font-family: 'Fredoka One', cursive;
  color: #ffe96f;
  margin-bottom: 10px;
  text-align: center;
  font-size: 35px;
}

#everything {
  display: none;
  flex-direction: column;
  width: 99.8%;
  height: 99.8%;
  margin: auto;
}

#output_holder {
  font-family: 'Righteous', cursive;
  padding: 10px;
  border-radius: 25px;
  margin: auto;
  display: block;
}
#info{
  display: none;
  font-family: "Source Sans Pro", sans-serif;
  color: aqua;
  font-size: 16px;
}
body {
  background-color: midnightblue;
  background-size: 100% 100%;
  background-position: center;
}

#score {
  color: #ffe96f;
  display: block;
  text-align: center;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
}

#hiScoreEasy{
  color: springgreen;
  display: none;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 20px;
  margin: auto;
}
#hiScore{
  color: rgb(224, 180, 255);
  display: block;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 20px;
  margin: auto;
}
#hiScoreHard{
  color: red;
  display: none;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 20px;
  margin: auto;
}
#diffScores{
  margin-top: 20px;
  margin-bottom: 20px;
}
#topScores{
  display: none;
  color: #ffe96f;
  text-align: left;
  font-family: 'Nova Square', cursive;
  font-size: 25px;
  margin: 15px;
  background: linear-gradient(rgb(163, 64, 255), indigo);
  border-radius: 20px;
  padding: 3px;
}
#earlierPatchNoteButton{
  display: none;
}

#scoreDiffText{
  font-size: 30px;
  text-align: center;
  font-family: 'Nova Square', cursive;
  color: rgb(224, 180, 255);
  display: none;
}

#flexButtons{
  display: flex;
  justify-content: center;
}

#backToMenu{
  display: none;
}

#userContainer{
  display: none;
  color: #ffe96f;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
}
#userContainer input{
  margin-bottom: 15px;
}
#userContainer button{
  margin-bottom: 15px;
}

#submitted{
  display: none;
  color: #ffe96f;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
}

#lives {
  color: aqua;
  display: block;
  text-align: center;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
}

#game_over {
  font-family: 'Nova Square', cursive;
  text-align: center;
  font-size: 50px;
  color: yellow;
  display: none;
}
.infoBoxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.enemBoxes{
  width: 30%;
}
.powerBoxes{
  width: 30%;
}
.infoText {
  text-align: center;
}
.miscText {
  color: rgb(224, 180, 255);
}
#alien{
  width: 45%;
  color: #7fff00;
}
#ninja{
  width: 45%;
  color: #696969;
}
#unicorn{
  color: #e0ffff;
}
#bee{
  color: #F3C622;
}
#robot{
  color: #c0c0c0;
}
#godMode{
  color: #ffd700;
}
#dragon{
  color: limegreen;
}
#khione{
  color: skyblue;
}
#shield{
  color: lightcoral;
}
#extraLife{
  color: red;
}
#random{
  color: gainsboro;
}
.imageText{
  font-size: 30px;
}
#ur_dead {
  font-family: 'Nova Square', cursive;
  text-align: center;
  font-size: 16px;
  color: yellow;
  display: none;
}
#buttonDiv{
  display: flex;
  justify-content: space-evenly;
}

#difficultyMessage{
  color: #ffe96f;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
}

#easy{
  color: springgreen;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
}
 #normal{
  color:  rgb(224, 180, 255);
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
 }

 #hard{
  color: red;
  text-align: left;
  font-family: 'Righteous', cursive;
  font-size: 25px;
  margin: auto;
 }

 .easy{
  display: none;
  color: springgreen;
 }
 .normal{
  display: block;
  color: rgb(224, 180, 255);
 }
 .hard{
  display: none;
  color: rgb(255, 180, 167);
 }
 #easyScores{
  display: none;
 }
 #normalScores{
  display: none;
  margin-left: 25px;
  margin-right: 25px;
 }
 #hardScores{
  display: none;
 }
button {
  border-radius: 20px;
  border: 3px solid yellow;
  background-color: midnightblue;
  cursor: pointer;
  font-family: "Righteous", cursive;
  color: #ffe96f;
  font-size: 25px;
  transition: 200ms;
}
button:hover{
  border: 3px solid midnightblue;
  background-color: #ffe96f;
  color: midnightblue;
}
button:focus{
  border: 3px solid midnightblue;
  background-color: #ffe96f;
  color: midnightblue;
}
button:active{
  border: 3px solid rgb(25,25, 60);
  background-color: rgb(195, 155, 0);
  color: rgb(25, 25, 60);
  transition: 0ms;
}


#submitButtonEasy{
  border-color: springgreen;
  color: springgreen;
}
#submitButtonEasy:hover{
  border: 3px solid midnightblue;
  background-color: springgreen;
  color: midnightblue;
}
#submitButtonEasy:focus{
  border: 3px solid midnightblue;
  background-color: springgreen;
  color: midnightblue;
}
#submitButtonEasy:active{
  border: 3px solid rgb(25,25, 60);
  background-color: rgb(0, 203, 101);
  color: rgb(25, 25, 60);
  transition: 0ms;
}
#submitButton{
  border-color: rgb(224, 180, 255);
  color: rgb(224, 180, 255);
}
#submitButton:hover{
  border: 3px solid midnightblue;
  background-color: rgb(224, 180, 255);
  color: midnightblue;
}
#submitButton:focus{
  border: 3px solid midnightblue;
  background-color:rgb(224, 180, 255);
  color: midnightblue;
}
#submitButton:active{
  border: 3px solid rgb(25,25, 60);
  background-color: rgb(171, 138, 194);
  color: rgb(25, 25, 60);
  transition: 0ms;
}
#submitButtonHard{
  border-color: red;
  color: red;
}
#submitButtonHard:hover{
  border: 3px solid midnightblue;
  background-color: red;
  color: midnightblue;
}
#submitButtonHard:focus{
  border: 3px solid midnightblue;
  background-color: red;
  color: midnightblue;
}
#submitButtonHard:active{
  border: 3px solid rgb(25,25, 60);
  background-color:rgb(203, 0, 0);
  color: rgb(25, 25, 60);
  transition: 0ms;
}