*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: rgb(128, 204, 255);
}

@font-face {
  font-family: BravuraText;
  src: url("../font/BravuraText.woff");
}
button {
  cursor: pointer;
}

.staveCanvas {
  position: absolute;
}

.fontHack {
  font-family: BravuraText;
}

.notesCanvas {
  position: absolute;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.homeScreen {
  background-color: rgb(128, 204, 255);
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
  row-gap: 2.4rem;
}
.homeScreen__btn {
  border-radius: 2.4rem;
  padding: 1rem 2rem;
  font-size: 2.4rem;
}

.gameSettingsScreen {
  position: absolute;
  background-color: rgb(128, 204, 255);
  height: 100%;
  width: 100%;
  display: grid;
  place-content: center;
}
.gameSettingsScreen__btn {
  padding: 1rem 2rem;
  margin-bottom: 3.2rem;
  font-size: 2.4rem;
  border-radius: 2.4rem;
}

.gameSettingsScreen__backBtn {
  color: white;
  position: absolute;
  cursor: pointer;
  margin: 1.6rem;
}
.gameSettingsScreen__backBtn--svg {
  width: 4.8rem;
  height: 4.8rem;
}

.hide {
  display: none !important;
}

.countDown {
  position: absolute;
  background-color: transparent;
  width: 100vw;
  display: grid;
  justify-content: center;
  top: 2.4rem;
  color: black;
  font-size: 6.4rem;
  opacity: 1;
  transition: opacity 2s;
}

.tunesList {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 2.4rem;
       column-gap: 2.4rem;
  align-items: center;
  font-size: 2.4rem;
  margin-bottom: 3.2rem;
}

.customTunesList {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 2.4rem;
       column-gap: 2.4rem;
  align-items: center;
  font-size: 2.4rem;
}

.addSongScreen {
  background-color: rgb(128, 204, 255);
  position: absolute;
  width: 100vw;
  height: 600rem;
  overflow: auto;
}
.addSongScreen__btns {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, max-content);
  -moz-column-gap: 2.4rem;
       column-gap: 2.4rem;
  margin-top: 1.6rem;
  margin-left: 1.6rem;
}
.addSongScreen__btns--backBtn {
  color: white;
  cursor: pointer;
  width: 2.4rem;
  height: 2.4rem;
}
.addSongScreen__btns--addNoteBtn {
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  top: 10.7rem;
  right: 17rem;
}
.addSongScreen__btns--removeNoteBtn {
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  top: 10.7rem;
  right: 17rem;
}
.addSongScreen__btns--submitSongBtn {
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  top: 10.7rem;
  right: 17rem;
}
.addSongScreen__popup {
  position: absolute;
  background-color: white;
  padding: 4rem;
  left: 50%;
  top: 18rem;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  place-content: center;
  grid-template-columns: max-content;
  text-align: center;
  row-gap: 3.2rem;
  font-size: 2.4rem;
  border-radius: 1rem;
  border: 2px solid black;
}
.addSongScreen__popup--btn {
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
}
.addSongScreen__popup--message {
  font-size: 2.4rem;
}

.gameScreen {
  position: absolute;
  height: 100%;
  width: 100%;
}
.gameScreen__backBtn {
  position: absolute;
  color: #ffffff;
  margin: 2.4rem;
  cursor: pointer;
}
.gameScreen__backBtn--svg {
  height: 4.8rem;
  width: 4.8rem;
}

.scorePopup {
  position: absolute;
  background-color: white;
  padding: 4rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  place-content: center;
  grid-template-columns: max-content;
  text-align: center;
  row-gap: 3.2rem;
  font-size: 2.4rem;
  border-radius: 1rem;
  border: 2px solid black;
}
.scorePopup__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  row-gap: 1.6rem;
}
.scorePopup__btns button {
  font-size: 1.6rem;
  padding: 1rem 2rem;
  border-radius: 2.4rem;
}/*# sourceMappingURL=style.css.map */