@font-face {
  font-family: f;
  src: url("media/font/PressStart2P.ttf");
}
body {
  padding: 0;
  margin: 0;
}

body ::selection {
  color: white;
  background-color: rgba(135, 207, 235, 0.775);
}

::-webkit-scrollbar {
  background: transparent;
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 5px;
}

#full-area {
  width: 100%;
  height: 100vh;
  user-select: none;
  background: black;
}
#full-area #full-bg {
  width: 100%;
  height: 100%;
  background: url("media/bg2.webp");
  background-size: cover;
  background-position: center center;
}
#full-area #full-bg div {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.865);
}
#full-area #game-area {
  width: 658px;
  height: 419px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.829);
  background: rgba(255, 255, 255, 0.18);
}
#full-area #game-area #home-page {
  width: 100%;
  height: 100%;
  background: url("media/example 1.webp");
  background-size: cover;
  position: absolute;
  z-index: 90;
}
#full-area #game-area #home-page #home-page-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#full-area #game-area #home-page #home-page-menu button {
  width: 88px;
  height: 35px;
  border: none;
  background: url("media/play button.webp");
  background-size: cover;
  margin-top: -55px;
  outline: none;
  margin: 0;
  position: absolute;
  margin-top: -55px;
  margin-left: -42px;
}
#full-area #game-area #home-page #home-page-menu button:hover {
  filter: brightness(1.2);
}
#full-area #game-area #character-section {
  width: 100%;
  height: 100%;
  background: url("media/example 4.webp");
  background-size: cover;
  position: absolute;
  z-index: 90;
  display: none;
}
#full-area #game-area #character-section #chooseRory {
  width: 80px;
  position: absolute;
  top: 145px;
  left: 200px;
  cursor: pointer;
  opacity: 0.7;
}
#full-area #game-area #character-section #chooseRory:hover {
  filter: brightness(1.2);
  opacity: 1;
}
#full-area #game-area #character-section #rory-p, #full-area #game-area #character-section #emily-p {
  font-family: f;
  font-size: 12px;
  text-align: center;
  width: 150px;
  line-height: 15px;
  position: absolute;
  top: 190px;
  left: 70px;
  color: black;
  font-weight: 500;
  z-index: 2;
}
#full-area #game-area #character-section #emily-p {
  left: 430px;
}
#full-area #game-area #character-section #chooseEmily {
  width: 80px;
  position: absolute;
  top: 150px;
  left: 360px;
  cursor: pointer;
  opacity: 0.7;
}
#full-area #game-area #character-section #chooseEmily:hover {
  filter: brightness(1.2);
  opacity: 1;
}
#full-area #game-area #character-section #emilySelect {
  width: 190px;
  position: absolute;
  top: 134px;
  left: 305px;
  cursor: pointer;
  display: none;
}
#full-area #game-area #character-section #emilySelect:hover {
  filter: brightness(1.2);
}
#full-area #game-area #character-section #rorySelect {
  width: 200px;
  position: absolute;
  top: 125px;
  left: 140px;
  cursor: pointer;
  display: none;
}
#full-area #game-area #character-section #rorySelect:hover {
  filter: brightness(1.2);
}
#full-area #game-area #character-section button {
  width: 88px;
  height: 35px;
  background: url("media/play button.webp");
  background-size: cover;
  margin-top: -55px;
  outline: none;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(-170%);
  border: none;
}
#full-area #game-area #character-section button:hover {
  filter: brightness(1.2);
}
#full-area #game-area #play-page {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.335);
  position: absolute;
  display: none;
}
#full-area #game-area #play-page #nayzek {
  width: 150px;
  position: absolute;
  z-index: 4;
  left: 660px;
  top: -60px;
}
#full-area #game-area #play-page #levelAnimation {
  position: absolute;
  width: 100%;
  z-index: 2;
}
#full-area #game-area #play-page #level {
  height: 30px;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
}
#full-area #game-area #play-page #treasureText {
  font-size: 10px;
}
#full-area #game-area #play-page #treasureText img {
  width: 30px;
  margin: -3px 0 0 -15px;
}
#full-area #game-area #play-page #lifes {
  position: absolute;
  z-index: 2;
  margin: 10px;
}
#full-area #game-area #play-page #lifes img {
  width: 30px;
}
#full-area #game-area #play-page p {
  font-family: f;
  position: absolute;
  z-index: 2;
  color: white;
  width: 100%;
  text-align: center;
  top: 40px;
  letter-spacing: 3px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.541);
}
#full-area #game-area #play-page p img {
  width: 20px;
  margin: -6px 0 0 -20px;
}
#full-area #game-area #play-page #score {
  text-align: center;
  color: white;
  font-size: 25px;
  font-weight: 700;
  margin-top: 10px;
  position: absolute;
  width: 100%;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.559);
  z-index: 2;
  display: none;
  font-family: f;
}
#full-area #game-area #play-page #character {
  position: absolute;
  z-index: 2;
}
#full-area #game-area #play-page #character img {
  width: 40px;
  position: absolute;
  top: 242px;
  left: 70px;
  left: 370px;
  filter: grayscale(0);
}
#full-area #game-area #play-page #character #character-elem1 {
  width: 25px;
  height: 65px;
  position: absolute;
  z-index: 3;
  top: 243px;
  left: 80px;
}
#full-area #game-area #play-page #obstacles {
  width: 1000000px;
  height: 100%;
  background: url("media/bg.webp");
  left: 0px;
  position: absolute;
}
#full-area #game-area #play-page #obstacles #endtreasure {
  position: absolute;
  left: 450px;
  height: 333px;
}
#full-area #game-area #play-page #obstacles #building, #full-area #game-area #play-page #obstacles .coin, #full-area #game-area #play-page #obstacles .poision, #full-area #game-area #play-page #obstacles .bomb, #full-area #game-area #play-page #obstacles .bombExpo {
  height: 50px;
  position: absolute;
  left: 100%;
  top: 240px;
}
#full-area #game-area #play-page #obstacles .bombExpo {
  height: 100px;
  top: 220px;
  z-index: 3;
}
#full-area #game-area #play-page #obstacles #plane {
  width: 60px;
  position: absolute;
  left: 100%;
  top: 355px;
  z-index: 3;
}
#full-area #game-area #play-page #obstacles .hurdle {
  height: 60px;
  position: absolute;
  top: 170px;
  left: 50px;
  border-radius: 1px;
}
#full-area #game-area #over-page {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.543);
  position: absolute;
  z-index: 100;
  display: none;
}
#full-area #game-area #over-page #over-page-content {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
#full-area #game-area #over-page #over-page-content img {
  width: 430px;
  margin-top: -130px;
}
#full-area #game-area #over-page #over-page-content button {
  position: absolute;
  outline: none;
  width: 88px;
  height: 30px;
  background: url("media/replay button.webp");
  background-size: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.401);
  margin: 0;
  border: none;
}
#full-area #game-area #over-page #over-page-content button:hover {
  filter: brightness(1.2);
}
#full-area #game-area #over-page #over-page-content #replay {
  width: 82px;
  height: 33px;
  left: 85px;
  top: 5px;
}
#full-area #game-area #over-page #over-page-content #rewrite {
  background: url("media/rewrite buttom.webp");
  background-size: cover;
  width: 83px;
  height: 33px;
  left: 265px;
  top: 5px;
}
#full-area #game-area #over-page #over-page-content #exit {
  background: url("media/exit buttom.webp");
  background-size: cover;
  width: 81px;
  height: 34px;
  left: 176px;
  top: 65px;
}
#full-area #game-area #submit-page {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.616);
  position: absolute;
  z-index: 100;
}
#full-area #game-area #submit-page form {
  background: #0a0724ac;
  border: 2px solid white;
  box-shadow: 0 0 10px #0a0724;
  color: white;
  width: 45%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 3px;
}
#full-area #game-area #submit-page form #quit-submit {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -20px 0 0 -20px;
  cursor: pointer;
  display: none;
}
#full-area #game-area #submit-page form h1 {
  text-align: center;
  border-radius: 3px;
  letter-spacing: 1px;
  font-size: 30px;
  font-weight: 700;
}
#full-area #game-area #submit-page form p {
  text-align: center;
  letter-spacing: 1.5px;
  font-size: 15px;
  margin-top: -10px;
}
#full-area #game-area #submit-page form div {
  justify-content: left;
  margin: 0 auto;
  display: flex;
}
#full-area #game-area #submit-page form div label {
  font-weight: 500;
  margin-right: 15px;
  letter-spacing: 0.5px;
  font-size: 17px;
  width: 115px;
  text-align: right;
  margin-top: 5px;
}
#full-area #game-area #submit-page form div input {
  border: none;
  border-radius: 3px;
  outline: none;
  padding-left: 5px;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.788);
  width: 200px;
}
#full-area #game-area #submit-page form #submit, #full-area #game-area #submit-page form button {
  border: 2px solid white;
  box-shadow: 0 0 5px #0a0724;
  background: transparent;
  color: white;
  border-radius: 3px;
  padding: 2px 100px;
  outline: none;
  background: #0a0724;
  color: white;
  font-weight: 700;
  justify-content: center;
  margin: 0 auto;
  display: flex;
  margin-top: 15px;
  width: 60%;
  cursor: pointer;
}
#full-area #game-area #submit-page form #submit:hover, #full-area #game-area #submit-page form button:hover {
  transform: scale(1.02);
  transition: 0.2s;
}
#full-area #game-area #leaderboard-page {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.616);
  position: absolute;
  z-index: 80;
  display: none;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content {
  background: #0a0724b8;
  border: 2px solid white;
  box-shadow: 0 0 10px #0a0724;
  color: white;
  width: 45%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  overflow: hidden;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content #quit-leaderboard {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 5px 0 0 321px;
  cursor: pointer;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content h1 {
  font-size: 25px;
  border-bottom: 2px solid white;
  padding: 5px 10px;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content #players-list {
  height: 250px;
  overflow: hidden;
  overflow-y: scroll;
  padding-bottom: 10px;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content #players-list #player {
  display: flex;
  padding: 0 10px;
  font-weight: 500;
  justify-content: space-between;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content #players-list #player #player-score {
  position: relative;
  margin-left: -10px;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content #players-list #player #player-rank {
  margin-right: 5px;
  width: 85%;
  height: 23px;
  overflow: hidden;
  display: flex;
}
#full-area #game-area #leaderboard-page #leaderboard-page-content #players-list #player #player-rank span {
  margin-left: 5px;
}

#leaderboard-page-content-play {
  background: #0a0724b8;
  border: 2px solid white;
  box-shadow: 0 0 10px #0a0724;
  color: white;
  width: 45%;
  position: absolute;
  left: 87%;
  top: 20%;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 3px;
  overflow: hidden;
  overflow-y: scroll;
  display: none;
  z-index: 2;
}
#leaderboard-page-content-play #quit-leaderboard-play {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 5px 0 0 321px;
  cursor: pointer;
}
#leaderboard-page-content-play h1 {
  font-size: 25px;
  border-bottom: 2px solid white;
  padding: 5px 10px;
}
#leaderboard-page-content-play #players-list-play {
  height: 250px;
  overflow: hidden;
  overflow-y: scroll;
  padding-bottom: 5px;
}
#leaderboard-page-content-play #players-list-play #player {
  display: flex;
  padding: 0 10px;
  font-weight: 500;
  justify-content: space-between;
}
#leaderboard-page-content-play #players-list-play #player #player-score {
  margin-left: -10px;
}
#leaderboard-page-content-play #players-list-play #player #player-rank {
  margin-right: 5px;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

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