@charset "UTF-8";
html {
    background-color: #fff6f0;
    color: #1a1a1a;
    font-family: Jost; Poppins; Lato; sans-serif;
}
body {
    margin: 2.5%;
}

/* link style */
a {
    text-decoration: none;
    color: #1a1a1a;
}
main a {
    text-decoration: underline;
}
footer a {
    text-decoration: underline;
}
a:hover {
    font-weight: 700;
    color: #f4876c;
}
img.link {
    margin-left: .05%;
    margin-right: .05%;
}
img.thumbnails {
    width: 95%;
    height: auto;
    margin-top: 1%;
}
img.thumbnails:hover { 
    border-color: transparent;
    box-shadow: 0 0 0 5px #f4876c;
}
img.newpage:hover {
    border-color: transparent;
    box-shadow: 0 0 0 5px #f4876c;
}

/* header/nav style */
header {
    position: relative;
    margin: auto;
    border-bottom: solid 3px #007BA7;
}
header h1 {
    font-size: 32px;
    position: absolute;
    top: -.8em;
}
h2 a {
    font-size: 24px;
    font-weight: 400;
}
/* header {
    outline-style: solid;
    outline-color: black;
    outline-width: 3px;
} */
nav {
    text-align: right;
}

/* content style */
main {
    margin-top: 1%;
    margin-bottom: 1%;
    /* outline-style: solid;
    outline-color: black;
    outline-width: 3px; */
}
main td {
    font-weight: 400;
}
main p {
    font-size: 18px;
}
img.newpage {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
iframe {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* footer style */
footer {
    clear: both;
    border-top: solid 3px #007BA7;
}
footer table td {
    text-align: left;
    padding-right: 50px;
}
p.footerheading {
    font-weight: 400;
    font-size: 20px;
}

/* misc style*/
main table {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    table-layout: fixed;
} /* projects page */
p.oneliner {
    font-weight: 600;
    font-size: 36px;
    font-family: Hepta  Slab, serif;
    font-style: italic;
} /* about page */
img#me{
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}


@media (min-width: 320px) and (max-width: 999px) {

    iframe {
        width: 100%;
    }
    img.newpage {
        width: 100%;
    }
    img#me {
        height: 100%;
    }
    main td {
        padding-left: 10px;
        padding-right: 10px;
    }

}