*{ color: black; font-size: 30px; } body{ overflow: hidden; } #spielRaum{ width: 1000px; height: 800px; margin: auto; background-image: url("../pics/background.jpg"); position: relative; } body{ height: 100%; margin: 0px; } #tom img{ width: 300px; } #tom{ position: fixed; display: none; } #fuchs { position: relative; bottom: -400px; z-index: 59; } #fuchs img{ width: 200px; left: 50px; z-index: 60; } #enemy img{ width: 220px; z-index: 51; } #enemy{ position: relative; width: 20%; float: right; z-index: 50; } #enemyZahl{ text-align: center; color: white; text-shadow: 2px 2px 2px black, -2px 2px 2px black, 2px -2px 2px black, -2px -2px 2dvi black; font-weight: bold; } .flexbox{ display: flex; flex-direction: row; } #rechnungen{ padding: 0px; position: relative; top: 1px; justify-content: space-between; width: 100%; } #rechnung1, #rechnung2 { width: 20%; padding: 20px; text-align: center; z-index: 10; position: relative; } #rechnung1{ background-color: rgb(0, 225, 255); border-radius: 15px; outline: 8px solid black; left: 20px; } #rechnung2{ background-color: red; border-radius: 15px; outline: 8px solid black; right: 20px; } #fuchsZahl{ padding-left: 100px; font-size: 40px; font-weight: bold; width: 10%; z-index: 59; color: white; text-shadow: 2px 2px 2px black, -2px 2px 2px black, 2px -2px 2px black, -2px -2px 2dvi black; } #hitbox1, #hitbox2{ width: 50px; height: 10px; } #restartButton { width: 200px; height: 100px; position: relative; left: 40%; top: -10%; display:none; background-color: orange; border-radius: 15px; outline: 8px solid black; } #winText, #loseText{ width: 30%; display: none; position: relative; text-align: center; top: -15%; left: 35%; background-color: white; border-radius: 15px; outline: 8px solid black; }