body {
    background-image: url('assets/background.png');
    font-family: 'Courier New', Courier, monospace;
    color: red;
    text-align: center;
}
#headText {
    font-size: 100px;
}
#askButton {
    background-color: black;
    color: white;
    border: 2px solid red;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
}
button:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}
button:active {
    transform: scale(0.9);
}
#keypad {
    position: absolute;
    top: 0px;
    right: 0px;
}
#keypad:hover {
    cursor: pointer;
}
#code {
    position: absolute;
    bottom: 5px;
    left: 5px;
} 
#codeButton {
    position: absolute;
    bottom: 5px;
    left: 185px;
}
#keypadMenu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 2px solid black;
    display: none;
    background-image: url('assets/metalPlate.png');
}
#keypadText {
    text-shadow: 4px 4px 8px black;
    box-shadow: 4px 4px 16px black;
}
#keypadKey:hover, #puzzle:hover {
    cursor: pointer;
}
#keypadKey {
    display: none;
}
#puzzle {
    position: absolute;
    top: 0px;
    left: 0px;
}
#puzzleMenu {
    padding: 60px 60px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid black;
    display: none;
    background-image: url('assets/metalPlate.png');
}
#level1  {
    display: none;
    background-image: url('assets/retrotrash56.png');
    background-size: 500px 500px;
}
#level1:hover {
    cursor: none;
}
#level2  {
    display: none;
    background-image: url('assets/darkretrotrash56.png');
    background-size: 500px 300px;
}
#level3  {
    display: none;
    background-image: url('assets/retrotrash56.png');
    background-size: 500px 500px;
}
#startGame {
    padding: 20px 20px;
}
#startButton2, #startButton3 {
    display: none;
}
#level2ButtonsDiv {
    display: none;
    position: static;
    justify-content: center;
}
#lastCodeText {
    display: none;
    font-size: 20px;
    color: white;
    text-shadow: 4px 4px 8px black;
}
#ultimateKey {
    display: none;
}
#ultimate {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
#ultimateMenu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 2px solid black;
    display: none;
    background-image: url('assets/metalPlate.png');
}