/******
    This contains global variables/mixins/etc.
***/
html,
body {
  overflow-x: hidden;
}

html {
  background: #fff;
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.prevent-scrolling {
  overflow: hidden;
}
html.forced-prevent-scrolling {
  overflow: hidden !important;
}
html.prevent-scrolling.is-mobile-device, html.prevent-scrolling.is-tablet, html.forced-prevent-scrolling.is-mobile-device, html.forced-prevent-scrolling.is-tablet {
  position: fixed;
  height: 100%;
  touch-action: none !important;
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: #131313;
}
.prevent-scrolling body, .forced-prevent-scrolling body {
  touch-action: none;
}

section,
div {
  box-sizing: border-box;
}

button {
  color: #131313;
  cursor: pointer;
}

.for-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  pointer-events: none;
}

img,
figure {
  max-width: 100%;
  height: auto;
}

.skip-to-main {
  position: absolute;
  left: -200vw;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 30;
}
.skip-to-main:focus {
  left: 20px;
  top: 20px;
  width: auto;
  height: auto;
  padding: 20px;
  background: #FBFBFB;
  font-size: 1.0625rem;
  color: #131313;
}

/****
    Contains all of the styles for the page
***/
@keyframes fade-in-body {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body {
  position: relative;
  opacity: 0;
  animation: fade-in-body 0.3s ease-out 0.2s forwards;
}

#main-content {
  overflow: hidden;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% + 90px);
  max-width: none;
  height: calc(100% + 190px);
  object-fit: cover;
  object-position: center;
  opacity: 0.08;
  z-index: 0;
  transition: opacity 0.4s ease 0s;
}
.page-bg.for-dark-mode {
  opacity: 0;
  z-index: -1;
}

#welcome-panel {
  position: relative;
  padding-top: 95vh;
  margin-bottom: 20vh;
}
#welcome-panel .bg-image,
#welcome-panel .bg-image img,
#welcome-panel .title,
#welcome-panel .title-shadow,
#welcome-panel .statement {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
#welcome-panel .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100vh - 20px);
  width: calc(100vw - 20px);
  margin: 10px;
  overflow: hidden;
  background-color: rgba(83, 57, 57, 0.12);
  pointer-events: none;
}
#welcome-panel .bg-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(31, 31, 31, 0) 0%, rgba(31, 31, 31, 0) 22%, rgba(31, 31, 31, 0.85) 50%, rgba(31, 31, 31, 0.05) 85%, rgba(31, 31, 31, 0.05) 100%);
  opacity: 0.1;
}
#welcome-panel .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: screen;
}
#welcome-panel .title-box {
  position: absolute;
  top: 50dvh;
  left: 50%;
  transform: translateX(-50%);
}
#welcome-panel .title,
#welcome-panel .title-shadow {
  position: relative;
  margin: 0;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: 5.625rem;
  line-height: 1;
  color: #131313;
  text-shadow: -1px -1px 0 #fff, 0px -1px 0 #fff, 1px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, -1px 1px 0 #fff, 0px 1px 0 #fff, 1px 1px 0 #fff;
}
#welcome-panel .title-shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #0f0f0f;
  font-size: em(1.3);
  text-shadow: none;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#welcome-panel .statement {
  position: relative;
  max-width: 1000px;
  width: 60%;
  margin: 0 auto;
  padding: 42px 45px;
  border-radius: 8px;
  background: #FBFBFB;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: 0.3px;
}
#portfolio-work {
  padding-top: 20px;
  margin: 0 20vw 130px;
  padding-bottom: 200px;
}
#portfolio-work .pin-spacer,
#portfolio-work .project {
  pointer-events: none;
}
#portfolio-work .project {
  position: relative;
  padding: 60px 0;
  margin: 0 auto;
  max-width: 900px;
}
#portfolio-work .project h2,
#portfolio-work .project p,
#portfolio-work .project span {
  margin: 0;
}
#portfolio-work .project .project-card {
  position: relative;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #FBFBFB;
  border: solid 35px #FBFBFB;
  box-shadow: 1px 4px 5px rgba(19, 19, 19, 0.1);
  transition: border 0.4s ease 0s, background-color 0.4s ease 0s;
  pointer-events: auto;
  will-change: transform;
}
#portfolio-work .project .project-link {
  position: relative;
  display: block;
  height: 100%;
  line-height: 0;
  color: #131313;
  text-decoration: none;
  transition: color 0.4s ease 0s;
}
#portfolio-work .project .project-link::after {
  content: "\e918";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  background: rgba(19, 19, 19, 0.6);
  backdrop-filter: blur(1px);
  border-radius: 100%;
  font-family: "jk-icons";
  font-size: 20px;
  color: #FBFBFB;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease 0s;
}
#portfolio-work .project .project-link:hover::after, #portfolio-work .project .project-link:focus-visible::after {
  opacity: 1;
  transform: none;
}
#portfolio-work .project .project-link:hover .project-image img, #portfolio-work .project .project-link:focus-visible .project-image img {
  transform: scale(1.25) rotate(-1.4deg);
  filter: grayscale(0);
  transition: transform 10s ease 0s, filter 1.3s ease 0s;
}
#portfolio-work .project .project-image {
  position: relative;
  margin: 0;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 7/5;
  background: #FBFBFB;
  padding: 3px;
  overflow: hidden;
}
#portfolio-work .project .project-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 3px rgba(19, 19, 19, 0.2);
}
#portfolio-work .project .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.6);
  transition: transform 2s ease 0s, filter 1s ease 0s;
}
#portfolio-work .project .project-info {
  padding: 20px 0 35px;
  line-height: 1.1;
}
#portfolio-work .project .project-title {
  font-family: "Permanent Marker", cursive;
  letter-spacing: 1px;
}
#portfolio-work .project .project-location {
  margin-top: 2px;
}
#portfolio-work .project .project-role {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}
#portfolio-work .project .project-role strong {
  color: #007A8E;
  letter-spacing: 0.6px;
  transition: color 0.4s ease 0s;
}
#portfolio-work .project .project-role span {
  font-weight: 400;
  letter-spacing: 0.4px;
}
#portfolio-work .project .project-award {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: 5px;
  width: 40px;
  height: 40px;
  text-decoration: none;
  transform: rotate(13deg);
}
#portfolio-work .project .project-award::before {
  content: "\e900";
  display: block;
  font-family: "jk-icons";
  font-size: 26px;
  color: #EFBF04;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2588235294);
  opacity: 0.8;
  transition: all 0.4s ease 0s;
}
#portfolio-work .project .project-award:hover::before, #portfolio-work .project .project-award:focus-visible::before {
  transform: scale(1.2) rotate(5deg);
}

@media (max-width: 1279px) {
  #welcome-panel {
    margin-bottom: 17dvh;
  }
  #portfolio-work {
    padding-top: 30px;
  }
}
@media (max-width: 1023px) {
  #welcome-panel {
    margin-bottom: 12dvh;
  }
  #welcome-panel .title,
  #welcome-panel .title-shadow {
    font-size: 4.3125rem;
  }
  #welcome-panel .statement {
    padding: 30px 35px;
    font-size: 1rem;
  }
  #portfolio-work {
    margin: 0 10vw 100px;
    padding-top: 0;
    padding-bottom: 150px;
  }
  #portfolio-work .project .project-card {
    height: auto;
    aspect-ratio: unset;
  }
  #portfolio-work .project .project-image {
    max-height: 60dvh;
  }
}
.is-mobile-device #portfolio-work .project .project-image img {
  filter: none;
}
.is-mobile-device #portfolio-work .project .zoom-box {
  display: flex;
  width: 100%;
}

.is-mobile-device #portfolio-work .project .project-link::after,
.is-tablet #portfolio-work .project .project-link::after {
  width: 40px;
  height: 40px;
  font-size: 18px;
  transform: none;
  opacity: 1;
}

@media (max-width: 1023px) {
  #portfolio-work .project .project-link::after {
    width: 40px;
    height: 40px;
    font-size: 18px;
    transform: none;
    opacity: 1;
  }
}
@media (max-width: 599px) {
  #welcome-panel {
    margin-bottom: 10dvh;
  }
  #welcome-panel .title,
  #welcome-panel .title-shadow {
    font-size: 2.875rem;
  }
  #welcome-panel .statement {
    width: 90%;
    padding: 22px 33px;
    font-size: 0.9375rem;
    line-height: 1.4;
  }
  #portfolio-work {
    margin: 0 8dvw 20px !important;
    padding-top: 0;
    padding-bottom: 30px;
  }
  #portfolio-work .project .project-card {
    border-width: 26px;
  }
  #portfolio-work .project .project-image {
    max-height: 40dvh;
  }
  #portfolio-work .project .project-info {
    padding-bottom: 20px;
  }
  #portfolio-work .project .project-title {
    font-size: 19px;
    font-weight: 400;
  }
  #portfolio-work .project .project-location {
    font-size: 0.875rem;
  }
  #portfolio-work .project .project-award {
    margin-left: auto;
  }
}
@media (max-width: 369px) {
  #welcome-panel .statement {
    font-size: 0.8125rem;
  }
}
#main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 30px;
  background: transparent;
}
#main-header > section {
  z-index: 10;
}

#logo-badge {
  position: relative;
}
#logo-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  filter: blur(16px);
  opacity: 0.8;
  transform: scale(0.33) translate(20%, 20%);
  transform-origin: top left;
  pointer-events: none;
}
#logo-badge > div {
  position: relative;
  padding: 29px 30px;
  background: #FBFBFB;
  box-shadow: 0 0 transparent;
  color: #131313;
  border-radius: 2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.45s ease 0s, background 0.4s ease 0s;
}
#logo-badge h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  transition: color 0.4s ease 0s;
}
#logo-badge h1 strong {
  position: relative;
  font-family: "Permanent Marker", cursive;
  font-size: 2.625rem;
  font-weight: 400;
}
#logo-badge h1 strong.main-name::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 11px;
  left: 3px;
  height: 2px;
  background: #F44A1F;
  transform: skew(10px);
  transition: background 0.4s ease 0s;
}
#logo-badge h1 strong.main-name span {
  position: relative;
}
#logo-badge h1 strong.sticky-name {
  display: none;
}

#main-menu {
  position: relative;
}

#menu-toggle {
  position: relative;
  width: 69px;
  height: 69px;
  background: transparent;
  border: none;
  border-radius: 2px;
  z-index: 1;
  transition: all 0.4s ease 0s;
}
#menu-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #FBFBFB;
  border-radius: 2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease 0s;
}
#menu-toggle .control-icon {
  display: inline-block;
  position: relative;
}
#menu-toggle .control-icon span {
  display: block;
  width: 30px;
  height: 4px;
  margin: 3px 0;
  border-radius: 10px;
  background: #131313;
  transition: all 0.4s ease 0s;
}
#menu-toggle .control-icon span.bar-1, #menu-toggle .control-icon span.bar-3 {
  width: 20px;
  margin-left: auto;
}
#menu-toggle:hover::before, #menu-toggle:focus-visible::before, #menu-toggle[aria-expanded=true]::before {
  box-shadow: -0.7px 3.94px 5px rgba(0, 0, 0, 0.1);
  transform: rotate(-10deg) scale(1.01);
}
#menu-toggle:hover .control-icon span.bar-1, #menu-toggle:hover .control-icon span.bar-3, #menu-toggle:focus-visible .control-icon span.bar-1, #menu-toggle:focus-visible .control-icon span.bar-3, #menu-toggle[aria-expanded=true] .control-icon span.bar-1, #menu-toggle[aria-expanded=true] .control-icon span.bar-3 {
  width: 30px;
}
#menu-toggle:hover .control-icon span.bar-2, #menu-toggle:hover .control-icon span.bar-4, #menu-toggle:focus-visible .control-icon span.bar-2, #menu-toggle:focus-visible .control-icon span.bar-4, #menu-toggle[aria-expanded=true] .control-icon span.bar-2, #menu-toggle[aria-expanded=true] .control-icon span.bar-4 {
  width: 20px;
}
#menu-toggle[aria-expanded=true] {
  transform: scale(0.7);
  transition-delay: 0.25s;
}
#menu-toggle[aria-expanded=true]::before {
  box-shadow: -4px 0 5px rgba(0, 0, 0, 0.1);
  transform: rotate(-90deg) scale(1.01);
}

#main-menu-panel {
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  padding: 16px 16px 15px 18px;
  background: #FBFBFB;
  border-radius: 2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  transform: translate(60vw, -50%);
  transition: background-color 0.4s ease 0s;
  z-index: 0;
  animation: menu-slide-out 0.8s forwards;
}
@keyframes menu-slide-in {
  0% {
    transform: translate(60vw, -50%);
    z-index: 0;
  }
  50% {
    transform: translate(-75px, -50%);
    z-index: 0;
  }
  51% {
    transform: translate(-75px, -50%);
    z-index: 2;
  }
  100% {
    transform: translate(0, -50%);
    z-index: 2;
  }
}
@keyframes menu-slide-out {
  0% {
    transform: translate(0, -50%);
    z-index: 2;
  }
  25% {
    transform: translate(-75px, -50%);
    z-index: 2;
  }
  26% {
    transform: translate(-75px, -50%);
    z-index: 0;
  }
  100% {
    transform: translate(60vw, -50%);
    z-index: 0;
  }
}
#main-menu-panel.hidden {
  visibility: hidden;
}
#main-menu-panel[aria-hidden=false] {
  animation: menu-slide-in 0.8s forwards;
}
#main-menu-panel[aria-hidden=false] ul::after {
  clip-path: inset(0);
  transition-delay: 0.6s;
}
#main-menu-panel ul {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0 30px 0 0;
  list-style: none;
}
#main-menu-panel ul::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: 13px;
  width: 1px;
  height: 21px;
  background: #bbb;
  clip-path: inset(50% 0);
  transition: all 0.4s ease 0s;
}
#main-menu-panel ul > li {
  padding: 0 9px;
}
#main-menu-panel button,
#main-menu-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  text-decoration: none;
  color: #131313;
  transition: color 0.4s ease 0s;
}
#main-menu-panel button i,
#main-menu-panel a i {
  transition: transform 0.4s ease 0s;
}
#main-menu-panel button .label,
#main-menu-panel a .label {
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  padding: 4px 10px;
  background: #f1f1f1;
  border-radius: 4px;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem !important;
  color: #000;
  letter-spacing: 0.45px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  word-break: break-word;
  opacity: 0;
  transform: translate(0, -11px);
  transition: all 0.4s ease 0s;
}
#main-menu-panel button .label::before,
#main-menu-panel a .label::before {
  content: "";
  position: absolute;
  left: calc(50% - 9px);
  bottom: calc(100% - 4px);
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 9px 0 9px;
  border-color: transparent transparent #f1f1f1 transparent;
  transform: rotate(0deg);
  transition: all 0.4s ease 0s;
}
#main-menu-panel button:hover, #main-menu-panel button:focus-visible,
#main-menu-panel a:hover,
#main-menu-panel a:focus-visible {
  color: #007A8E;
}
#main-menu-panel button:hover .label, #main-menu-panel button:focus-visible .label,
#main-menu-panel a:hover .label,
#main-menu-panel a:focus-visible .label {
  transform: none;
  opacity: 1;
}
#main-menu-panel button:hover .label::before, #main-menu-panel button:focus-visible .label::before,
#main-menu-panel a:hover .label::before,
#main-menu-panel a:focus-visible .label::before {
  border-width: 0 9px 10px 9px;
}
#main-menu-panel button i,
#main-menu-panel button i::before {
  transition: all 0.84s ease 0s;
}
#main-menu-panel button i::before {
  display: inline-block;
}
#main-menu-panel button .toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
#main-menu-panel button.dark-mode-toggle {
  font-size: 1.5625rem;
}
#main-menu-panel button.dark-mode-toggle i {
  display: block;
  clip-path: inset(-2px);
}
#main-menu-panel button.dark-mode-toggle.dark-mode i {
  opacity: 0;
}
#main-menu-panel button.dark-mode-toggle.dark-mode .toggle-icon {
  opacity: 1;
}
#main-menu-panel button.dark-mode-toggle:hover i, #main-menu-panel button.dark-mode-toggle:focus-visible i {
  color: #007A8E;
}
#main-menu-panel button.dark-mode-toggle:hover i::before, #main-menu-panel button.dark-mode-toggle:focus-visible i::before {
  transform: translate(0, 50%);
  transition-duration: 1.1s;
}
#main-menu-panel button.dark-mode-toggle:hover.dark-mode i, #main-menu-panel button.dark-mode-toggle:focus-visible.dark-mode i {
  color: #F44A1F;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.8%, 0, 0);
    /* Move slightly left */
  }
  20%, 80% {
    transform: translate3d(1.75%, 0, 0);
    /* Move slightly right */
  }
  30%, 50%, 70% {
    transform: translate3d(-1%, 0, 0);
    /* Move further left */
  }
  40%, 60% {
    transform: translate3d(2.5%, 0, 0);
    /* Move further right */
  }
}
#main-menu-panel button.motion-toggle i {
  position: relative;
}
#main-menu-panel button.motion-toggle i::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 3px;
  background: #131313;
  opacity: 1;
  transform: rotate(-45deg);
  clip-path: inset(0);
  transition: all 0.4s ease 0s;
}
#main-menu-panel button.motion-toggle.reduce-mode i::after {
  clip-path: inset(50% 0);
}
#main-menu-panel button.motion-toggle:hover i::before, #main-menu-panel button.motion-toggle:focus-visible i::before {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  /* Improves performance by promoting element to its own layer */
  backface-visibility: hidden;
  /* Prevents a slight flicker at the end in some browsers */
  perspective: 1000px;
  /* Needed for backface-visibility to work */
}
#main-menu-panel button.code-view-toggle:hover i:not(.toggle-icon), #main-menu-panel button.code-view-toggle:focus-visible i:not(.toggle-icon) {
  transform: scale(1.05) translate(2px, 4px) rotate(3deg);
}
#main-menu-panel button.code-view-toggle:hover .toggle-icon, #main-menu-panel button.code-view-toggle:focus-visible .toggle-icon {
  transform: scale(1.05) translate(-51%, -55%) rotate(-3deg);
}
#main-menu-panel button.code-view-toggle[aria-expanded=true] i {
  opacity: 0;
}
#main-menu-panel button.code-view-toggle[aria-expanded=true] .toggle-icon {
  opacity: 1;
}
#main-menu-panel a.linkedin-link {
  font-size: 1.9375rem;
}
#main-menu-panel a.linkedin-link:hover, #main-menu-panel a.linkedin-link:focus-visible {
  color: #0077B5;
}
#main-menu-panel a.linkedin-link:hover i, #main-menu-panel a.linkedin-link:focus-visible i {
  transform: scale(1.04) rotate(2.5deg);
}
#main-menu-panel a.em-link:hover i, #main-menu-panel a.em-link:focus-visible i, #main-menu-panel a.resume-link:hover i, #main-menu-panel a.resume-link:focus-visible i {
  transform: scale(1.05) translate(0, -3px);
}
#main-menu-panel .close-trigger {
  font-size: 1.5625rem;
  line-height: 1;
}

@media (min-width: 1024px) {
  .is-tablet #main-menu-panel ul {
    align-items: flex-start;
  }
  .is-tablet #main-menu-panel a,
  .is-tablet #main-menu-panel button {
    flex-direction: column;
  }
  .is-tablet #main-menu-panel a i,
  .is-tablet #main-menu-panel button i {
    display: flex;
    align-items: center;
    min-height: 31px;
  }
  .is-tablet #main-menu-panel a .label,
  .is-tablet #main-menu-panel button .label {
    position: relative;
    top: auto;
    padding: 4px 0 0;
    background: transparent;
    font-size: 0.75rem !important;
    color: #131313;
    white-space: unset;
    word-break: normal;
    transform: none;
    opacity: 1;
  }
  .is-tablet #main-menu-panel a .label::before,
  .is-tablet #main-menu-panel button .label::before {
    display: none;
  }
}
@media (max-width: 1023px) {
  #logo-badge > div {
    padding: 27px 30px 36px;
  }
  #logo-badge .label {
    font-size: 1.75rem;
  }
  #logo-badge .main-name {
    font-size: 2.3125rem;
  }
  #main-menu-panel {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    flex-direction: column;
    padding: 15px 4px 10px;
    transform: translate(0, -110vh);
    animation: mobile-menu-slide-out 0.8s forwards;
  }
  @keyframes mobile-menu-slide-in {
    0% {
      transform: translate(0, -110vh);
      z-index: 0;
    }
    50% {
      transform: translate(0, 75px);
      z-index: 0;
    }
    51% {
      transform: translate(0, 75px);
      z-index: 2;
    }
    100% {
      transform: translate(0, 0);
      z-index: 2;
    }
  }
  @keyframes mobile-menu-slide-out {
    0% {
      transform: translate(0, 0);
      z-index: 2;
    }
    25% {
      transform: translate(0, 75px);
      z-index: 2;
    }
    26% {
      transform: translate(0, 75px);
      z-index: 0;
    }
    100% {
      transform: translate(0, -110vh);
      z-index: 0;
    }
  }
  #main-menu-panel::after {
    content: "";
    position: absolute;
    top: 59px;
    right: calc(50% - 10px);
    width: 20px;
    height: 1px;
    background: #bbb;
    clip-path: inset(0 50%);
    transition: all 0.4s ease 0s;
  }
  #main-menu-panel[aria-hidden=false] {
    animation: mobile-menu-slide-in 0.8s forwards;
  }
  #main-menu-panel[aria-hidden=false]::after {
    clip-path: inset(0);
    transition-delay: 0.6s;
  }
  #main-menu-panel ul {
    order: 2;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 180px);
    margin-top: -9px;
    padding: 0;
    overflow: auto;
  }
  #main-menu-panel ul::after {
    display: none;
  }
  #main-menu-panel ul > li {
    margin: 9px 0;
    padding: 0;
  }
  #main-menu-panel button,
  #main-menu-panel a {
    flex-direction: column;
    font-size: 1.75rem;
  }
  #main-menu-panel button i,
  #main-menu-panel a i {
    font-size: 1.375rem;
  }
  #main-menu-panel button .label,
  #main-menu-panel a .label {
    position: relative;
    top: 0;
    padding: 4px 0 0;
    background: transparent;
    font-size: 0.75rem !important;
    letter-spacing: 0.3px;
    color: #131313;
    white-space: normal;
    transform: none;
    opacity: 1;
  }
  #main-menu-panel button .label::before,
  #main-menu-panel a .label::before {
    display: none;
  }
  #main-menu-panel button .toggle-icon {
    top: 0;
    transform: translate(-50%, 0);
  }
  #main-menu-panel .close-trigger {
    margin-bottom: 28px;
    order: 1;
    font-size: 1.25rem;
    transform: rotate(-90deg);
  }
  #main-menu-panel .close-trigger i {
    font-size: inherit;
  }
}
@media (max-width: 599px) {
  #logo-badge > div {
    padding: 13px 22px 16px;
  }
  #logo-badge h1 {
    display: flex;
    align-items: center;
  }
  #logo-badge h1 strong.main-name {
    font-size: 1.3125rem;
  }
  #logo-badge h1 strong.main-name::before {
    bottom: 1px;
  }
  #logo-badge .label {
    margin-right: 4px;
    font-size: 0.875rem;
  }
  #menu-toggle {
    width: 50px;
    height: 50px;
  }
  #menu-toggle .control-icon {
    display: inline-block;
    position: relative;
  }
  #menu-toggle .control-icon span {
    width: 27px;
    height: 3px;
  }
  #menu-toggle .control-icon span.bar-1, #menu-toggle .control-icon span.bar-3 {
    width: 17px;
  }
  #menu-toggle:hover .control-icon span.bar-1, #menu-toggle:hover .control-icon span.bar-3, #menu-toggle:focus-visible .control-icon span.bar-1, #menu-toggle:focus-visible .control-icon span.bar-3, #menu-toggle[aria-expanded=true] .control-icon span.bar-1, #menu-toggle[aria-expanded=true] .control-icon span.bar-3 {
    width: 27px;
  }
  #menu-toggle:hover .control-icon span.bar-2, #menu-toggle:hover .control-icon span.bar-4, #menu-toggle:focus-visible .control-icon span.bar-2, #menu-toggle:focus-visible .control-icon span.bar-4, #menu-toggle[aria-expanded=true] .control-icon span.bar-2, #menu-toggle[aria-expanded=true] .control-icon span.bar-4 {
    width: 17px;
  }
  #main-menu-panel {
    right: -4px;
    left: -4px;
  }
  #main-menu-panel ul a i,
  #main-menu-panel ul button i {
    font-size: 1.125rem;
  }
  #main-menu-panel .close-trigger {
    font-size: 1.1875rem;
  }
}
@media (max-width: 369px) {
  #main-header {
    padding: 20px;
  }
  #logo-badge h1 strong.main-name {
    font-size: 1.125rem;
  }
  #logo-badge h1 strong.main-name::before {
    bottom: 1px;
  }
  #logo-badge .label {
    margin-right: 4px;
    font-size: 0.8125rem;
  }
  #main-menu-panel button,
  #main-menu-panel a {
    font-size: 1.25rem;
  }
  #main-menu-panel button i,
  #main-menu-panel a i {
    font-size: 1.125rem;
  }
}
#main-footer {
  position: relative;
  padding: 27px 42px;
  background: #FBFBFB;
  overflow: hidden;
  transition: background-color 0.5s ease 0s;
}

#site-information {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#site-stack ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
#site-stack ul > li {
  margin: 0 15px 0 0;
}
#site-stack p {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1;
  transition: color 0.5s ease 0s;
}
#site-stack p.icon-php {
  color: #474A8A;
}
#site-stack p.icon-html5 {
  color: #F16529;
}
#site-stack p.icon-sass {
  font-size: 1.625rem;
  color: #CD669A;
}
#site-stack p.icon-js-square {
  font-size: 1.625rem;
  color: #323330;
}
#site-stack p.icon-font-awesome-flag {
  font-size: 1.25rem;
  color: #538DD7;
}
#site-stack p.icon-universal-access {
  font-size: 1.5625rem;
  color: #000;
}
#site-stack p.icon-ghost {
  font-size: 1.375rem;
  color: #737373;
}

#copyright {
  flex-shrink: 0;
  font-family: "Pacifico", cursive;
  font-size: 1.1875rem;
  letter-spacing: 0.8px;
  transition: color 0.5s ease 0s;
  overflow: hidden;
}
#copyright small {
  display: block;
  padding: 4px 8px;
}

#disclaimer,
#mobile-disclaimer {
  max-width: 900px;
  margin: 0 0 30px auto;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-align: right;
  overflow: hidden;
}
#disclaimer p,
#mobile-disclaimer p {
  margin: 0;
}

#mobile-disclaimer {
  display: none;
}

.full-motion #main-footer {
  box-shadow: 0 0 6px rgba(19, 19, 19, 0.05);
}
.full-motion #main-footer #site-stack p,
.full-motion #main-footer #copyright small,
.full-motion #main-footer #disclaimer p {
  transition: all 0.5s ease 0s;
}
.full-motion #main-footer:not(.in-view) #site-stack p {
  transform: translate(0, 20dvh);
}
.full-motion #main-footer:not(.in-view) #copyright small {
  transform: translate(100%, 0);
}
.full-motion #main-footer:not(.in-view) #disclaimer p {
  transform: translate(0, 120%);
}
.full-motion #main-footer.in-view #site-stack li:nth-child(1) p {
  transition-delay: 0.05s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(2) p {
  transition-delay: 0.1s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(3) p {
  transition-delay: 0.15s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(4) p {
  transition-delay: 0.2s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(5) p {
  transition-delay: 0.25s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(6) p {
  transition-delay: 0.3s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(7) p {
  transition-delay: 0.35s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(8) p {
  transition-delay: 0.4s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(9) p {
  transition-delay: 0.45s;
}
.full-motion #main-footer.in-view #site-stack li:nth-child(10) p {
  transition-delay: 0.5s;
}

@media (max-width: 1023px) {
  #main-footer {
    padding-right: 30px;
    padding-left: 30px;
  }
}
@media (max-width: 599px) {
  #site-information {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #site-stack {
    margin-bottom: 20px;
    overflow: hidden;
  }
  #site-stack ul > li {
    margin: 0 8px;
  }
  #copyright {
    margin-left: -10px;
  }
  #disclaimer {
    display: none;
  }
  #mobile-disclaimer {
    display: block;
    margin-top: 26px;
    margin-bottom: 0;
    text-align: center;
    line-height: 1.5;
  }
}
@media (max-width: 369px) {
  #main-footer {
    padding-right: 22px;
    padding-left: 22px;
  }
  #site-stack ul {
    justify-content: center;
    flex-wrap: wrap;
  }
  #site-stack ul > li {
    margin-bottom: 4px;
  }
  #site-stack p {
    font-size: 1.25rem;
  }
}
/****
    Contains all of the styles for the code-view
***/
#code-view {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, -100dvh);
  pointer-events: none;
  visibility: hidden;
}
#code-view > div {
  height: 100%;
}
#code-view [role=tab]:focus-visible {
  outline-offset: 3px;
}
#code-view .code-type-header,
#code-view .file-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  pointer-events: none;
}
#code-view #code-view-tabs {
  width: 100dvw;
  height: calc(70dvh - 60px);
  padding: 40px 40px 30px;
}
#code-view #code-view-tabs > [role=tablist] {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 20px 30px;
  background: rgba(251, 251, 251, 0.001);
  backdrop-filter: blur(3px);
  border-radius: 2px;
  border: solid 1px rgba(19, 19, 19, 0.5);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
#code-view #code-view-tabs > [role=tablist] [role=tab] {
  position: relative;
  margin: 6px 12px 6px 0;
  padding: 6px 10px;
  background: transparent;
  border: solid 2px rgba(0, 122, 142, 0.8);
  border-radius: 3px;
  perspective: 600px;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  overflow: hidden;
  transition: color 0.4s ease 0s;
}
#code-view #code-view-tabs > [role=tablist] [role=tab]::before, #code-view #code-view-tabs > [role=tablist] [role=tab]::after {
  content: "";
  position: absolute;
}
#code-view #code-view-tabs > [role=tablist] [role=tab]::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #007A8E;
  transform-style: preserve-3d;
  transform: rotate3d(0, 1, 1, -180deg) scale(0.5);
  transform-origin: 25% left;
  opacity: 0;
  border-radius: 50px;
  transition: all 0.55s ease 0s, opacity 0.3s ease 0.25s;
}
#code-view #code-view-tabs > [role=tablist] [role=tab]::after {
  right: -1px;
  bottom: -8px;
  height: 20px;
  width: 8px;
  background: #FBFBFB;
  transform: translate(0, 12px) rotate(45deg);
  transition: all 0.33s ease 0s;
}
#code-view #code-view-tabs > [role=tablist] [role=tab] span {
  position: relative;
}
#code-view #code-view-tabs > [role=tablist] [role=tab][aria-selected=true] {
  color: #F9F9F9;
  transition-duration: 0.63;
}
#code-view #code-view-tabs > [role=tablist] [role=tab][aria-selected=true]::before {
  transform: none;
  transform-origin: 20% 40%;
  opacity: 1;
  border-radius: 0;
  transition: all 0.6s ease 0s, opacity 0.2s ease 0s;
}
#code-view #code-view-tabs > [role=tablist] [role=tab][aria-selected=true]::after {
  transform: translate(0, 0) rotate(45deg);
  transition: all 0.33s ease 0.6s;
}
#code-view .code-files.is-hidden,
#code-view .code-file.is-hidden {
  display: none;
}
#code-view .code-files {
  padding-top: 20px;
}
#code-view .code-files > [role=tablist] {
  margin-top: 8px;
}
#code-view .code-files > [role=tablist] [role=tab] {
  position: relative;
  margin: 0 -1px -1px 0;
  padding: 8px 18px;
  background: transparent;
  backdrop-filter: blur(2px);
  border: solid 1px rgba(19, 19, 19, 0.4);
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.2;
  box-sizing: border-box;
  transition: all 0.4s ease 0s;
}
#code-view .code-files > [role=tablist] [role=tab]::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  background: #007A8E;
  transition: all 0.4s ease 0s;
}
#code-view .code-files > [role=tablist] [role=tab] span {
  position: relative;
}
#code-view .code-files > [role=tablist] [role=tab][aria-selected=true] {
  color: #FBFBFB;
}
#code-view .code-files > [role=tablist] [role=tab][aria-selected=true]::before {
  top: 0;
}
#code-view .code-files,
#code-view .code-file,
#code-view .code-box,
#code-view .zoom-box {
  height: 100%;
}
#code-view .code-file {
  padding: 30px;
  border-radius: 0 2px 2px 2px;
  background: rgba(251, 251, 251, 0.02);
  backdrop-filter: blur(3px);
  border: solid 1px rgba(19, 19, 19, 0.5);
}
#code-view .code-box {
  border: solid 1px rgba(19, 19, 19, 0.2);
  box-sizing: border-box;
}
#code-view .zoom-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: transparent;
  border-radius: 100%;
  font-size: 0.875rem;
  line-height: 1;
}
#code-view .zoom-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(251, 251, 251, 0.2);
  backdrop-filter: blur(2px);
  border: solid 1px rgba(19, 19, 19, 0.2);
  border-radius: 100%;
  transition: all 0.4s ease 0s;
}
#code-view .zoom-toggle i {
  position: relative;
}
#code-view .zoom-toggle:hover::before, #code-view .zoom-toggle:focus-visible::before {
  transform: scale(1.12);
}
#code-view .zoom-toggle[aria-expanded=true] i::before {
  content: "\e903";
}
#code-view .zoom-box {
  position: relative;
}
#code-view .zoom-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 3px rgba(19, 19, 19, 0.2);
  pointer-events: none;
}
#code-view .zoom-box.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 20;
}
#code-view.full-screen-showing {
  z-index: 21;
}
#code-view.full-screen-showing .code-file {
  backdrop-filter: none;
}
#code-view.full-screen-showing pre {
  height: 100%;
}
#code-view.full-screen-showing code {
  min-height: 100%;
}
#code-view pre {
  max-height: 100%;
  margin: 0;
  overflow: auto;
}
#code-view code {
  margin-top: -1.7em;
  padding: 30px 30px 40px;
  font-family: monospace;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.show-code-view #code-view {
  transition: all 0.7s ease 0s, z-index 0s ease 0s;
  visibility: visible;
  pointer-events: auto;
}
.show-code-view #logo-badge {
  transition: all 0.5s ease 0s;
}
.show-code-view #main-content {
  perspective: 1800px;
  pointer-events: none;
}
.show-code-view #welcome-panel {
  transition: all 0.8s ease 0.2s;
}
.show-code-view #welcome-panel::before {
  content: "";
  position: absolute;
  top: 150px;
  right: 8px;
  bottom: 0;
  left: 8px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  transition: all 0.6s ease 0.1s;
}
.show-code-view.animate #code-view {
  transform: none;
  transition: all 0.7s ease 0.2s, z-index 0s ease 0.8s;
}
.show-code-view.animate #logo-badge {
  transform: translate(-150%, 0);
}
.show-code-view.animate #welcome-panel {
  pointer-events: none;
  transform-origin: center 102%;
  transform: rotate3d(1, 0, 0, 11.5deg);
}
.show-code-view.animate #welcome-panel::before {
  top: 15px;
  right: 15px;
  left: 15px;
  box-shadow: 0 30px 40px rgba(0, 0, 0, 0.69);
  transition: all 0.6s ease 0.2s;
}

@media (max-width: 1023px) {
  .show-code-view.animate #welcome-panel {
    transform: rotate3d(1, 0, 0, 16deg);
  }
}
@media (max-width: 599px) {
  #code-view #code-view-tabs {
    padding: 10px 20px 30px;
  }
  #code-view #code-view-tabs > [role=tablist] {
    margin-right: 75px;
    padding: 18px 20px;
  }
  #code-view #code-view-tabs > [role=tablist] [role=tab] {
    margin: 4px 8px 4px 0;
    font-size: 0.9375rem;
  }
  #code-view .code-files > [role=tablist] [role=tab] {
    padding: 8px 16px;
    font-size: 0.875rem;
  }
  #code-view .code-file {
    padding: 20px;
  }
  #code-view code {
    font-size: 0.8125rem;
  }
  .show-code-view.animate #welcome-panel {
    transform: rotate3d(1, 0, 0, 24deg);
  }
}
@media (max-width: 369px) {
  #code-view #code-view-tabs {
    height: calc(95dvh - 40px);
  }
  #code-view #code-view-tabs > [role=tablist] [role=tab] {
    font-size: 0.875rem;
  }
  #code-view .code-files {
    max-height: 85%;
    overflow: auto;
  }
  #code-view .code-files > [role=tablist] [role=tab] {
    padding: 8px 15px;
    font-size: 0.8125rem;
  }
  .show-code-view.animate #welcome-panel {
    transform: rotate3d(1, 0, 0, 24deg);
  }
}
/****
    Loading Screen
***/
@keyframes stickerShadow {
  0% {
    transform: scale(0.33) translate(12%, 20%);
    opacity: 0.82;
    filter: blur(30px);
  }
  80% {
    transform: scale(0.9) translate(0%, 0%);
    opacity: 0.69;
    filter: blur(12px);
  }
  100% {
    transform: scale(0.9) translate(0%, 0%);
    opacity: 0.2;
    filter: blur(4px);
  }
}
@keyframes placeSticker {
  from {
    transform: perspective(800px) rotateX(80deg) rotateY(-50deg) scale(1.23);
  }
  to {
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1);
  }
}
.loading-screen.full-motion #menu-toggle {
  transform: translate(20vw, 0);
  transition: all 0.5s ease 0s;
}
.loading-screen.full-motion #menu-panel {
  opacity: 0;
}
.loading-screen.full-motion #logo-badge {
  opacity: 0;
  transition: opacity 0.2s ease 0s;
}
.loading-screen.full-motion #logo-badge > div {
  box-shadow: 0 0 transparent;
  backface-visibility: hidden;
  transform-origin: top left;
  transform: perspective(800px) rotateX(80deg) rotateY(-50deg) scale(1.23);
}
.loading-screen.full-motion #logo-badge h1 strong span {
  clip-path: inset(0 105% 0 0);
  transition: all 0.9s ease 0s;
}
.loading-screen.full-motion #welcome-panel .bg-image {
  transform: scale(0.6) translate(0, 120dvh);
  transition: all 1s ease 0s;
}
.loading-screen.full-motion #welcome-panel .title {
  clip-path: inset(0 100% 0 0);
  transition: all 0.85s ease 0s;
}
.loading-screen.full-motion #welcome-panel .title-shadow {
  opacity: 0;
  transition: all 0.9s ease 0s;
}
.loading-screen.full-motion #welcome-panel .statement {
  transform: translate(0, 100%);
  opacity: 0;
  transition: all 0.5s ease 0s;
}
.loading-screen.full-motion.stage-1 #menu-toggle {
  transform: none;
  transition-delay: 0.75s;
}
.loading-screen.full-motion.stage-1 #menu-panel {
  opacity: 1;
}
.loading-screen.full-motion.stage-1 #logo-badge {
  opacity: 1;
}
.loading-screen.full-motion.stage-1 #logo-badge::before {
  animation: stickerShadow 0.64s ease-out forwards;
}
.loading-screen.full-motion.stage-1 #logo-badge > div {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  animation: placeSticker 0.7s ease-out forwards;
  transition-delay: 0.4s;
}
.loading-screen.full-motion.stage-1 #logo-badge h1 strong span {
  clip-path: inset(-30px -30px);
  transition-delay: 0.82s;
}
.loading-screen.full-motion.stage-1 #welcome-panel .bg-image {
  transform: scale(1);
  transition-delay: 0.9s;
}
.loading-screen.full-motion.stage-2 #welcome-panel .title {
  clip-path: inset(-10px);
}
.loading-screen.full-motion.stage-2 #welcome-panel .title-shadow {
  opacity: 1;
  transition-delay: 0.3s;
}
.loading-screen.full-motion.stage-2 #welcome-panel .statement {
  transform: none;
  opacity: 1;
  transition-delay: 0.12s;
}

/****
    Dark Mode
***/
.dark-mode,
.dark-mode body {
  background: #424242;
  color: #F9F9F9;
}
.dark-mode .page-bg {
  opacity: 0;
  z-index: -1;
}
.dark-mode .page-bg.for-dark-mode {
  opacity: 0.07;
  z-index: 0;
}
.dark-mode #logo-badge > div {
  background: #1F1F1F;
  color: #F9F9F9;
}
.dark-mode #logo-badge h1 strong.main-name::before {
  background: #007A8E;
}
.dark-mode #menu-toggle::before {
  background: #1F1F1F;
}
.dark-mode #menu-toggle .control-icon span {
  background: #F9F9F9;
}
.dark-mode #main-menu-panel {
  background: #1F1F1F;
}
.dark-mode #main-menu-panel a,
.dark-mode #main-menu-panel button {
  color: #F9F9F9;
}
.dark-mode #main-menu-panel button.motion-toggle i::after {
  background: #F9F9F9;
}
.dark-mode #main-menu-panel a.linkedin-link {
  color: #F9F9F9;
}
.dark-mode #welcome-panel .bg-image {
  background: #000;
}
.dark-mode #welcome-panel .title {
  color: #F9F9F9;
  text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
}
.dark-mode #welcome-panel .statement {
  background: #1F1F1F;
  color: #F9F9F9;
}
.dark-mode #portfolio-work .project .project-card {
  border-color: #1F1F1F;
  background: #1F1F1F;
}
.dark-mode #portfolio-work .project a {
  color: #F9F9F9;
}
.dark-mode #portfolio-work .project .project-role strong {
  color: #F44A1F;
}
.dark-mode #portfolio-work .project .project-award::before {
  color: #F44A1F;
}
.dark-mode #main-footer {
  background: #1F1F1F;
}
.dark-mode #site-stack p {
  transition: color 0.5s ease 0s;
}
.dark-mode #site-stack p.icon-php {
  color: #B0B3D6;
}
.dark-mode #site-stack p.icon-js-square {
  color: #F0DB4F;
}
.dark-mode #site-stack p.icon-universal-access {
  color: #F9F9F9;
}
.dark-mode #site-stack p.icon-ghost {
  color: #ABABAB;
}
.dark-mode #code-view #code-view-tabs > [role=tablist] {
  background: rgba(31, 31, 31, 0.008);
}
.dark-mode #code-view #code-view-tabs > [role=tablist] [role=tab] {
  background: transparent;
  border-color: rgba(31, 31, 31, 0.8);
  color: #F9F9F9;
}
.dark-mode #code-view #code-view-tabs > [role=tablist] [role=tab]::before {
  background: #1F1F1F;
}
.dark-mode #code-view #code-view-tabs > [role=tablist] [role=tab]::after {
  background: #F9F9F9;
}
.dark-mode #code-view #code-view-tabs .zoom-toggle {
  color: #F9F9F9;
}
.dark-mode #code-view .code-files > [role=tablist] [role=tab] {
  border-color: rgba(31, 31, 31, 0.7);
  color: #F9F9F9;
}
.dark-mode #code-view .code-files > [role=tablist] [role=tab]::before {
  background: #1F1F1F;
}
.dark-mode #code-view .code-file {
  background: rgba(31, 31, 31, 0.015);
  border-color: rgba(31, 31, 31, 0.7);
}
@media (max-width: 1023px) {
  .dark-mode #main-menu-panel a .label,
  .dark-mode #main-menu-panel button .label {
    color: #F9F9F9;
  }
}

/****
    Reduced Motion Mode
***/
.reduce-motion .page-bg {
  display: none;
}
.reduce-motion #welcome-panel {
  margin-bottom: 80px;
}
.reduce-motion #welcome-panel .title-shadow {
  transform: translate(calc(-50% - 10px), calc(-50% + 10px)) !important;
}
.reduce-motion #welcome-panel .statement {
  margin-top: -70px;
}
.reduce-motion #portfolio-work {
  display: flex;
  flex-wrap: wrap;
  margin: 0 80px;
  padding-top: 0;
  padding-bottom: 60px;
}
.reduce-motion #portfolio-work .project {
  width: calc(50% - 40px);
  margin: 0 20px;
  padding: 0 0 40px;
  transform: none !important;
}
.reduce-motion #portfolio-work .project .project-card {
  max-height: auto;
  height: auto;
  aspect-ratio: unset;
  transform: none !important;
}
.reduce-motion #portfolio-work .project .project-card .project-image {
  max-height: 420px;
  aspect-ratio: 7/5;
}
.reduce-motion #code-view #code-view-tabs > [role=tablist] [role=tab]::before {
  border-radius: 0;
  transform: none !important;
}
.reduce-motion #code-view .code-files > [role=tablist] [role=tab]::before {
  top: 0;
  opacity: 0;
}
.reduce-motion #code-view .code-files > [role=tablist] [role=tab][aria-selected=true]::before {
  opacity: 1;
}
.reduce-motion.show-code-view #code-view {
  transition: all 0.3s ease 0s !important;
}
.reduce-motion.show-code-view #main-content {
  transition: all 0.3s ease 0s;
}
.reduce-motion.show-code-view #welcome-panel {
  transform: none;
}
.reduce-motion.show-code-view.animate #main-content {
  padding-top: 85dvh;
}
@media (min-width: 1280px) {
  .reduce-motion #portfolio-work .project {
    width: calc(33.333% - 40px);
  }
}
@media (max-width: 599px) {
  .reduce-motion #portfolio-work .project {
    width: 100%;
    margin: 0;
    padding-bottom: 10px;
  }
  .reduce-motion #portfolio-work .project .project-award {
    position: relative;
    right: auto;
    bottom: auto;
  }
}