generate a css code for following code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Appointment - Beauty Salon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">Beauty Salon</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="appointment.html">Book Appointment</a></li>
</ul>
</nav>
</header>
<main>
<section class="booking-container">
<h1>Book Your Appointment</h1>
<form id="booking-form">
<div class="form-group">
<label for="service">Service</label>
<select id="service" required>
<option value="">Select a service</option>
<option value="haircut">Haircut</option>
<option value="coloring">Hair Coloring</option>
<option value="manicure">Manicure</option>
<option value="pedicure">Pedicure</option>
<option value="facial">Facial</option>
</select>
</div>
<div class="form-group">
<label for="stylist">Preferred Stylist</label>
<select id="stylist" required>
<option value="">Select a stylist</option>
<option value="jane">Jane Smith</option>
<option value="mike">Mike Johnson</option>
<option value="sarah">Sarah Williams</option>
</select>
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" id="date" required>
</div>
<div class="form-group">
<label for="time">Time</label>
<input type="time" id="time" required>
</div>
<button type="submit" class="btn">Book Now</button>
</form>
</section>
</main>
<script src="script.js"></script>
</body>
</html>