Add margins between headings and fields

app/routes/book-event.tsx

@@ -90,7 +90,9 @@ export default function () {
   ) : (
     <Container maxW="container.md">
       <Heading pb="32px">Book an Event</Heading>
-      <Heading size="md">Event Type</Heading>
+      <Heading mb="8px" size="md">
+        Event Type
+      </Heading>
       <RadioGroup onChange={setEventType} value={eventType}>
         <HStack>
           <Radio>FoTD</Radio>
@@ -109,7 +111,7 @@ export default function () {
         onChange={(e) => setEventDay(e.target.value.split("-")[2])}
         type="date"
       />
-      <Heading pt="16px" size="md">
+      <Heading mb="8px" pt="16px" size="md">
         Event Details
       </Heading>
       <Textarea
@@ -118,6 +120,7 @@ export default function () {
       />
       <Heading
         display={eventType === "rotw" ? "none" : undefined}
+        mb="8px"
         pt="16px"
         size="md"
       >
@@ -127,7 +130,9 @@ export default function () {
         onChange={(e) => setRiddleAnswer(e.target.value)}
         placeholder="Riddle answer"
       />
-      <Button onClick={async () => await submit()}>Book</Button>
+      <Button mt="16px" onClick={async () => await submit()}>
+        Book
+      </Button>
     </Container>
   );
 }