/* #### Generated By: http://www.fontget.com #### */

@font-face {
  font-family: "Stranger Things.ttf";
  font-style: normal;
  font-weight: normal;
  src: local("Stranger Things.ttf"), url("Stranger Things.woff") format("woff");
}
@font-face {
  font-family: "Stranger Things Outlined.ttf";
  font-style: normal;
  font-weight: normal;
  src: local("Stranger Things Outlined.ttf"),
    url("Stranger Things Outlined.woff") format("woff");
}

/* inicial adjustments */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-image: url("../Resources/img/upside-down-house-pixel-art.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  margin-bottom: 160px;

  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
}

/* basic visualization screen config (tv-frame + tv-screen) */
.container {
  background-image: url("../Resources/img/old-tv-frame-pixel-art-with-extra-screen.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  width: 1000px;
  height: 680px;
  margin-top: 150px;
  filter: drop-shadow(15px 15px 25px #180e01);
  position: relative;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.tv-frame-screen {
  width: 520px;
  height: 365px;
  border: 5px solid #061002;
  border-radius: 55px;
  overflow: hidden;

  position: absolute;
  left: 126px;
  bottom: 135px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#timeRemaining {
  color: #545e4e;
  font-family: "Pixelify Sans";
  font-size: 35px;
  position: absolute;
  right: 95px;
  top: 210px;
}

#btnAmbientSound {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  font-family: "Pixelify Sans";
  font-size: 19px;
  color: #545e4e;

  position: absolute;
  top: 400px;
  right: 70px;
}

#btnAmbientSound:hover {
  text-shadow: 0px 0px 5px #5f6e57;
}

/* initial screen section */
#initial-screen {
  display: flex; /* initial value = flex */
}

#main-initial-screen {
  background-image: url("../Resources/img/eddie-guitar-moc-pixel-art.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-logo {
  width: 100%;
  height: auto;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#stranger-strings-logo {
  width: 190px;
  filter: drop-shadow(0px 0px 5px #ff0000);
}

#subtitle-logo {
  color: #d5d5d5;
  font-size: 16px;
  text-shadow: 0px 0px 10px #ff0000;
  margin-bottom: 10px;
}

.btn-section {
  width: 100%;
  height: 90px;
  background-color: black;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-section button {
  color: white;
  padding: 5px;
  background-color: #0000;
  font-family: "Stranger Things.ttf";
  font-size: 17px;
  border-radius: 5px;

  transition: 0.3s;
}

.btn-section button:hover {
  text-shadow: 0px 0px 5px #fff;
  background: linear-gradient(
    to top,
    #240000,
    #340000,
    #930606,
    #e40202,
    #ff0000
  );
}

/* game screen section */
#game-screen {
  display: none; /* initial value = none */
}

#game-background {
  background-image: url("../Resources/img/upside-down-eddiesCaravan-stranger-thins.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#game-box * {
  pointer-events: none;
}

#game-box {
  width: 100%;
  height: 93%;
  border-radius: 55px 55px 15px 15px;
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* game over screen section */
#game-over-screen {
  display: none; /* initial value = none */
}

#game-over-background {
  background-image: url("../Resources/img/stranger-things-gif-wiliamsHouse-upside-down.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  justify-content: space-between;
}

#game-over-message-img {
  width: 110px;
  filter: drop-shadow(0px 0px 5px #ff0000);
}

/* Instructions Screen Section */
#instructions-screen {
  display: none; /* initial value = none; */
}

#instructions-background {
  background-image: url("../Resources/img/max-upside-down-world-stranger-things.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#keyboard-img {
  width: 400px;
  filter: drop-shadow(17px 17px 7px black);

  position: absolute;
  top: 20px;
}

#wasd-keys-gif {
  width: 150px;
  filter: drop-shadow(0px 0px 10px red);

  position: absolute;
  bottom: 35px;
  left: 45px;
}

#space-bar-key-img {
  width: 150px;
  filter: drop-shadow(0px 0px 10px red);

  position: absolute;
  bottom: 90px;
  right: 50px;
}

.p-container {
  color: white;
  font-size: 17px;
  position: absolute;
}

#key-text-jump {
  bottom: 150px;
  left: 100px;
}

#key-text-left {
  bottom: 77px;
  left: 10px;
}

#key-text-right {
  bottom: 77px;
  left: 190px;
}

#key-text-atack {
  bottom: 65px;
  right: 100px;
}

#return-btn {
  width: 100px;

  color: white;
  padding: 5px;
  background-color: transparent;
  font-family: "Stranger Things.ttf";
  font-size: 17px;
  border-radius: 5px;

  transition: 0.3s;

  position: absolute;
  bottom: 10px;
}

#return-btn:hover {
  text-shadow: 0px 0px 5px #fff;
  background: linear-gradient(
    to top,
    #240000,
    #340000,
    #930606,
    #e40202,
    #ff0000
  );
}