/* 
      .--..--..--..--..--..--.
    .' \  (`._   (_)     _   \
  .'    |  '._)         (_)  |
  \ _.')\      .----..---.   /
  |(_.'  |    /    .-\-.  \  |
  \     0|    |   ( O| O) | o|
   |  _  |  .--.____.'._.-.  |
   \ (_) | o         -` .-`  |
    |    \   |`-._ _ _ _ _\ /
    \    |   |  `. |_||_|   |
    | o  |    \_      \     |     -.   .-.
    |.-.  \     `--..-'   O |     `.`-' .'
  _.'  .' |     `-.-'      /-.__   ' .-'
.' `-.` '.|='=.='=.='=.='=|._/_ `-'.'
`-._  `.  |________/\_____|    `-.'
   .'   ).| '=' '='\/ '=' |
   `._.`  '---------------'
           //___\   //___\
             ||       ||
             ||_.-.   ||_.-.
            (_.--__) (_.--__)
       

 Insert all your glorious CSS styles below! */


html {
  background-color: #fcf7f2;
  background-image: url("images/background.webp");
  background-size: 500px 500px;
  background-repeat: repeat;
} 
/* background styling */

body {
  margin: 20px;
  line-height: 1.6;
}
/* body text spacing */

h1, h2, h3 {
  font-family: 'DM Serif Display', serif;
  color: #2C3E50;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 48px;
  color: #E74C3C;
}

h2 {
  font-size: 24px;
  line-height: 28px;
  margin-top: 5px;
  margin-bottom: 20px;
}

h3 {
  font-size: 30px;
}
/* heading fonts, color, size, spacing */

p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
}
/* paragraph color and styling */

.hat-image {
  float: right;
  width: 200px;
  margin-left: 20px;
  margin-bottom: 10px;
}
/* hat image inserted to the right */