header {
   text-align: center; 
   padding: 20px;
   font-family: Verdana, sans-serif;
   color: #020000;
   /* This alligns the header text in the centre, adds 20x space inside the header on all sides, chooses verdana font but defaults to the sans serif font if verdana unavailable.*/
   /* Also sets text colour */
}

nav {
   text-align: center;
   word-spacing: 50px;
   padding: 10px;
   background-color: #2fc2d6;
   font-family: Verdana, sans-serif;
   /* this centres the text of my nav bar, adds 50px space between links, adds space inside the nav bar, gives the nav bar a blue colour, sets the nav bar's font */
}


nav a {
   color: #ffffff;
   text-decoration: none;
   font-size: larger;
/* Sets the nav bar's text colour to white, removes the underlines from links and makes the text bigger than normal */
}


body {
   font-family: Verdana, sans-serif;
   font-size: 23px;
   color: #000000;
   line-height: 1.6;
   margin: 20px;
   /* Sets the main text to the verdana font; sets the text size, colour, line height and adds some spacing around the page */
}

.home-img {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 400px;
    height: auto;
}
/* This puts my home page's image on the right of my page and sets the size*/

.about-img {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 400px;
    height: auto;
}
/* This puts my about page's image on the right of my page and sets the size*/

.pricing-img {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 400px;
    height: auto;
}
/* This puts my pricing page's image on the right of my page and sets the size*/

.contact-img {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 400px;
    height: auto;
}
/* This puts my contact page's image on the right of my page and sets the size*/

.book-img {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 400px;
    height: auto;
}
/* This puts my contact page's image on the right of my page and sets the size*/

footer {
   clear: both;
   text-align: center;
   word-spacing: 50px;
   padding: 10px;
   background-color: #2fc2d6;
   font-family: Verdana, sans-serif;
   /* this centres the text of my footer, adds 50px space between links, adds space inside the nav bar, gives the nav bar a blue colour, sets the nav bar's font */
   /* the 'clear' line stops my footer from clashing with my image */
}




footer {
  display: flex;    /* This makes my footer a flex container so its direct children (the columns) are laid out in rows*/
  justify-content: center;   /* this centers the content horizontally */
  background-color: #2fc2d6;  /* this sets my footer's colour*/
  padding: 10px 20px;             /* this adds space inside the footer - 10px on the top and bottom, 20px on the left and right */
  color: #ffffff;       /* this sets the text colour */
  text-align: center;        /* this centers the text inside the footer */
  gap: 200px;                 /* this sets the space between the two columns of my footer*/
}



.footer-column {   
  display: flex;   /* this makes each .footer-column a flex container */
  flex-direction: column;   /* this arranges the info inside the column vertically so it is stacked in a column */
  align-items: center;       /* this centres the content in each column */
}

footer a { 
  color: #ffffff;   /* this sets the text colour */
  text-decoration: none;  /* this removes the underlines from links */
  font-size: larger; /* this increases the font size */
  margin-bottom: 5px;  /* this adds 5 pixels of space below each link to seperate them vertically*/
}

footer p {
  margin: 0;   /* this removes the default margin around paragraphs inside the footer, to avoid extra space. */
  font-size: medium;  /* this sets the font size of paragraphs to medium */
  color: #ffffff;           /* this sets the text colour */
}

body {
    font-size: 18px; /* This sets the text size to 18px which is larger than the default 16px */
    font-family: sans-serif; /* This sets the font*/
}

form {
    max-width: 700px; /* This limits how wide the form can get to keep it neat and readable */
    padding: 20px; /* This adds 20px of space inside the form so content isn't touching the edges */
}

input, textarea {
    width: 100%;  /* This makes input boxes as wide as the container they are inside */
    padding: 10px; /* This adds 10px of padding inside input boxes */
    font-size: 16px;  /* This sets the font size inside input boxes so that they are slightly smaller than the body text */

}

button {
    padding: 12px 18px;  /* This adds vertical and horizontal padding to make the button bigger and easier to click */
    font-size: 16px; /* This sets the button text size */
    background-color: #2fc2d6;  /* This sets the button's colour */
    color: white;  /* This sets the button text color to white */
    border: none;   /* This removes the default border around the button */
    border-radius: 4px;  /* This rounds the button corners slightly */
    cursor: pointer; /* This changes the cursor to a pointer when hovering over the button*/
}

button:hover {
    background-color: #28a8bb;      /* This makes the button darker blue on hover */
}