/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* colors */
/* fonts */
body { font-family: "Roboto", sans-serif; margin: 0; background-color: #fcfcf7; }

p { margin: 1.35em 0; line-height: 1.31; }

ul { list-style-type: none; list-style-position: outside; }

li { margin: 1.35em 0; line-height: 1.31; }

a { color: black; transition: color 250ms ease-in-out; }

a:hover { color: #A822D0; }

a.current { color: #A822D0; font-weight: bolder; }

a.blog-title { color: #A822D0; font-weight: bolder; }

p.blog-title { color: #A822D0; font-weight: bolder; }

.PageNavigation { font-size: 14px; display: block; width: auto; overflow: hidden; }

.PageNavigation a { display: block; width: 50%; float: left; margin: 1em 0; }

.PageNavigation .next { text-align: right; }

.float-right { float: right; }

.float-left { float: left; }

.bluelink { color: dodgerblue; }

.no-list-style { list-style: none; padding: 0; line-height: 1.25; }

ol { list-style-type: decimal; list-style-position: inside; }

/* visualize divs */
.rounded-corners { border-radius: 5px; }

.section-with-label { margin: 1.35em 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.5em; align-items: baseline; }

.section-with-label .label { font-size: 0.75em; font-family: "Courier Prime", "Courier New", Courier, monospace; color: #000000; margin: 0; line-height: 1.25; }

.section-with-label p { margin: 0; line-height: 1.25; }

/* Projects page specific styles */
.projects-page .section-with-label { grid-template-columns: 3em 1fr; align-items: center; column-gap: 1em; }

.projects-page .section-with-label .label { font-size: 3em; text-decoration: none; color: inherit; }

.projects-page .section-with-label .label:hover { opacity: 0.8; }

.projects-page .section-with-label .project-content { display: flex; flex-direction: column; }

.projects-page .section-with-label .project-name { margin: 0; margin-bottom: 0.4em; font-size: 1em; font-weight: bold; line-height: inherit; }

.projects-page .section-with-label .project-name a { color: black; text-decoration: none; transition: color 250ms ease-in-out; }

.projects-page .section-with-label .project-name a:hover { color: #A822D0; }

.projects-page .section-with-label .project-date { display: block; margin-bottom: 0.4em; color: #666; font-size: 0.85em; }

.projects-page .section-with-label .project-description { display: block; line-height: 1.25; }

#nav-container { margin-top: 1em; margin-left: 0.5vw; margin-right: 0.5vw; display: flex; justify-content: center; align-items: center; }

#nav-container nav { text-align: center; }

nav a { text-align: center; margin: 0em 0.2em; }

nav a.current { color: #A822D0; font-weight: bolder; }

nav a:first-child { display: inline-block; padding-bottom: .2em; }

.clear-space { clear: both; height: 75px; }

#footer-container { height: 25px; position: fixed; left: 0; bottom: 0; width: 100%; background-color: #f6fcf6; text-align: center; }

div.body-content-box { width: 80%; margin: auto; text-align: center; }

div.main-content-div { width: 100%; max-width: 400px; min-width: 250px; margin: auto; margin-top: 3rem; text-align: left; }

div.announcement-content-div { width: 60%; margin: auto; text-align: center; }

.announcement-box { padding-top: 1em; padding-bottom: 1em; margin-top: 20px; margin-bottom: 2em; border-style: solid; border-width: 2px; }

.title-box { font-weight: normal; padding-top: 0.3em; padding-bottom: 0.3em; margin-top: 20px; margin-bottom: 1em; border-style: solid; border-width: 2px; }

.green-box { border-color: black; background-color: #bbff99; color: black; }

.purple-box { border-color: black; background-color: #A822D0; color: white; }

.pink-box { border-color: black; background-color: hotpink; color: white; }

/** Tooltip Styles */
/* Base styles for the element that has a tooltip */
[data-tooltip], .tooltip { position: relative; cursor: pointer; text-decoration: underline; text-decoration-color: #e0a7f1; text-decoration-style: solid; }

[data-tooltip]:hover, .tooltip { background-color: #e0a7f1; }

/* Base styles for the entire tooltip */
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; }

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

/* Base styles for the tooltip's directional arrow */
.tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; }

/* Base styles for the tooltip's content area */
.tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px; width: 160px; background-color: #000; background-color: rgba(51, 51, 51, 0.9); color: #fff; content: attr(data-tooltip); font-size: 14px; line-height: 1.2; }

/* Directions */
/* Top (default) */
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after { bottom: 100%; left: 50%; }

[data-tooltip]:before, .tooltip:before, .tooltip-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: rgba(51, 51, 51, 0.9); }

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -80px; }

[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after, .tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-top:focus:before, .tooltip-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); }

/* Left */
.tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; }

.tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: rgba(51, 51, 51, 0.9); }

.tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); }

/* Bottom */
.tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 50%; }

.tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: rgba(51, 51, 51, 0.9); }

.tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); }

/* Right */
.tooltip-right:before, .tooltip-right:after { bottom: 50%; left: 100%; }

.tooltip-right:before { margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: rgba(51, 51, 51, 0.9); }

.tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); transform: translateX(12px); }

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before, .tooltip-right:before { top: 3px; }

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; }

div#john-peeking { position: fixed; right: 0; bottom: 15%; }

@keyframes popout { 0% { transform: translateX(220px); }
  20%, 70% { transform: translateX(0px) scaleY(1); }
  75% { transform: scaleY(-1); }
  100% { transform: translateY(-1000px) scaleY(-1); } }

div#john-peeking img { display: block; animation: popout 5s forwards; transform: translateX(240px); animation-delay: 5s; }

@keyframes fade-in { 0% { transform: translateY(0);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 1; } }

@keyframes wave { 0% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); } }

.fade-in-fast { animation: fade-in 250ms; }

.wave-emoji { display: inline-block; animation: wave 1s ease-in-out; animation-delay: 0.5s; animation-fill-mode: both; }

/*# sourceMappingURL=styles.css.map */