.body{
  background-image: url(img/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  
}

body{
  background-image: url(img/bodybackground.png);
  background-repeat: repeat;
  background-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

main{
  margin: auto;
}

.leveltolevel{
  margin: auto;
  font-size: 200%;
  color: #75043e;
  font-weight: bolder;
  font-family: cursive;
  text-align: center;
  background-color: rgb(218, 218, 218);
}

.finish{
  
  font-size: 300%;
  color: rgb(230, 230, 250);
  font-weight: bolder;
  font-family: cursive;
  background-color: rgb(0, 0, 0);
  
}


.level1 {
  display: flex;
  flex-wrap: wrap;
  width: calc(10*40px);
}

.level2 {
  display: flex;
  flex-wrap: wrap;
  width: calc(24*40px);
}

.level3 {
  display: flex;
  flex-wrap: wrap;
  width: calc(10*40px);
}
.level4 {
  display: flex;
  flex-wrap: wrap;
  width: calc(10*40px);
}
.level5 {
  display: flex;
  flex-wrap: wrap;
  width: calc(15*40px);
}
.level6 {
  display: flex;
  flex-wrap: wrap;
  width: calc(10*40px);
}.level7 {
  display: flex;
  flex-wrap: wrap;
  width: calc(10*40px);
}.level8 {
  display: flex;
  flex-wrap: wrap;
  width: calc(25*40px);
}.level9 {
  display: flex;
  flex-wrap: wrap;
  width: calc(20*40px);
}.level10 {
  display: flex;
  flex-wrap: wrap;
  width: calc(21*40px);
}.level11 {
  display: flex;
  flex-wrap: wrap;
  width: calc(19*40px);
}.level12 {
  display: flex;
  flex-wrap: wrap;
  width: calc(20*40px);
}.level13 {
  display: flex;
  flex-wrap: wrap;
  width: calc(20*40px);
}.level14 {
  display: flex;
  flex-wrap: wrap;
  width: calc(20*40px);
}
.level15 {
  display: flex;
  flex-wrap: wrap;
  width: calc(19*40px);
}.level16 {
  display: flex;
  flex-wrap: wrap;
  width: calc(19*40px);
}

.tile {
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: rgb(228, 228, 228);
  box-sizing: border-box;
}

.wall {
  background-image: url(img/wall.png);
  background-size: cover;
}.toprak {
  background-image: url(img/toprak.jpg);
  background-size: cover;
}.yol {
  background-image: url(img/yol.jpg);
  background-size: cover;
}.zindan {
  background-image: url(img/zindan.png);
  background-size: cover;
}.saksı {
  background-image: url(img/saksı.jpg);
  background-size: cover;
}
.yabaniçiçek {
  background-image: url(img/yabaniçiçek.png);
  background-size: cover;
}
.tersyabaniçiçek {
  background-image: url(img/tersyabaniçiçek.png);
  background-size: cover;
}.solyabaniçiçek {
  background-image: url(img/solyabaniçiçek.jpg);
  background-size: cover;
}.sağyabaniçiçek {
  background-image: url(img/sağyabaniçiçek.jpg);
  background-size: cover;
}
.dikenlikaplumbağa {
  background-image: url(img/dikenlikaplumbağa.png);
  background-size: cover;
}.dikenlikaplumbağasağ {
  background-image: url(img/dikenlikaplumbağasağ.png);
  background-size: cover;
}.tersdikenlikaplumbağa {
  background-image: url(img/tersdikenlikaplumbağa.png);
  background-size: cover;
}
.hayaletsol{
  background-image: url(img/hayaletsol.png);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hayaletsağ{
  background-image: url(img/hayaletsağ.png);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.solboss {
  background-image: url(img/solboss.png);
  background-size: cover;
}
.sağboss {
  background-image: url(img/sağboss.png);
  background-size: cover;
}
.path {
  background-color: rgb(228, 228, 228);
}
.path2 {
  background-image: url(img/tile2.jpg);
}
.start {
  background-color: rgb(83, 83, 83);
}
.altın{
  background-image: url(img/marioaltın.png);
  background-size: cover;
}
.kalp{
  background-image: url(img/mariocan.png);
  background-size: cover;
}
.treasure {
  background-image: url(img/Treasure.png);
  background-size: cover;
}.altıntreasure {
  background-image: url(img/altıntreuser.jpeg);
  background-size: cover;
}

.border {
  background-image: url(img/Border.png);
  background-size: cover;
}
.maviportal {
  background-image: url(img/portalmavi.jpg);
  background-size: cover;
}.kırmızıportal {
  background-image: url(img/portalkırmızı.png);
  background-size: cover;
}.yeşilportal {
  background-image: url(img/portalyeşil.png);
  background-size: cover;
}
.player {
  background-image: url(img/mario.png);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.playersol {
  background-image: url(img/mariosol.png);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.prenses {
  background-image: url(img/prenses.png);
  background-size: cover;
}
.prensessağ {
  background-image: url(img/prensessağ.png);
  background-size: cover;
}
.explanations{
  color: #75043e;
  background-color: rgb(245, 245, 245);
  width: 350px;
  font-size: 150%;
  text-align: center;
  font-family: cursive;
  font-style: italic;
  font-weight: bold;
  position: fixed;
  top: 10px; /* Adjust the top position as needed */
  left: 10px;
  z-index: 2;
}
#playButton {
  margin-top: 100px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed; /* Sabit bir konumda tutun */
  top: 20px; /* Ayarlamaları istediğiniz gibi yapabilirsiniz */
  left: 20px; /* Ayarlamaları istediğiniz gibi yapabilirsiniz */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(28, 156, 207);
  color: white;
  border: none;
  outline: none;
  z-index: 3; /* explanations ve önceki z-index değerinden daha yüksek bir değer ekleyin */
}

#playButton::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#playButton.stopped::before {
  opacity: 1;
}