@charset "UTF-8";

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 100%;
    }

    body {
        max-width: 80em;
        margin: 1em;
        font-size: 1em;
        line-height: 1.4;
    }
    header{
        border: 1px solid black;
        padding: .25em 0; 
        margin-bottom: 1px;   
    }

    header img{
        float: left;
        padding-left: 1em;
        height: 4em;
    }
    
    /* --------- Navigation -------- */
    nav {
        border: 1px solid black;
        padding: .5em;
        margin-bottom: 1px;
        font-size: 1.25em;
    }

    nav ul {
        list-style-type: none;
    }
    
    nav li {
        float: left;
        padding-right: 1.5em;    
    }

    /* ------ Aside ------- */

    aside {float: left;
           width: 25%;
           padding: .5em;
           border: 1px solid black; 
           height: 20em;        
    }
    /* ------ Footer ------- */

    footer{
        padding: .25em 1em;
        border: 1px solid black; 
    }

    /* ==== BACKGROUND COLORS ==== */
    header {
        background-color: #6fa8dc;
        background-image: -webkit-linear-gradient(top, #cfe2f3 0%, #6fa8dc 100%);
        background-image: linear-gradient(to bottom, #cfe2f3 0%, #6fa8dc 100%);                
    }    
    nav {
        background-color: #e06666;
        background-image: -webkit-linear-gradient(top, #f4cccc 0%, #e06666 100%);
        background-image: linear-gradient(to bottom, #f4cccc 0%, #e06666 100%);
    }
      
    footer {
        background-color: #b6d7a8;
        background-image: -webkit-linear-gradient(top, #d9ead3 0%, #b6d7a8 100%);
        background-image: linear-gradient(to bottom, #d9ead3 0%, #b6d7a8 100%);
    }
    
    
    /* ------ MISC --------- */
    .self-clear::after{
        content: "";
        display: block;
        clear: both;
    }

    .indent {
        margin-left: 1.5em;
    }