footer {
    /* these are the images used from the first layer you see to the one thats the furthest from the screen*/
    background-color: rgb(192, 26, 98);
    background-image:
    url(bgimg/bird.svg),
    url(bgimg/sailboat-svgrepo-com.svg), 
    url(bgimg/forest-svgrepo-com.svg),
    url(bgimg/hot-air-balloon-svgrepo-com.svg),
    url(bgimg/ocean-svgrepo-com.svg),
    url(bgimg/clear-svgrepo-com.svg);
    

    background-size:
    40px,
    60px,
    55px,
    50px,
    80px,
    150px;

    background-repeat: 
    no-repeat,
    no-repeat,
    repeat-x,
    no-repeat,
    repeat-x,
    no-repeat;

    background-position:/* left/right top/bottom */
    center 24%,
    bottom left 30%,
    center 80%, 
    top right,
    bottom,
    center top;


    padding: 1rem 2rem -1rem 2rem;
   

}

header p{
    font-family:"Stalinist One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: small;
    color: rgb(203, 62, 163) ; 
    margin-top: 0.5rem ;
    margin-bottom: 0.25rem ;
}

h1,h2,h3,h4,h5,h6 {
    /* font choice for titles and subtitles */
    font-family:"Stalinist One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(203, 62, 163) ; 
    
    margin-top: 1rem ;
    margin-bottom: 0.25rem ;

}

h1 { font-size: 1.3em; margin-left: 1rem; }
h2 { font-size: 1.2444em; }
h3 { font-size: 1.1911em; }
h4 { font-size: 1.1402em; }
h5 { font-size: 1.0914em; }
h6 { font-size: 1.0447em; }
p { font-size: 1em; }
small { font-size: .9572em; }

body{
/* font choice for all other parts of the page */
    font-family: "Yanone Kaffeesatz", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    color: black;
}

/* the value of the letter M (em) is used to measure the size of the fonts in the document you're working on
1 rem = 16px = height of the letter M of root element
root element ( ex:html tag) never changes
EM vs REM = em is in the size of the current tag
REM is the root element M siz = never changes
EM is your tag's text size 
using EM is bigger because it depends on the size of the font*/

 /* padding and margin are not the same
 margin = outside the border
 padding = inside the border*/  

 main{padding-left:1rem;}
 aside{padding-left: 1rem;}

 aside{
    background-color: rgb(212, 93, 130);
     margin: 1rem;
    padding: 1rem; 
 }

 ul{ /* unordered list*/
    list-style-type: disc;
    padding-left: 2rem;
    color: rgb(99, 13, 13);
 }

 ul li { /* items in the unordered list*/
    margin-bottom: 0.5rem;
 }
/*LoveHa Rule*/
aside a:link{
    color: rgb(108, 21, 21);
    text-decoration: none;/* removes underline*/ }

aside a:visited{
    color: rgb(31, 103, 175); /* looks faded, more boring*/
}

aside a:hover{
    text-decoration: underline; /* add underline on mouse hover*/
}

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

footer a:link{
    color: rgb(97, 194, 41);
    text-decoration: none;/* removes underline*/ }

footer a:visited{
    color: rgb(217, 40, 185); /* looks faded, more boring*/
}

footer a:hover{
    text-decoration: underline; /* add underline on mouse hover*/
}

footer a:active{
    color: rgb(128, 0, 0) ; /* very in your face color*/
}

footer h4, footer h5 {
    color: bisque;
}

/*
a:link normal state
a:visited a page you have seen
nav a:footer your mouse is over the link
a:active mouse button is clicked down, not up yet

padding: 12pm 3pm 6pm 9pm
*/

header {
    display: flex; /* put things side-by-side*/
    height: 2rem;
    line-height: 2rem; /* vertical align text*/
}

header img{
    margin-right: 0.5rem;
}