body {
    height: 100%;
    font-family: 'Press Start 2P', cursive;
    cursor: default;
    background-color: #1D1D1D;
    background-size: cover;
    overflow: auto;
     margin: 0;
    padding: 0;
}

.viewport {
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

#main-content {
    position: relative;
}


.background-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 800px;
    z-index: 2; 
    position: relative;
    margin: 0 auto;
}

#background-image {
  max-width: 100%;
  min-width: 100%;
  max-height: 100%;
  display: block;
  z-index: 5;
}


#restart-race {
    background-color: rgba(0, 0, 0, 0.5); 
    color: #00FF00;
    font-family: 'Press Start 2P', cursive;
    padding: 10px 15px;
    position: fixed;
    bottom: 2px;
    right: 10px;
    border: none;
    text-decoration: none;
    border-radius: 5px; 
    transition: color 0.3s;
    z-index: 10;
}
    #restart-race:hover {
        color: #ff4081;
    }
    

#pencilblack { position: absolute;  width: 50px; left: 100px; bottom: 290px; z-index: 10; }
#pencilgreen { position: absolute;  width: 50px; left: 108px; bottom: 260px; z-index: 11; } 
#pencilyellow { position: absolute; width: 30px; left: 110px; bottom: 215px; z-index: 12; }  
#pencilred {  position: absolute;   width: 50px; left: 110px; bottom: 200px; z-index: 13; }     
#pencilbrown { position: absolute;  width: 30px; left: 110px; bottom: 185px; z-index: 14; }   

.pencil {
  transition: transform 0.2s;
}

.pencil.flipped {
  transform: scaleX(-1);
}