/* backgound: light color
foreground (text): dark color
*/

@colornb: #EAC4BD;
@colornfl: #443131;
@colornfv: #75003B;
@colorhb: #D0BB9A;
@colorhf: #3B2C0C;
@colorfb: #FFC285;
@colorff: #0000A0;
@colorffl:#6F1806;
@colorffv:#660066;
@colorbb: #FFFFFF;
@colorbf: #000000;
@colorbfv: #800040;
/*
http://www.colourlovers.com/palette/4570499/Fresh_Baked#
http://www.colourlovers.com/palette/4570680/Rarity
/*

/*

/*
CHANGES DONE:
- Added three/four contrasting colors for nav and footer: 
background: (light)
foregound link
foregound visted

header:
background
foreground

footer:
background
foreground
foregound link
foreground visted

Initially, the colors were derived from 
http://www.colourlovers.com/palette/4570499/Fresh_Baked#
http://www.colourlovers.com/palette/4570680/Rarity

Colors for foreground/background Contrast levels were then adjusted at:
https://webaim.org/resources/contrastchecker/

*/

File Name: style.less
Date: 5/7/2018
Programmer: Robert Heintze

*/

/* MOBILE STYLESHEET */
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    background-color: @colorbb;
    color: @colorbf;
}

a {
    &:link {
    color: @colorbf;
    }
    &:visited {
    color: @colorbfv;
    }
}

main, header, footer, nav {
    padding: 1em;
}

nav {
    background-color: @colornb;
        color: @colornfl;
    a {
    &:link {
    color: @colornfl;
    }
    &:visited {
    color: @colorhf;
    }
    }
}

header {
        background-color: @colorhb;
        color: @colorhb;
}

footer 
{
        background-color: @colorfb;
        color: @colorff;
    a {
    &:link {
    color: @colorffl;
    }
    &:visited {
    color: @colorffv;
    }
}
}

@media (min-width: 321px) and (max-width: 480px) {
nav ul li {
    text-align: center;
    list-style: none;
    
}
}

@media only screen and (min-width: 481px) {
   nav ul li {
        text-align: left;
        list-style: none;
        display:inline;
        padding: 1em;
    }
}


h1, h2, h3 {
    font-weight: bold;
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1.1em;
}

ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

li {
    line-height: 1.5em;
}

em {
    font-style: italic;
}

pre {
    font-family: "Courier New", monospace;
    white-space: pre-wrap;
}

/*

TABLET STYLESHEET

The following CSS affects all screen sizes larger than 480 pixels wide.

*/

@media only screen and (min-width: 481px) {

    body {
        font-size: 14px;
    }

}

/*

DESKTOP STYLESHEET

The following CSS affects all screen sizes larger than 1024 pixels wide.

*/

@media only screen and (min-width: 1025px) {
    header, main, footer {
        padding: 2em;
    }

}