/* ============================================================
   style.css  ->  THE CLOTHES
   ============================================================
   CSS never changes WHAT is on the page. Only how it LOOKS.

   The order down this file matches the order of index.html:
   top of the page first, bottom of the page last.
   ============================================================ */


/* ============================================================
   CHANGE THESE FOUR LINES FIRST
   ============================================================
   These are your project's colours. Every colour on the page
   comes from here, so changing these four lines re-paints the
   WHOLE site in about thirty seconds.

   Do it now. Do not keep my colours. This is your project.

   Need a colour? Google "colour picker", grab the # code.
   ============================================================ */
:root {
  --bg:     #FBF2E2;   /* the page background    */
  --text:   #2B1D17;   /* normal writing         */
  --main:   #C64E27;   /* headings               */
  --accent: #3E7A63;   /* buttons and highlights */
}


/* ==================== THE WHOLE PAGE ==================== */
body {
  background-color: var(--bg);
  color: var(--text);

  font-family: Arial, Helvetica, sans-serif;  /* <- try: Georgia, 'Courier New', Verdana */
  line-height: 1.6;    /* <- space between lines of writing */

  max-width: 800px;    /* <- stops text stretching too wide */
  margin: 0 auto;      /* <- "auto" centres the page */
  padding: 40px 20px;
}


/* ==================== THE TOP ==================== */
header {
  text-align: center;  /* <- try: left */
  border-bottom: 3px solid var(--main);
  padding-bottom: 20px;
  margin-bottom: 40px;
}

h1 {
  color: var(--main);
  font-size: 42px;     /* <- try making this much bigger */
  margin: 0;
}

.tagline {
  font-style: italic;
  opacity: 0.75;       /* <- 1 is solid, 0 is invisible */
}


/* ==================== CARDS ==================== */
/* Anything with class="card" in the HTML gets these styles.   */
/* One rule, as many cards as you like.                        */
.card {
  background-color: #FFFFFF;
  border: 3px solid var(--main);
  border-radius: 12px; /* <- 0 for sharp corners, 40 for very round */
  padding: 20px 25px;
  margin-bottom: 25px;
}

h2 {
  color: var(--main);
  margin-top: 0;
}


/* ==================== BUTTONS ==================== */
button {
  background-color: var(--accent);
  color: #FFFFFF;

  font-size: 18px;
  font-family: inherit; /* <- use the same font as the rest */
  padding: 12px 24px;

  border: none;
  border-radius: 8px;
  cursor: pointer;     /* <- makes the mouse become a hand */
}

button:hover {
  /* This ONLY happens while the mouse is on top of the button. */
  opacity: 0.85;
}


/* ==================== THE BOTTOM ==================== */
footer {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid var(--text);
  font-size: 14px;
  opacity: 0.7;
}


/* ============================================================
   YOUR OWN STYLES GO BELOW HERE
   ============================================================ */