:root {
    --main-text-color: rgba(90, 90, 150, 1);
    --bold-text-color: rgba(50, 50, 100, 1);
}
#preamble {
    text-align: center;
    padding: 5px;
    border-bottom: 1px dotted;
}

#postamble{
    border-top: 1px dotted;
    display: block;
}

#postamble p {
    display: inline-block;
}
.nav ul {
    display: block;
    padding: 0;
}
.nav ul li {
    display: inline-block;
    padding-right: 2px;
    font-weight: bold;
}

strong, h1 {
   color: var(--bold-text-color);
}

h2, h3, h4 {

    color: rgba(70, 70, 125, 1);
 }

.name {
    font-size: 50px;
    font-weight: 400;
    color: rgba(40, 40, 80, 1);
}

#preamble a {
    color: color: var(--main-text-color);
    text-decoration: none;
}

#preamble a:hover {
    color: var(--bold-text-color);
    text-decoration: underline;
}
#preamble a:visited {
    color: inherit;
    text-decoration: none;
}

#content a {
    color: rgba(100,50,50, 1);
    text-decoration: none;
}

#content a:hover{
    text-decoration: underline;
}

#content a:visited{
    color: rgba(100,50,50, 1);
}

/* .nav a:hover { */
/*     /\* color: red; *\/ */
/*     color: var(--bold-text-color); */
/*     text-decoration: underline solid red; */
/* } */


/* .nav a, a:visited, a:active { */
/*     color: inherit; */
/*     text-decoration: none !important; */
/* } */

/* div#content { */
/*     a { */
/*         color: rgba(100,50,50, 1); */
/*     } */

/*     a :hover { */
/*     color: rgba( 100px ,150,50, 1px ); */
/*     text-decoration: underline solid; */
/*  } */
/* } */

img{ 
    width: 100px;
    border-radius: 30%;
}
html {
    color: var(--main-text-color);
    border-top: 3px solid;
    border-bottom: 1px solid;
}

body {
    width: 50%;
    margin: 0 auto;
    /*   font-family: 'Source Code Pro'; */
    /*   font-family: "roboto", serif; */
    font-family: "roboto", sans-serif;
}

body div{
    padding: 1px 3px;
    background-color: rgba(240, 240, 250, .1);
}

@media (min-width:320px) {
    /* smartphones, iPhone, portrait 480x320 phones */
    body {
        width: 100%;
    }
}

@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    body {
        width: 90%;
    }

}
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    body {
        width: 90%;
    }

}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
    body {
        width: 80%;
    }

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    body {
        width: 70%;
    }

}
@media (min-width:1281px) { /* hi-res laptops and desktops */
    body {
        width: 60%;
    }

}