* 
    {
        margin: 0;
        padding: 0;
    }


/*==============================
 *  Header
==============================*/

header 
    {
        background-color: #CCFFEE;
    }

.site-cont 
    {
        padding: 20px;
        text-align: center;
    }

nav 
    {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 50px;
        background-color: aquamarine;
    }

nav a 
    {
        padding: 15px;
        color: indigo;
        text-decoration: none;
        font-weight: bold;
    }

nav a:hover 
    {
        background-color: cadetblue;
        color: white;
        box-shadow: 0 5px indigo;
    }

.nav-active 
    {
        background-color: #DCADFF;
        box-shadow: 0 5px indigo;
    }









/*==============================
 *  SideBar
==============================*/

main 
{
    display: flex;
    flex-direction: row;
}

section 
    {
        margin: 20px;
        padding: 10px;
    }

aside 
    {
        width: 40%;
        height: 100%;
        min-width: 90px;
        margin: 20px 30px 20px 20px;
        padding: 20px;
        background-color: cadetblue;
    }

aside ul 
    {
        text-indent: 15%;
        list-style-type: none;
    }

aside li 
    {
        margin: 5px;
    }

aside ul ul 
    {
        text-indent: 30%;
    }

aside a 
{
    text-underline-offset: 3px;
    color: darkblue;
}

aside a:hover 
{
    color: aliceblue;
    text-decoration-style: dotted;
}

.aside-active 
    {
        text-decoration-style: double;
        font-weight: bold;
        color: brown;
    }

.crumbs 
    {
        margin: 10px;
    }

.crumbs a 
    {
        color: #5D0001;
        text-decoration: none;
    }
.crumbs a:hover 
    {
        color: blueviolet;
    }












/*==============================
 *  mobile
==============================*/

@media only screen and (max-width: 880px) 
{
    nav 
        {
            display: flex;
            padding-right: 0;
            justify-content: center;
        }

    aside 
        {
            /*margin excluding top needs to be halved*/
            margin-right: auto * 0.5;
            margin-bottom: auto * 0.5;
            margin-left: auto * 0.5;
            
            /*padding needs to be halved*/
            padding: auto * 0.5;
        }

    section 
        {
            /* both need to be halved*/
            margin: auto * 0.5;
            padding: auto * 0.5;
        }
}