@font-face {
  font-family: RobotoMedium;
  src: url("../../assets/fonts/Roboto-Medium.ttf");
}
@font-face {
  font-family: RobotoRegular;
  src: url("../../assets/fonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: GiveYouGlory;
  src: url("../../assets/fonts/GiveYouGlory-Regular.ttf");
}
h1 {
  font-family: GiveYouGlory;
  font-size: 6em;
  text-transform: lowercase;
}

h1.smaller {
  font-size: 4em;
  text-transform: lowercase;
}

h1.smallest {
  font-size: 2em;
  text-transform: lowercase;
}

h2 {
  color: #797979;
  font-size: 2.5em;
}

p {
  color: #797979;
  font-size: 1.5em;
}

p.smaller {
  font-size: 1em;
}

p.bigger {
  font-size: 3em;
}

button {
  border: 3px dotted #A7A7A7;
  border-radius: 0px;
  font-family: RobotoRegular;
  font-size: 2em;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.5s;
}

button:hover, .btn:focus, .btn:active, .btn.active {
  background: white;
}

button:active, .btn.active {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

.btn-lg {
  padding-right: 40px;
  padding-left: 40px;
  font-size: 2.5em;
}

.btn-sm {
  font-size: 1em;
  border: 2px dotted #A7A7A7;
}

.btn-green {
  color: #A0C814;
}

.btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active {
  color: white;
  border: 3px dotted white;
  background: #A0C814;
  box-shadow: none;
}

.btn-confirm {
  background: #A0C814;
  border: 3px dotted white;
  color: white;
  border-radius: 30px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.4em;
  transition: all 0.1s;
}

.btn-confirm:active, .btn-confirm.active {
  background: #bee926;
  color: white;
  box-shadow: none;
}

.btn-confirm:hover, .btn:focus, .btn-confirm:active, .btn-confirm.active {
  background: #a4cd14;
  border: 3px solid white;
  color: white;
  box-shadow: none;
}

.go-button:hover, .go-button:focus, .go-button:active, .go-button.active {
  background: #A0C814;
  border: none;
  color: white;
  transform: translateY(2px);
  box-shadow: 5px 7px 2px #797979, white 0px 1px 5px inset;
}

.go-button {
  position: fixed;
  bottom: 50px;
  right: 50px;
  border: none;
  background: #A0C814;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.1s;
  box-shadow: 5px 7px 15px #797979, white 0px 1px 5px inset;
}
.go-button h1 {
  color: white;
  font-size: 2em;
}

.repeat {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.1s;
  box-shadow: 2px 5px 10px #A7A7A7, #c1c1c1 0px 1px 5px inset;
  font-size: 1em;
}
.repeat img {
  width: 20px;
}
.repeat img, .repeat p {
  transform: translateY(8px);
}

.repeat-active {
  transform: translateY(2px);
  box-shadow: 1px 3px 2px #797979, #c1c1c1 0px 1px 5px inset;
}

#reset {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 5px;
  left: 5px;
  background: white;
  border: none;
  border-radius: 20px;
  height: 40px;
  padding: 0 15px;
  box-shadow: 2px 5px 10px #A7A7A7, #c1c1c1 0px 1px 5px inset;
}
#reset img {
  width: 20px;
}
#reset p {
  color: #A7A7A7;
  transform: translateY(8px);
  margin-left: 10px;
  margin-right: 5px;
  font-size: 0.5em;
}

#reset:hover, #reset:focus, #reset:active, #reset.active {
  transform: translateY(2px);
  box-shadow: 1px 3px 2px #797979, #c1c1c1 0px 1px 5px inset;
}

.round-next-button:hover, .round-next-button:focus, .round-next-button:active, .round-next-button.active {
  background: #A7A7A7;
  border: none;
  color: white;
  transform: translateY(2px);
  box-shadow: 5px 7px 2px #797979, white 0px 1px 5px inset;
}

.round-next-button {
  border: none;
  margin-top: 50px;
  background: #A7A7A7;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.1s;
  box-shadow: 5px 7px 10px #797979, white 0px 1px 5px inset;
}
.round-next-button h1 {
  color: white;
  font-size: 1.8em;
  transform: translateY(10px);
}

.result-button {
  background: #A7A7A7;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-flex;
  margin: 0 10px;
  justify-content: center;
  padding: 10px;
  align-items: center;
  transition: all 0.1s;
  box-shadow: 5px 7px 15px #797979, white 0px 1px 5px inset;
}
.result-button h1 {
  transform: translateY(5px);
}

.result-button.green {
  background: #A0C814;
}

.skip-audio-div {
  position: fixed;
  display: inline;
  text-align: right;
  bottom: 8px;
  right: 5px;
  max-width: 50%;
}

#skip-audio {
  border: none;
  border-radius: 15px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.1s;
  box-shadow: 2px 5px 10px #A7A7A7, #c1c1c1 0px 1px 5px inset;
  font-size: 1em;
  height: 40px;
}
#skip-audio p {
  transform: translateY(8px);
  color: #A7A7A7;
}

#skip-audio:hover, #skip-audio:focus, #skip-audio:active, #skip-audio.active {
  transform: translateY(2px);
  box-shadow: 1px 3px 2px #797979, #c1c1c1 0px 1px 5px inset;
}

#container-00 {
  background-color: #A0C814;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: end;
  align-items: end;
}
#container-00 #loaded-value {
  align-self: end;
}
#container-00 p {
  color: white;
}

#underscore {
  width: 80%;
  transform: translateY(-2em);
}

#fun-span {
  font-family: GiveYouGlory;
  font-size: 4em;
  font-weight: bolder;
  color: #A0C814;
  transform: rotate(-25deg) translate(110px, -1px);
}

.placeholder {
  height: 1.5em;
  width: 100px;
  display: inline-flex;
  justify-content: between;
  background: #A0C814;
  color: white;
  opacity: 1;
  padding: 0 10px;
  border-radius: 5px;
  font-family: GiveYouGlory;
}

#playBtnDiv.animate__bounceOut {
  --animate-duration: 0.5s;
}

.loader {
  padding: 40px;
  width: calc(30 * 10px + 40px);
  height: calc(100px + 40px);
  position: relative;
}

.loader span {
  display: block;
  bottom: 50%;
  width: 9px;
  height: 5px;
  background: #A7A7A7;
  position: absolute;
}

.playing {
  animation: soundBar 3s infinite ease-in-out;
}

span:nth-child(1) {
  left: 20px;
  animation-delay: 0s;
}

span:nth-child(2) {
  left: 30px;
  animation-delay: 0.1s;
}

span:nth-child(3) {
  left: 40px;
  animation-delay: 0.2s;
}

span:nth-child(4) {
  left: 50px;
  animation-delay: 0.3s;
}

span:nth-child(5) {
  left: 60px;
  animation-delay: 0.4s;
}

span:nth-child(6) {
  left: 70px;
  animation-delay: 0.5s;
}

span:nth-child(7) {
  left: 80px;
  animation-delay: 0.6s;
}

span:nth-child(8) {
  left: 90px;
  animation-delay: 0.7s;
}

span:nth-child(9) {
  left: 100px;
  animation-delay: 0.8s;
}

span:nth-child(10) {
  left: 110px;
  animation-delay: 0.9s;
}

span:nth-child(11) {
  left: 120px;
  animation-delay: 1s;
}

span:nth-child(12) {
  left: 130px;
  animation-delay: 1.1s;
}

span:nth-child(13) {
  left: 140px;
  animation-delay: 1.2s;
}

span:nth-child(14) {
  left: 150px;
  animation-delay: 1.3s;
}

span:nth-child(15) {
  left: 160px;
  animation-delay: 1.4s;
}

span:nth-child(16) {
  left: 170px;
  animation-delay: 1.5s;
}

span:nth-child(17) {
  left: 180px;
  animation-delay: 1.6s;
}

span:nth-child(18) {
  left: 190px;
  animation-delay: 1.7s;
}

span:nth-child(19) {
  left: 200px;
  animation-delay: 1.8s;
}

span:nth-child(20) {
  left: 210px;
  animation-delay: 1.9s;
}

span:nth-child(21) {
  left: 220px;
  animation-delay: 2s;
}

span:nth-child(22) {
  left: 230px;
  animation-delay: 2.1s;
}

span:nth-child(23) {
  left: 240px;
  animation-delay: 2.2s;
}

span:nth-child(24) {
  left: 250px;
  animation-delay: 2.3s;
}

span:nth-child(25) {
  left: 260px;
  animation-delay: 2.4s;
}

span:nth-child(26) {
  left: 270px;
  animation-delay: 2.5s;
}

span:nth-child(27) {
  left: 280px;
  animation-delay: 2.6s;
}

span:nth-child(28) {
  left: 290px;
  animation-delay: 2.7s;
}

span:nth-child(29) {
  left: 300px;
  animation-delay: 2.8s;
}

span:nth-child(30) {
  left: 310px;
  animation-delay: 2.9s;
}

@keyframes soundBar {
  0%, 30%, 80% {
    height: 5px;
    background: #A7A7A7;
    transform: translateY(0);
  }
  10%, 50%, 90% {
    height: 100px;
    background: #A0C814;
    transform: translateY(47.5px);
  }
  20%, 70%, 100% {
    height: 5px;
    background: #A7A7A7;
    transform: translateY(0);
  }
}
.progressBar {
  width: calc(30 * 10px + 40px);
  margin-top: 30px;
  height: 15px;
  background: #f2f2f2;
  box-shadow: 2px 5px 10px #A7A7A7, #c1c1c1 0px 1px 5px inset;
  border-radius: 7px;
  position: relative;
}

.progression {
  width: 0%;
  height: 100%;
  background: #A0C814;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 7px;
  box-shadow: white 0px 1px 5px inset;
}

.image-holder {
  height: 220px;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  border: solid 5px #c1c1c1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
  transition: all 0.3s;
}
.image-holder img {
  pointer-events: none;
  height: 85%;
  width: auto;
}
.image-holder p {
  pointer-events: none;
  transform: translateY(15px);
}

.image-holder.smaller-height {
  height: 200px;
}

.image-selected {
  border: solid 8px #A0C814;
}
.image-selected .btn-confirm {
  position: absolute;
  bottom: 10px;
}

#round-count, #timer {
  padding-top: 15px;
}
#round-count p, #timer p {
  color: white;
}

#round-count {
  background: #c1c1c1;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 20px 0;
}

#timer {
  background: #A0C814;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0 0 20px;
  transition: all 0.5s;
}

.orangeBox {
  background: #F4AA45 !important;
}

.redBox {
  background: #F18E87 !important;
}

.difficulty {
  padding: 10px;
  padding-top: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.difficulty p {
  font-size: 1.8em;
  font-weight: bolder;
}

.difficulty-selected {
  border: 3px dotted #A7A7A7;
}

#easy p {
  color: #A0C814;
}

#medium p {
  color: #F4AA45;
}

#hard p {
  color: #F18E87;
}

html, body {
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

body {
  font-family: RobotoRegular;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  background: url("../../assets/images/general/paper.jpg") repeat;
  padding-top: 10vh;
  touch-action: manipulation;
}

#logo {
  position: fixed;
  top: 2vh;
  left: 0;
  height: 15vh;
  z-index: 1000;
  text-align: center;
}
#logo img {
  height: 10vh;
}

.rotate-container {
  display: none;
  padding: 50px;
}
.rotate-container h1 {
  font-size: 3em;
}

@media screen and (orientation: landscape) {
  .container {
    display: none;
  }

  .rotate-container {
    display: block;
  }
}

/*# sourceMappingURL=style.css.map */