/* 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." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Luxury Tennis Dress | Black in Tennis</title>
  <style>
    /* Reset */
    body, h1, h2, p, ul, li {
      margin: 0;
      padding: 0;
      font-family: 'Helvetica Neue', sans-serif;
    }

    body {
      background-color: #F5EBDD; /* Beige base */
      color: #3B2F2F; /* Deep brown text */
      line-height: 1.6;
    }

    /* Navigation */
    header {
      background: #3B2F2F; /* Dark brown */
      padding: 1rem;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav h1 {
      color: #A67C52; /* Caramel brown */
      font-size: 1.5rem;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
    }

    nav a {
      text-decoration: none;
      color: #F5EBDD;
      font-weight: bold;
      transition: 0.3s;
    }

    nav a:hover {
      color: #A67C52;
    }

    /* Hero */
    .hero {
      background: url('tennis-hero.jpg') center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 6rem 2rem;
    }

    .hero h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .hero button {
      background: #A67C52;
      border: none;
      color: #FFFFFF;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      cursor: pointer;
      transition: 0.3s;
    }

    .hero button:hover {
      background: #3B2F2F;
    }

    /* Shop Section */
    #shop {
      padding: 2rem;
      background: #FFFFFF;
    }

    .products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 1rem;
    }

    .product-card {
      background: #F5EBDD;
      border: 2px solid #A67C52;
      padding: 2rem;
      text-align: center;
      font-weight: bold;
      transition: 0.3s;
      border-radius: 10px;
    }

    .product-card:hover {
      background: #A67C52;
      color: white;
    }

    /* Filters */
    .filters {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .filters button {
      border: 1px solid #A67C52;
      background: #FFFFFF;
      color: #3B2F2F;
      padding: 0.5rem 1rem;
      margin: 0.3rem;
      cursor: pointer;
      border-radius: 5px;
      transition: 0.3s;
    }

    .filters button:hover {
      background: #A67C52;
      color: #FFFFFF;
    }

    /* Product Grid */
    .product-card img {
      width: 100%;
      border-radius: 8px;
    }

    .product-card h3 {
      margin-top: 0.5rem;
    }

    .product-card .btn {
      display: inline-block;
      background: #A67C52;
      color: white;
      padding: 0.5rem 1rem;
      margin-top: 0.5rem;
      text-decoration: none;
      border-radius: 5px;
      transition: 0.3s;
    }

    .product-card .btn:hover {
      background: #3B2F2F;
    }

    /* Product Detail */
    .product-detail {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      padding: 2rem;
      background-color: #FFFFFF;
      border-radius: 10px;
      margin: 2rem;
    }

    .product-detail img {
      max-width: 400px;
      border-radius: 10px;
    }

    .product-info {
      max-width: 500px;
    }

    .product-info .price {
      font-size: 1.5rem;
      color: #A67C52;
      margin-bottom: 1rem;
    }

    .product-info .btn {
      background: #A67C52;
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }

    .product-info .bt
I /* Athletes Section */
.athletes {
  background-color: #f5f0e6; /* soft beige background */
  color: #3a2c1a; /* dark caramel brown text */
  padding: 4rem 2rem;
  text-align: center;
}

.athletes h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #5a3f28; /* rich caramel */
  letter-spacing: 1px;
}

.athlete-profile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 10px rgba(58, 44, 26, 0.1);
}

.athlete-photo {
  width: 300px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  border: 3px solid #d4b996; /* light caramel border */
}

.athlete-info {
  max-width: 500px;
  text-align: left;
}

.athlete-info h3 {
  font-size: 1.75rem;
  color: #5a3f28;
  margin-bottom: 1rem;
}

.athlete-info p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

blockquote {
  font-style: italic;
  color: #a97d4e;
  border-left: 4px solid #a97d4e;
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

/* Button Style (reusing .btn) */
.btn {
  background-color: #c89b6c;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background-color: #a97d4e;
}

/* General Body */
body {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #fffaf3; /* soft beige base */
  color: #3a2c1a; /* dark caramel brown */
}

/* Navigation */
header {
  background-color: #3a2c1a;
  color: white;
  padding: 1rem 2rem;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav h1 {
  font-size: 1.5rem;
  color: #d4b996; /* caramel gold */
}

nav ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s;
}

nav a:hover {
  color: #d4b996;
}

/* Hero Section */
.shop-hero {
  background-color: #d4b996;
  color: #3a2c1a;
  text-align: center;
  padding: 4rem 2rem;
}

.shop-hero h2 {
  font-size: 2.5rem;
}

.shop-hero p {
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

/* Collections */
.collection {
  padding: 3rem 2rem;
  text-align: center;
}

.collection h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #5a3f28;
}

/* Product Grid */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background-color: white;
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(58, 44, 26, 0.1);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: scale(1.03);
  border-color: #d4b996;
}

.product-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.product-card h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.product-card p {
  color: #a97d4e;
  font-weight: bold;
}

/* Footer */
footer {
  background-color: #3a2c1a;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}
