body { /*affects the full page*/
    font-family: "Pirata One", system-ui;; /*font choice for all other text on page*/
    font-size: 1rem;
    background-color: #fbf5f3;
}

header{
display: flex;
height: 2rem;
line-height: 2rem;
}

header p{
font-family: "Pirata One", system-ui;
font-weight: 1300;
font-style: normal;
font-size: 1.2rem;
margin-left: 2rem;
color: #410405;
}

h1,h2,h3,h4,h5,h6{
    /*font choice for titles & subtitles*/
  font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #410405;
  margin-top: 0.5em; /*usually more space on top vs bottom*/
  margin-bottom: 0.20em;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.9291em; }
h3 { font-size: 1.6915em; }
h4 { font-size: 1.4832em; }
h5 { font-size: 1.3006em; }
h6 { font-size: 1.1404em; }
p { font-size: 1em; }
small { font-size: .8769em; }

main{
    padding-left: .5rem;
    padding-right: .5rem;
    font-family: "Pirata One", system-ui; /*font choice for all other text on page*/
}

aside{
    background-color: #da9f93;
    margin: 1rem;
    padding: 1rem;
}

ul{
    list-style-type: disc;
    padding-left: 2rem;
    color: #410405;
}

ul li {
    margin-bottom: 0.5rem;
}

aside a:link {
    color: #890620;
    text-decoration: none; /*removes underline*/
}

aside a:visited {
    color: #2c0703;
}

aside a:hover {
    text-decoration: underline;
}

aside a:active {
    color: #b6465f; /*very in your face color*/
}

footer {
background-color: #9f3e48;
font-weight: bold;
background-image: 
url(bgimg/devil-dracula-vampire-svgrepo-com.svg),
url(bgimg/web-svgrepo-com.svg),
url(bgimg/ghost-4-svgrepo-com.svg);
background-size: 
100px,
200px,
40px;
background-repeat: no-repeat,
no-repeat,
repeat;
background-position: 
80% 37%,
105% 55%,
60%,20%; 
}

footer a:link {
    color: #ea8c55;
}

footer a:visited {
    color: #fbba72;
}

footer a:active {
    color: #b6465f;
}

footer h4, h5 {
    color: #ffaf87;
}

/*16 px=1rem=height of letter m of root element*/
/*root element (ex: html tag) never changes*/
/*EM vs REM = EM is in size of the current tag*/
/*REM= root element m size (never changes)*/
/*EM is your tag's text size*/