/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* General Page Styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  background-color: #333;
  color: white;
  padding: 20px 0;
}

header h1 {
  margin: 0;
  font-size: 36px;
}

.comparison-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 40px;
  flex-wrap: wrap;
}

.shoe-card {
  background-color: white;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  padding: 20px;
}

.shoe-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.shoe-details h2 {
  font-size: 24px;
  margin-top: 10px;
}

.shoe-details ul {
  list-style-type: none;
  padding-left: 0;
}

.shoe-details li {
  margin-bottom: 12px;
}

.shoe-details strong {
  color: #333;
}

@media (max-width: 768px) {
  .comparison-container {
    flex-direction: column;
    align-items: center;
  }

  .shoe-card {
    width: 80%;
    margin-bottom: 30px;
  }
}
body {
  background-image: url('your-basketball-background.jpg');
  background-size: cover;
  background-position: center;
}
header h1 {
  font-family: 'Bebas Neue', sans-serif;
}

.shoe-details h2 {
  font-family: 'Bebas Neue', sans-serif;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  background-color: #333;
  color: white;
  padding: 20px 0;
}

h1 {
  margin: 0;
  font-size: 36px;
}

#game-container {
  margin: 20px auto;
  width: 800px;
  height: 600px;
  background-color: #87CEEB; /* Sky blue for the basketball court */
  border: 2px solid #333;
}

footer {
  background-color: #333;
  color: white;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

footer a {
  color: white;
  text-decoration: none;
}