/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* COLOUR PALETTE 1:
- coffee: #371e13 pair with deep peach
- maroon: #5e2a25 pair with creme
- clay dust: #c0aa8a pair with coffee
- creme: #e1d3a9 pair with leather couch
- leather couch: #734f31 pair with creme
- deep peach: #a85530 pair with coffee
- guave: #8f7c3a pair with river pine
- river pine: #534b31 pair with guave

COLOUR PALETTE 2:
- aquamarine: #8be8cb with cool steel
- cool steel: #7ea2aa with dusty mauve
- lavender grey: #888da7 with aquamarine
- dusty mauve: #9c7a97 with gunmetal
- gunmetal: #303633 with lavender grey

COLOUR PALETTE 3:
- mid red: #700404   pair with darkest red
- near black: #090001   pair with greige
- near white: #feffc5   pair with mid red
- greige: #aba283   pair with bright red
- bright red: #be2007  pair with near black
- darkest red: #260202  pair with near white

COLOUR PALETTE 4:
- soft blush #FFDBDA
- old rose: #DBSF8E
*/

body {
    color: #11120d;
    background-color: #fbf9f4;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: small;
    padding-left: 20px;
    padding-right: 20px;
    margin: 75px;
}

h1 {
    font-size: large;
    color: #768988;
    text-decoration: underline;
    text-decoration-color: burlywood
}

h2 {
    font-size: 15px;
    color: #768988;
    background-color: #f1ecd9;
}

a {
    color: #768988;
}

a:hover {
    color: burlywood !important;
    background-color: #f1ecd9
}

/* you can wrap this in the little secret message symbol if you decide you don't want links changing colour after being clicked */
a:visited {
    color: #9e9a93
}