@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,700;1,400&display=swap');

html, body, a, p, h1, h2, h3, h4, h5, h6, ul, li, span, div {
  cursor: url("../img/DNA_cursor_black_diagonal.png") 0 0, auto !important;
}

html, body {
  height: 101%;
}

@media only screen and (min-width: 1025px) { body { margin: 60px auto; width: 800px; overflow: visible !important; } }
@media only screen and (max-width: 1024px) { body { margin: 60px 60px; width: 480px; transform: scale(1.8); transform-origin: 0 0; -webkit-text-size-adjust: 100%; overflow: visible !important; } }

nav ul { font-size: 18px; line-height: 1.4em; font-family:'Avenir', 'Helvetica', 'Arial', 'Sans-Serif'; padding: 0px; list-style: none; margin-top: 0px; margin-bottom: 35px; margin-right: 0px;}
nav ul li { display: inline-block; margin-right: 25px; margin-bottom: 15px}

a { font-size: inherit; line-height: inherit; font-family: inherit; text-decoration: none; color: #888; }
a:hover, #about.active, #research.active, #publications.active, #contact.active, #notes.active { text-decoration: none; color: #acdbc9; }
a { cursor: url("../img/DNA_cursor_green_diagonal.png") 0 0, auto !important; }

h1 { font-size: 52px; font-family: 'Source Serif 4', 'Serif'; margin-bottom: 18px; overflow: visible !important; }
h2 { font-size: 20px; line-height: 1em; font-weight: bold; font-family: 'Source Serif 4', 'Serif'; color: #333; margin-bottom: 6px; margin-top: 0px; overflow: visible !important; }
p { font-size: 18px; line-height: 1.4em; font-family:'Avenir', 'Helvetica', 'Arial', 'Sans-Serif'; color: #333; margin-bottom: 1em; margin-top: 0px; overflow: visible !important; }
sup { vertical-align: top; position: relative; top: -0.25em; }

ol { font-size: 18px; font-family:'Avenir', 'Helvetica', 'Arial', 'Sans-Serif'; color: #333; margin-bottom: 6px; margin-top: 0px; overflow: visible !important; }
ol p { font-size: 18px; line-height: 1.4em; font-family:'Avenir', 'Helvetica', 'Arial', 'Sans-Serif'; color: #333; margin-bottom: 6px; margin-top: 0px; overflow: visible !important; }

.drop-cap::first-letter { font-size: 3em; font-family: 'Source Serif 4', 'Serif'; float: left; margin-right: 8px; margin-bottom: -0.2em; margin-top: 0; line-height: 1; }
code { font-family: 'Courier New', Courier, monospace; font-style: normal; background-color: #f4f4f4; color: #333; padding: 1px 2px; border-radius: 3px; font-size: 0.9em; vertical-align: 0.05em; }
.pub-note { font-size: 1em; font-family: 'Source Serif 4', 'Serif'; font-style: italic; }

hr { border: none; height: 1px; color: #333; background-color: #333; }
.footnote { font-size: 0.95em; margin-bottom: 1.4em; }

.github-link p { color: #d1d1d1; font-size: 0.95em; }
.github-link a { color: #d1d1d1; font-size: 0.95em; font-family: 'Courier New', Courier, monospace; }
.github-link a:hover { color: #acdbc9; font-size: 0.95em; font-family: 'Courier New', Courier, monospace; }
.github-link span { cursor: url("../img/DNA_cursor_green_diagonal.png") 0 0, auto !important; }

.figure-container { display: flex; flex-direction: column; align-items: center; gap: 1em; margin-bottom: 1.4em; text-align: left; }
.figure-container img { width: 100%; max-width: 480px; height: auto; }
.legend { font-size: 0.95em; max-width: 480px; }

@media screen and (min-width: 1024px) {
    .figure-container { flex-direction: row; justify-content: flex-start; align-items: flex-start; }
    .figure-container .figure { flex: 1; text-align: left; }
    .figure-container .legend { flex: 1; max-width: 400px; }
    .legend { margin-top: 1em }
}