@media screen {
    h1, h2 {
        color: #094680;
    }
    h3, h4, h5, #experience dt, #research dt, #education dt {
        color: #cf520e;
    }

    body { 
        font-size: 16px;
        line-height: 1.4em;
        color: #333;
        background-color: #FEFEFE;
    }

    main {
        margin: 1em;
        max-width: 800px;
        width: 80%;
        margin: auto;
    }
    
    a { color: #0e64b5; }
    a:visited { color: #0a5193; }
    a:hover { color: #f77027; }
    .title { width: 100%; }
    .institution { color: #555; }

    #contact dt { color: #333 }
    #contact dd { color: #cf520e; }

} 

@media screen and (max-width: 980px) {
    main {
        width: 100%;
        padding-top: 1em;
    }

    #contact dd + dt::before {
        content: '\A';
        white-space: pre;
    }

}

@media screen and (max-width: 640px) {
    main {
        width: 95%;
    }

    h1 { margin-top: 0em; }

    #contact dt, #contact dd { margin: 0em; display: inline; }
    .title { margin-left: 0em; }
    .institution, .duration {
        width: 100%;
    }
    #education dd, #research dd, #experience dd {
        margin-left: 0em;
    }

    #skills div { width: 100%; }

}