/******************************************************************************* Variables used throughout the theme. To adjust anything, simply edit the variables below and rebuild the theme. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;300;400;500&display=swap");
:root { --global-bg-color: #232840; --global-code-bg-color: #233554; --global-bg-color-light: #282D45; --global-text-color: #9ac6c9; --global-text-color-light: #B5E2E5; --global-theme-color: #59DF7F; --global-hover-color: #59DF7F; --global-distill-app-color: #e8e8e8; --global-button-color1: #00A84C; --link-color: #59DF7F; --link-shadow5: rgba(246, 73, 167, 0.5); --link-shadow6: rgba(246, 73, 167, 0.6); --link-shadow9: rgba(246, 73, 167, 0.9); }

:root .fa-sun { display: none; }

:root .fa-moon { padding-left: 10px; padding-top: 12px; display: block; }

html[data-theme='dark'] { --global-bg-color: #0a192f; --global-code-bg-color: #233554; --global-bg-color-light: #light-navy; --global-text-color: #a8b2d1; --global-text-color-light: #ccd6f6; --global-theme-color: #ff6363; --global-hover-color: #ff6363; --global-button-color1: #FF3D3D; --link-color: #ff6363; --link-shadow5: rgba(99, 255, 255, 0.5); --link-shadow6: rgba(99, 255, 255, 0.6); --link-shadow9: rgba(99, 255, 255, 0.9); }

html[data-theme='dark'] .fa-sun { padding-left: 10px; padding-top: 12px; display: block; }

html[data-theme='dark'] .fa-moon { display: none; }

/****************************************************************************** Content */
html, body { padding-bottom: 70px; color: var(--global-text-color); background-color: var(--global-bg-color); height: 100%; margin: 0; }

.wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: 5px; }

.footer, .push { height: 5px; }

body.fixed-top-nav { padding-top: 56px; }

body.sticky-bottom-footer { padding-bottom: 0; }

.container { max-width: 1150px; }

.profile img { width: 100%; }

/******************************************************************************* Styles for the base elements of the theme. */
@font-face { font-family: "calibre"; src: url("../fonts/Calibre/Calibre-Regular.woff"); font-display: swap; }

@font-face { font-family: "calibre-light"; src: url("../fonts/Calibre/Calibre-Light.woff"); font-display: swap; }

@font-face { font-family: "calibre-semibold"; src: url("../fonts/Calibre/Calibre-Semibold.woff"); font-display: swap; }

p, h1, h2, h3, h4, h5, h6, em, div, strong { color: var(--global-text-color); font-family: "calibre-light", sans-serif; font-size: 24px; }

a { text-decoration: none i !important; text-shadow: 0 2px 3px var(--link-shadow5); transition: all .3s ease-in; position: relative; }

@media screen and (max-width: 599px) { a, a:active, a:focus, a:link, a:visited { color: var(--link-color); } }

@media screen and (min-width: 600px) { a, a:active, a:focus, a:link, a:visited { color: var(--link-color); } }

a:hover { position: relative; text-shadow: 0 2px 10px var(--link-shadow9); text-decoration: none !important; }

a.button:hover, a.resp-sharing-button__link:hover { -webkit-animation: none; animation: none; }

a:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: var(--link-color); -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: scaleX(0); transform: scaleX(0); transition: -webkit-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; box-shadow: 0 2px 5px var(--link-shadow6); }

a:hover:before { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleX(1); transform: scaleX(1); }

a.nohover:hover { position: relative; text-shadow: none; text-decoration: none !important; }

a.button:hover, a.resp-sharing-button__link:hover { -webkit-animation: none; animation: none; }

a.nohover:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: transparent; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: scaleX(0); transform: scaleX(0); transition: -webkit-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; box-shadow: none; }

a.nohover:hover:before { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleX(1); transform: scaleX(1); }

.name { color: var(--global-text-color-light); font-family: "calibre-semibold", sans-serif; font-size: 7rem; white-space: nowrap; overflow: hidden; border-right: solid 0.2ch var(--global-text-color-light); width: 10.5ch; }

.name { animation: animated-text 2s linear .5s 1 normal both, animated-cursor 1s linear infinite; }

/* text animation */
@keyframes animated-text { from { width: 0; }
  to { width: 10.5ch; } }

/* cursor animations */
@keyframes animated-cursor { from { border-right-color: var(--global-text-color-light); }
  to { border-right-color: transparent; } }

.name-color { color: var(--global-theme-color); font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 20px; }

.about { float: left; width: 60%; line-height: normal; }

@media screen and (max-width: 500px) { .about { width: 100%; } .name { font-size: 2.5rem; } .name-color { font-size: 18px; } }

::-moz-selection { /* Code for Firefox */ color: var(--global-text-color-light); /* needs to be set as global for light mode */ background: var(--global-code-bg-color); }

::selection { color: var(--global-text-color-light); /* needs to be set as global for light mode */ background: var(--global-code-bg-color); }

.skip-link { position: absolute; top: -40px; left: 0; background: #000000; color: white; padding: 8px; z-index: 100; }

.skip-link:focus { top: 0; }

.profile { margin-left: 1rem; width: 100%; }

.profile .address { margin-bottom: 5px; margin-top: 5px; font-family: monospace; font-size: 1.2rem; }

.profile .address p { display: inline-block; margin: 0; }

@media (min-width: 576px) { .profile { width: 30%; } .profile .address p { display: block; } }

.post-description { margin-bottom: 2rem; font-size: 0.875rem; }

.post-description a { color: inherit; }

.post-description a:hover { color: var(--global-theme-color); text-decoration: none; }

.button-resume { background-color: transparent; /* Green */ border: 1px solid var(--global-theme-color); color: var(--global-theme-color); font-family: 'JetBrains Mono', monospace; padding: 1px 10px; text-align: justify; text-decoration: none; display: inline-block; font-size: 17px; margin: 10px 10px; cursor: pointer; border-radius: 8px; transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out; }

.button-resume:hover { background-color: var(--global-theme-color); color: black; }

.navbar { box-shadow: none; border-bottom: 0px solid #e8e8e8; background-color: var(--global-bg-color); opacity: 0.95; }

.navbar.navbar-light a:hover { text-decoration: none; }

.navbar.navbar-light .navbar-brand { color: var(--global-text-color); }

.navbar.navbar-light .navbar-nav .nav-item .nav-link { color: var(--global-text-color); }

.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover { color: var(--global-hover-color); }

.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link { background-color: inherit; font-weight: bolder; color: var(--global-theme-color); }

.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link:hover { color: var(--global-hover-color); }

.navbar.navbar-light .navbar-brand.social { padding-bottom: 0; padding-top: 0; font-size: 1.7rem; }

.navbar.navbar-light .navbar-brand.social a i::before { color: var(--global-text-color); -webkit-transition: all 0.2s ease-in-out; }

.navbar.navbar-light .navbar-brand.social a:hover i::before { color: var(--global-theme-color); }

.navbar-toggler .icon-bar { display: block; width: 22px; height: 2px; background-color: var(--global-text-color); border-radius: 1px; margin-bottom: 4px; transition: all 0.2s; }

.navbar-toggler .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; }

.navbar-toggler .middle-bar { opacity: 0; }

.navbar-toggler .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; }

.navbar-toggler.collapsed .top-bar { transform: rotate(0); }

.navbar-toggler.collapsed .middle-bar { opacity: 1; }

.navbar-toggler.collapsed .bottom-bar { transform: rotate(0); }

.header-bar { border-bottom: 1px transparent #e8e8e8; text-align: center; padding-top: 2rem; padding-bottom: 5rem; }

.header-bar h1 { color: var(--global-theme-color); font-size: 10rem; font-weight: bold; }

.post-list { margin: 0; margin-bottom: 40px; padding: 0; }

.post-list li { border: 1px transparent var(--global-theme-color); list-style: none; margin-top: 2rem; padding-top: 2rem; padding-bottom: 2rem; background-color: var(--global-code-bg-color); padding-left: 2rem; border-radius: 10px; }

.post-list li .post-meta { color: var(--global-text-color-light); font-size: 0.875rem; margin-bottom: 0; }

.post-list li a { text-decoration: none; font-size: 2rem; color: var(--global-text-color-light); }

.post-list li a:hover { color: var(--global-theme-color); }

.pagination .page-item .page-link { color: var(--global-text-color); }

.pagination .page-item .page-link:hover { color: #000000; }

.pagination .page-item.active .page-link { background-color: var(--global-theme-color); }

.pagination .page-item.active .page-link:hover { background-color: var(--global-theme-color); }

.distill a:hover { border-bottom-color: var(--global-theme-color); text-decoration: none; }

figure.highlight { margin: 0 0 1rem; }

pre { color: var(--global-text-color-light); background-color: var(--global-code-bg-color); border-radius: 6px; padding: 6px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 1.1rem; }

pre pre, pre code { background-color: transparent; border-radius: 0; padding: 0; font-family: 'IBM Plex Mono', monospace; }

code { color: var(--global-text-color-light); background-color: var(--global-code-bg-color); border-radius: 2px; padding: 2px 2px; font-family: 'IBM Plex Mono', monospace; }

html.transition, html.transition *, html.transition *:before, html.transition *:after { transition: all 750ms !important; transition-delay: 0 !important; }

.card { background-color: var(--global-bg-color-light); }

.card:hover { background-color: var(--global-code-bg-color); border: var(--global-theme-color) solid 1px; transition: 1s; }

.card:hover .card-title { color: var(--global-theme-color); font-family: "calibre-semibold", sans-serif; }

.card-title { color: var(--global-text-color-light); font-family: "calibre-semibold", sans-serif; }

.card-title:hover { color: var(--global-theme-color); font-family: "calibre-semibold", sans-serif; }

.card-text { color: var(--global-text-color-light); font-size: 30px; }

.card-techused { color: var(--global-text-color-light); font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 1rem; word-spacing: .1em; opacity: .4; }

.button-project { background-color: transparent; /* Green */ border: 1px solid var(--global-theme-color); color: var(--global-theme-color); font-family: 'IBM Plex Mono', monospace; padding: 1px 17px; text-align: justify; text-decoration: none; display: inline-block; font-size: 17px; margin: 10px 10px; cursor: pointer; border-radius: 8px; }

.button-project:hover { background-color: var(--global-theme-color); color: black; }

.port-title { color: var(--global-theme-color); font-size: 32px; font-family: "calibre", sans-serif; font-weight: bold; margin: 0 0 20px; text-shadow: 0 1px 5px var(--link-shadow6); }

.portfolio-page-wrapper { margin: 15px; background-color: var(--global-bg-color); }

.row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }

.column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; padding-top: 20px; }

.lang-column { background: var(--global-bg-color); padding: 15px; border-left: 2px dotted var(--global-theme-color); font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 18px; }

.soft-column { background: var(--global-bg-color); padding: 15px; border-left: 2px dotted var(--global-theme-color); font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 18px; }

.tablefont { font-size: 22px; }

.table-hover tbody tr:hover td { background: var(--global-bg-color); padding-left: 5px; }

.leftrad { border-radius: 5px 0 0 5px; }

.rightrad { border-radius: 0 5px 5px 0; }

table { padding-left: 10px; padding-right: 10px; }

td { text-align: left; padding-left: 20px; }

.highlight code, .highlight pre { color: #fdce93; background-color: #233554; }

.highlight .hll { background-color: #222; }

.highlight .err { color: #e37170; background-color: #3d3535; }

.highlight .k { color: #f0dfaf; }

.highlight .p { color: #41706f; }

.highlight .cs { color: #cd0000; font-weight: 700; }

.highlight .gd { color: #cd0000; }

.highlight .ge { color: #ccc; font-style: italic; }

.highlight .gr { color: red; }

.highlight .go { color: gray; }

.highlight .gs { color: #ccc; font-weight: 700; }

.highlight .gu { color: purple; font-weight: 700; }

.highlight .gt { color: #0040D0; }

.highlight .kc { color: #dca3a3; }

.highlight .kd { color: #ffff86; }

.highlight .kn { color: #dfaf8f; font-weight: 700; }

.highlight .kp { color: #cdcf99; }

.highlight .kr { color: #cdcd00; }

.highlight .ni { color: #c28182; }

.highlight .ne { color: #c3bf9f; font-weight: 700; }

.highlight .nn { color: #8fbede; }

.highlight .vi { color: #ffffc7; }

.highlight .c, .preview-zenburn .highlight .g, .preview-zenburn .highlight .cm, .preview-zenburn .highlight .cp, .preview-zenburn .highlight .c1 { color: #7f9f7f; }

.highlight .l, .preview-zenburn .highlight .x, .preview-zenburn .highlight .no, .preview-zenburn .highlight .nd, .preview-zenburn .highlight .nl, .preview-zenburn .highlight .nx, .preview-zenburn .highlight .py, .preview-zenburn .highlight .w { color: #ccc; }

.highlight .n, .preview-zenburn .highlight .nv, .preview-zenburn .highlight .vg { color: #dcdccc; }

.highlight .o, .preview-zenburn .highlight .ow { color: #f0efd0; }

.highlight .gh, .preview-zenburn .highlight .gp { color: #dcdccc; font-weight: 700; }

.highlight .gi, .preview-zenburn .highlight .kt { color: #00cd00; }

.highlight .ld, .preview-zenburn .highlight .s, .preview-zenburn .highlight .sb, .preview-zenburn .highlight .sc, .preview-zenburn .highlight .sd, .preview-zenburn .highlight .s2, .preview-zenburn .highlight .se, .preview-zenburn .highlight .sh, .preview-zenburn .highlight .si, .preview-zenburn .highlight .sx, .preview-zenburn .highlight .sr, .preview-zenburn .highlight .s1, .preview-zenburn .highlight .ss { color: #cc9393; }

.highlight .m, .preview-zenburn .highlight .mf, .preview-zenburn .highlight .mh, .preview-zenburn .highlight .mi, .preview-zenburn .highlight .mo, .preview-zenburn .highlight .il { color: #8cd0d3; }

.highlight .na, .preview-zenburn .highlight .nt { color: #9ac39f; }

.highlight .nb, .preview-zenburn .highlight .nc, .preview-zenburn .highlight .nf, .preview-zenburn .highlight .bp, .preview-zenburn .highlight .vc { color: #efef8f; }

/******************************************************************************* Style overrides for distill blog posts. */
d-byline { border-top-color: #e8e8e8 !important; }

d-byline h3 { color: var(--global-text-color) !important; }

d-byline a, d-article d-byline a { color: var(--global-text-color) !important; }

d-byline a:hover, d-article d-byline a:hover { color: var(--global-hover-color) !important; }

d-article { border-top-color: #e8e8e8 !important; }

d-article a, d-article p, d-article h1, d-article h2, d-article h3, d-article h4, d-article h5, d-article h6 { color: var(--global-text-color) !important; }

d-article a, d-article h1, d-article h2, d-article hr { border-bottom-color: #e8e8e8 !important; }

d-article a:hover { border-bottom-color: var(--global-hover-color) !important; }

d-appendix { border-top-color: #e8e8e8 !important; color: var(--global-distill-app-color) !important; }

d-appendix h3, d-appendix li, d-appendix span { color: var(--global-distill-app-color) !important; }

d-appendix a, d-appendix a.footnote-backlink { color: var(--global-distill-app-color) !important; }

d-appendix a:hover, d-appendix a.footnote-backlink:hover { color: var(--global-hover-color) !important; }

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