style.css

body {
 font-family: monospace;
 background-color: #000;
 color: #fff;
 margin: 0;
 padding: 0;
 background-image: url('wal2.png');
 /* Replace 'your-image.jpg' with the path to your image */
 background-size: cover;
 /* Cover the entire background */
 background-position: center;
 /* Center the background image */
 background-repeat: no-repeat;
 /* Do not repeat the background image */
 background-attachment: fixed;
 /* Keep the background image fixed when scrolling */
}

@keyframes shake {
 0% {
  transform: translateX(0);
 }

 20% {
  transform: translateX(-10px);
 }

 40% {
  transform: translateX(10px);
 }

 60% {
  transform: translateX(-10px);
 }

 80% {
  transform: translateX(10px);
 }

 100% {
  transform: translateX(0);
 }
}

.shake {
 animation: shake 0.5s ease;
}

main {
 padding: 10px;
}


#collection {
 margin-top: 20px;
}

#collection h1 {
 margin-top: 80px;
 font-size: 50px;
 text-align: center;
}

#gameList {
 list-style-type: none;
 padding: 0;
}

#gameList li a {
 display: block;
 padding: 10px;
 color: #009900;
 text-decoration: none;
 font-size: 40px;
 border-radius: 5px;
 text-align: left;
 transition: background-color 0.3s, transform 0.3s;
 width: calc(100% - 20px);
 /* Subtract arrow width from total width */
}

#collection li {
 margin-bottom: 10px;
 position: relative;
}

.arrow {
 position: absolute;
 left: 40px;
 top: 50%;
 transform: translateY(-50%);
 width: 10px;
 /* Adjust the width of the arrow */
 height: auto;
 /* Automatically adjust the height */
 background-image: url('arrow.png');
 background-size: cover;
 display: none;
}

#gameList li {
 margin-bottom: 10px;
 position: relative;
}

#gameList li.selected .arrow {
 display: inline-block;
}

/* CSS for the overlap div */
/* CSS for the overlap div */
/* CSS for the overlap div */


/* CSS for the game item */
.game-item {
 display: flex;
 align-items: center;
 padding-left: 30%;
}

.game-image {
 width: 50px;
 /* Adjust size as needed */
 height: auto;
 /* Maintain aspect ratio */
 margin-right: 10px;
 /* Add spacing between image and game title */
}

.game-details {
 display: flex;
 align-items: center;
}

/* CSS for the arrow */
.arrow {
 width: 8%;
 /* Adjust the size of the arrow */
}

/* CSS for the game link */
.game-item a {
 width: 75%;
 /* Adjust the width of the game name */

 /* Add margin to separate arrow from game name */
}

/* CSS for the game list */
#gameList {
 list-style-type: none;
 padding: 0;
 margin: 0 auto;
 /* Center the game list horizontally */
 max-width: 600px;
 /* Adjust the maximum width as needed */
}