body {
  font-family: sans-serif;
  background-color: rgb(0, 0, 0);
}

.pixelFont{
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
}

.gameFont {
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
}

.gameFontRed {
  font-family: "Sixtyfour Convergence", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0,
    "XELA" 0,
    "YELA" 0;
}


.codeFont {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


canvas{
  margin-top: 19px;
  background-color: rgb(51, 51, 102);
}

#screen{
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: center;  
}


#screenlines, #bezel{
  position: absolute;
  width: 1050px;
  height: 657px;
  z-index: 10;
  border-radius: 30px;

  pointer-events: none; /* This is important for my case because there are pictures above some text and buttons. And the problem with buttons is that they then weren't clickable. So this wonderful Attribute makes the pictures "invisible" for the cursor. So now the cursor can interact with the buttons. */
}

.opacity{
  opacity: 0.6;
}


#canvasBox{
  margin-top: 10px;
  width: 1000px;
  height: 620px;
}

.backgroundImage{
  background-image: url("./images/startScreen.png");
  background-repeat: no-repeat;
}

.backgroundColor{
  background-color: #150DF7;
}

.hidden{
  display: none !important;
}

#startGame, #gameOverScreen, #helpPage, #inputScreen{
  position: absolute;
  top: 90px;
  justify-items: center;
}

h1, h2{
  color: white;
  font-size: 50px;
  anchor-name: --fixPos;
}

button, input{
  font-size: 20px;
  width: 240px;
  height: 45px;
  margin: 10px;
  border: solid rgb(82, 82, 82) 3px;
}

button:hover{
  background-color: rgb(204, 204, 204);
  cursor: pointer;
  
}

#startButtons{
  position: absolute;
  top: 200px;
  right: 240px;
}

#startCredits{
  position: absolute;
  color: white;
  font-size: 11px;

  right: -100px;
  bottom: -430px;
}

#gameOverButtons{
  position: absolute;
  top: 200px;
  right: 90px;
}

#buttonHighScores{
  font-size: 13px;
  height: 40px;
  width: 170px;
}

#highScoreScreen{
  position: absolute;
  color: white;
  top: 82px;
}

#highScoreBox{
  display: flex;
  justify-content: center;
  gap: 50px;
}

#highScoreNumbers, #highScoreList{
  font-size: 27px;
}

#buttonHighScoreBack{
  font-size: 13px;
  height: 40px;
  width: 170px;
}

.buttonBottomLeft{
  position: absolute;
  position-anchor: --fixPos;
  margin-top: 560px;
  margin-left: 50px;
}


#storyScreen{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #151812;
  color: #557c42;
}

#storyText{
  margin: 40px;
  font-size: 29px;
  white-space: pre-wrap; /* Without it the text would be without any space in between */
}

#storyText > p{
  margin: 10px;
}

#storyButton{
  color: #94c57d;
  background-color: #24371b;
  border: solid #557c42;
  font-family: "Press Start 2P";
  margin: 20px;
  margin-left: 80px;
  
  transition-duration: 0.2s;

  box-shadow: #94c57d48 0px 0px 20px;
}

#storyButton:hover{
  transition-duration: 0.2s;
  background-color: #304a25;
  box-shadow: #94c57d48 0px 0px 30px;
}

#storyButton:active{
  margin-top:22px;
}

#helpPage{
  top: 82px;
  color:white;
  text-align: center;
}

#helpPage1{
  display: flex;
  flex-direction: column;
  align-items: center;
}

h3{
  text-align: center;
  font-size: 20px;
}

.imageMargin{
  margin-top: 10px;
  margin-bottom: 10px;
}

#helpPage2{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#helpPage3{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#helpPage4{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gameOverScore{
  color: white;
  margin-top: 30px;
}

.jumpScare {
  position: absolute;
  top: 10px;
  left: -220px;
  right: 0px;
}

#inputScreen{
  top: 83px;
  color: white;
}

input{
  border-radius: 7px;
  margin-left: 120px;
  margin-top: 50px;
  text-align: center;
}

.uppercase{
  text-transform: uppercase;
}

#gameOverText{
  position: absolute;
  color:rgb(127, 127, 127);
  width: 800px;
  top: 400px;
  margin: auto;
}