/*Mobile and Global*/
* {padding:0;margin:0;box-sizing:border-box;}

:root {
    --header-footer-body: rgb(40, 40, 40);
    --main: rgb(250, 250, 250);

    --light-text: rgb(250, 250, 250);
    --dark-text: rgb(40, 40, 40);
    
    --light-link: rgb(250, 250, 250);
    --light-link-hover: rgb(255, 232, 0);

    /* --dark-link: rgb(0, 160, 233); */
    --dark-link: rgb(0, 143, 209);
    /* --dark-link-hover: rgb(255, 134, 114); */
    /* --dark-link-hover: rgb(255, 106, 80); */
    /* --dark-link-hover: rgb(254, 95, 85); */
    /* --dark-link-hover: rgb(255, 66, 66); */
    --dark-link-hover: rgb(237, 77, 56);

}

/* Body: Basics and unchanging system */
body {
    margin: 0;
    background-color: var(--header-footer-body);
    color: var(--dark-text);
    font-family: 'Montserrat', Arial, sans-serif;
}

/* type-scale.com minor third/1.2 at 16px */
h1 {font-size: 2.986rem; font-weight: bold;}
h2 {font-size: 2.488rem; font-weight: normal;}
h3 {font-size: 2.074rem; font-weight: normal;}
h4 {font-size: 1.728rem; font-weight: normal;}
h5 {font-size: 1.44rem; font-weight: normal;}
h6 {font-size: 1.2rem; font-weight: normal;}
p {font-size: 1rem;}
p.caption {font-size: .833rem; font-style: italic;}
a, a:hover, a:active {text-decoration: none;}

/* Header: nav bar, basic info only*/
header {
    background-color: var(--header-footer-body);
    padding: 1em;
}

#sitename {font-size: 1rem; font-family: 'Montserrat', Arial, sans-serif;}

header a, header a:active {color: var(--light-link);}
header a:hover {color: var(--light-link-hover);}

header ul {
    list-style-type: none;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    max-width: 2000px;
    margin: 0 auto;
    gap: 10vw;
}

nav ul {
    display: flex;
    justify-content: space-between;
    gap: 10vw;
}

/* Main */
main, aside {
    margin: 0 auto;
    background-color: var(--main);
    line-height: normal;
    padding: 1em;
}

aside {
    line-height: 2em;
    padding-top: 1em;
}

#main-content {
    max-width: 2000px;
    margin: 0 auto;
}

main a, main a:active, aside a, aside a:active {color: var(--dark-link);}
main a:hover, aside a:hover {color: var(--dark-link-hover);}

/*Commented out because of gallery on Home page
img {
    max-width: 75%;
    display: block;
    margin: 0 auto;
    padding: 5px;
} */

.imgncap .caption {text-align: center;}

/* Path */
aside ul {
    list-style: none;
}


/* Footer: same on all pages */
footer {
    background-color: var(--header-footer-body);
    margin: 0;
    padding: 2em;
    text-align: center;
}

footer a, footer a:active {color: var(--light-link);}
footer a:hover {color: var(--light-link-hover);}


/*Wider than Mobile*/
@media only screen and (min-width: 481px) {
    #sitename {font-size: 1.2rem;}
}

/*Wider than Tablet*/
/* @media only screen and (min-width: 761px){
    main {
        color: rgba(120, 30, 150, 0.75);
    }
} */