$/*************$ bookings page $*************/$

$/*$ TO$-$DO:

$-$ the contents of the booking$-$page will be $600$px wide, and all content centered within the available space.

$-$ text will have a size of $18$px$.$

$-$ there will be $12$px of space below the day$-$selectors, and $20$px of space between each list item. List items are $60$px wide.

$-$ List items & the small$-$button elements will have a solid black border that is $1$px wide. Small$-$buttons will also have $5$px of space between the border and the content.

$-$ items tagged with $.$top$-$margin will have $24$ px of space above, and $12$px of space below.

$-$ the "clear days" button will be $200$px wide.

$-$ any element tagged with the $.$clicked class will turn mustard yellow. $**$This will be very important for your JavaScript.$**$

$-$ all items within the page will be centered within their available space.

$*/$

$/*$ Container for the booking page $*/$

$.$booking$-$page $\{$

width: $600$px;

margin: $0$ auto;text$-$align: center; $/*$ Center text $*/$

padding: $20$px; $/*$ Optional: padding inside the container $*/$

$\}$

$.$booking$-$page p$,.$booking$-$page li $\{$

font$-$size: $18$px;

margin: $0$;

$\}$

$.$day$-$selectors $\{$

margin$-$bottom: $12$px; $/*$ Space below day$-$selectors $*/$

list$-$style$-$type: none; $/*$ Remove default list styling $*/$

padding: $0$; $/*$ Remove default padding $*/$

display: flex; $/*$ Use flexbox for layout $*/$

justify$-$content: center; $/*$ Center items horizontally $*/$

gap: $20$px; $/*$ Space between items $*/$

$\}$

$.$booking$-$page li $\{$

width: $60$px;

margin$-$bottom: $20$px; $/*$ Space between list items $*/$

border: $1$px solid black;

$\}$

$.$small$-$button $\{$

border: $1$px solid black;

padding: $5$px;

$\}$

$.$top$-$margin $\{$

margin: $24$px $012$px $0$; $/*$ Space above and below top$-$margin elements $*/$

$\}$

$.$clear$-$days$-$button $\{$

width: $200$px;

$\}$

$.$clicked $\{$

background$-$color: #E$5$AF$42$;

$\}$