/* 'margin: auto' centers the website */
body {
    max-width: 1080px;
    margin:2%;
    /* padding-left: 11em; */
    /* padding-right: 11em; */
    font-family:'Times New Roman', Times, serif;
    font-size:medium;
    color:mintcream; /* Neat colors: 'MintCream', 'azure', 'greenyellow', 'whitesmoke' */
    background-color:black;
    /* border:thin solid red; */
    overflow-y:scroll;
}

/* The 'a' after nav refers to the anchor, it will replace a browsers defaults (eg. color) */
nav a:link{
    font-weight: bold;
    color:aqua; 
    background-color: black;
    margin: 0.5%;
    padding: 0.5%;
    /* border:thin solid aqua */
}

nav a:visited{
    font-weight: bold;
    color:aqua; 
    background-color:black;
    margin: 0.5%;
    padding: 0.5%;
    /* border:thin solid aqua */
}

/* The order for a:link, a:visited, and a:hover is important -- specifically, a:hover must be defined after the previous two. */
nav a:hover{
    font-weight: bold;
    /* color:greenyellow;  */
    color:lawngreen;
    background-color: black;
    margin: 0.5%;
    padding: 0.5%;
    /* border:thin solid greenyellow */
}


/* For the sake of consistency, we are going to apply these properties to hyperlinks in <p> tags as well */
/* The 'a' after nav refers to the anchor, it will replace a browsers defaults (eg. color) */
p a:link{
    color:aqua; 
    background-color:black;
    /* border:thin solid aqua */
}

p a:visited{
    color:lawngreen; 
    background-color:black;
    /* border:thin solid aqua */
}

/* The order for a:link, a:visited, and a:hover is important -- specifically, a:hover must be defined after the previous two. */
p a:hover{
    /* color:greenyellow;  */
    color:lawngreen;
    background-color:black;
    /* border:thin solid greenyellow */
}

/* want to add more sophisticated image sizing (e.g. make the image some proportion of the viewport; this is called 'responsive web design' */

/* picture {
    max-width: 600px
} */