html,
body {
  background: #3040bc;
  overflow-x: hidden;
}

.App {
  color: white;
  overflow-y: hidden;
}

.Page {
  overflow: hidden;
}

/* Was:
.Section,.Screenshots,.ProjectsGrid,.Card
But that makes fonts blurry...
*/
.Background,
.Screenshots,
.HeaderContainer {
  transform: translateZ(0);
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  box-sizing: border-box;
  font-size: 16px;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

img {
  box-sizing: content-box;
}

div,
button,
ul,
ol,
li,
p,
main,
aside,
header,
a,
input,
label,
section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
}

textarea,
input,
button,
select {
  font-family: inherit;
  font-size: inherit;
}

p {
  display: inline-block;
}

* {
  position: relative;
  text-align: left; /* as backup */
  text-align: start;
}

/*span {
    display: inline-flex;
}*/

/* currentColor inheritance */
* {
  border-color: currentColor;
}

svg {
  fill: currentColor;
}

/* borders */
* {
  border-width: 0px;
  border-style: solid;
}

* {
  /*overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;*/
}

html,
body {
  overflow-y: initial;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: 16px;
  font-family: system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
* {
  margin: 0;
  padding: 0;
}
strong {
  font-weight: bold;
}
a,
button {
  color: inherit;
  /*http://stackoverflow.com/questions/36181403/css3-transition-delay-if-animate-svg-fill-and-color-at-the-same-time-bug-in-chro*/
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
}
a {
  text-decoration: none;
  cursor: pointer;
}
button {
  overflow: visible;
  border: 0;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:focus {
  outline: 0;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.transition-all {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.animated {
  overflow: hidden;
  animation-duration: 0.25s;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.fast {
  animation-duration: 200ms;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fade-in-up {
  animation-name: fade-in-up;
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -32px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fade-in-down {
  animation-name: fade-in-down;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (hover: hover) {
  .card-1:hover,
  .card-1:focus {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }
}

.card-1:active {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.full-width {
  width: 100%;
}

.fixed {
  position: fixed;
  /*top: 0;*/
  left: 0;
  right: 0;
}

.wrappable {
  flex-wrap: wrap;
}

.wrappable-spacing {
  margin-right: calc(var(--unit) * 2 * -1);
  margin-bottom: calc(var(--unit) * 4 * -1);
}

.wrappable-spacing > * {
  margin-right: calc(var(--unit) * 2);
  margin-bottom: calc(var(--unit) * 4);
}

.flex-stretch-1 {
  flex: 1 1 auto;
}

.flex-stretch-2 {
  flex: 2 1 auto;
}

.spaced {
  justify-content: space-between;
}

.center {
  justify-content: center;
}

.middle {
  align-items: center;
}

.flex {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.stretch {
  flex: 1;
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.horizontal {
  flex-direction: row;
}

.margin-0 {
  margin: 0px;
}

.margin {
  margin: 8px;
}

.margin-1 {
  margin: 8px;
}

.margin-2 {
  margin: 16px;
}

.padding-0 {
  padding: 0px;
}

.padding-half {
  padding: 4px;
}

.padding {
  padding: 8px;
}

.padding-1 {
  padding: 8px;
}

.padding-2 {
  padding: 16px;
}

.padding-horizontal-half {
  padding-left: 4px;
  padding-right: 4px;
}

.padding-horizontal {
  padding-left: 8px;
  padding-right: 8px;
}

.padding-horizontal-1 {
  padding-left: 8px;
  padding-right: 8px;
}

.padding-horizontal-2 {
  padding-left: 16px;
  padding-right: 16px;
}

.padding-vertical-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.padding-vertical-half {
  padding-top: 4px;
  padding-bottom: 4px;
}

.padding-vertical {
  padding-top: 8px;
  padding-bottom: 8px;
}

.padding-vertical-1 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.padding-vertical-2 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.padding-bottom {
  padding-bottom: 8px;
}

.padding-bottom-2 {
  padding-bottom: 16px;
}

.vertical-spacing > * {
  margin-bottom: 8px;
}

.vertical-spacing {
  margin-bottom: 0px;
}

.vertical-spacing-1 > * {
  margin-bottom: 8px;
}

.vertical-spacing-2 > * {
  margin-bottom: 16px;
}

.horizontal-spacing-2 > * {
  margin-right: 16px;
}

.horizontal-spacing-2 > :last-child {
  margin-right: 0px;
}

.img-responsive {
  max-width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sixteen-nine {
  position: relative;
  overflow: hidden;
}

.sixteen-nine:before {
  display: block;
  content: '';
  width: 100%;
  padding-top: 56.25%;
}

.sixteen-nine > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

:root {
  --unit: 8px;
  --print: 4px;
}

/*<Spacing>*/
.spacing-half:not(.horizontal) > :not(:last-child) {
  margin-bottom: calc(var(--unit) * 0.5);
}

.spacing:not(.horizontal) > :not(:last-child) {
  margin-bottom: var(--unit);
}

.spacing-1:not(.horizontal) > :not(:last-child) {
  margin-bottom: var(--unit);
}

.spacing-2:not(.horizontal) > :not(:last-child) {
  margin-bottom: calc(var(--unit) * 2);
}

.spacing-3:not(.horizontal) > :not(:last-child) {
  margin-bottom: calc(var(--unit) * 3);
}

.spacing-4:not(.horizontal) > :not(:last-child) {
  margin-bottom: calc(var(--unit) * 4);
}

.spacing-8:not(.horizontal) > :not(:last-child) {
  margin-bottom: calc(var(--unit) * 8);
}

.horizontal.spacing > :not(:last-child) {
  margin-right: var(--unit);
}

.horizontal.spacing-2 > :not(:last-child) {
  margin-right: calc(var(--unit) * 2);
}

.horizontal.spacing-3 > :not(:last-child) {
  margin-right: calc(var(--unit) * 3);
}

.horizontal.spacing-4 > :not(:last-child) {
  margin-right: calc(var(--unit) * 4);
}

.horizontal.spacing-8 > :not(:last-child) {
  margin-right: calc(var(--unit) * 8);
}

@media screen and (min-width: 640px) {
  .media-mobile-only {
    display: none;
  }
}

.media-large {
  display: none;
}

@media screen and (min-width: 920px) {
  .media-large {
    display: flex;
  }
}

.media-large-inline {
  display: none;
}

@media screen and (min-width: 920px) {
  .media-large-inline {
    display: inline;
  }
}

.media-medium {
  display: none;
}

@media screen and (min-width: 640px) {
  .media-medium {
    display: flex;
  }
}

em {
  font-weight: 500;
  font-style: normal;
}

.Subheader {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.Card .Subheader {
  color: rgba(0, 0, 0, 0.541176);
}

/*typography*/
h1,
h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: 32px;
  line-height: 48px;
}

h3 {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 32px;
}

h4 {
  font-size: 20px;
  line-height: 32px;
  font-weight: normal;
}

p,
.Subheader {
  line-height: 1.7em;
}

.tiny {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}

.line-height-default {
  line-height: 1.7em;
}

.Button.ActionButton.borderless {
  min-height: 48px;
  padding: 16px;
}

.Button {
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
  padding: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

@media (hover: hover) {
  .Button:hover {
    background: currentColor;
  }

  .Button:hover > * {
    color: white;
  }
}

.Button:active {
  background: currentColor;
}

.Button:active > * {
  color: white;
}

.primary.borderless {
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
}

.Button.borderless:focus {
  background: rgba(255, 255, 255, 0.01);
}

@media (hover: hover) {
  .primary.borderless:hover,
  .primary.borderless:focus {
    background: rgba(255, 255, 255, 0.08);
  }
}

.primary.borderless:active {
  background: rgba(255, 255, 255, 0.08);
}

.primary {
  color: white;
  border-color: rgb(14, 122, 254);
}

@media (hover: hover) {
  .primary:hover,
  .primary:focus {
    color: white;
    background: rgb(14, 122, 254);
  }
}

.primary:active {
  color: white;
  background: rgb(14, 122, 254);
}

.borderless {
  border: none;
}

.primary.active {
  color: white;
  background: rgb(14, 122, 254);
}

@media (hover: hover) {
  .primary.active:hover,
  .primary.active:focus {
    color: white;
    background: #1884ff;
  }
}

.primary.active:active {
  color: white;
  background: #1884ff;
}

.Background {
  background: 50% 20% / cover;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.background-home {
  background: 50% 40% / cover;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.ErrorBoundary {
  color: black;
  padding: 32px;
  align-self: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  max-width: 1000px;
  background: white;
  border-radius: 2px;
  flex: 1;
  width: 100%;
  margin: 16px;
}

.ErrorBoundary h1 {
  margin-top: 0;
}

.ErrorBoundary .actions {
  max-width: 360px;
}

.ErrorBoundary .actions .primary:not(.active) {
  color: rgb(14, 122, 254);
}

@media (hover: hover) {
  .ErrorBoundary .actions .primary:not(.active):hover {
    color: white;
  }
}

@media print {
  .ErrorBoundary {
    display: none !important;
  }
}

.NavigationBar {
  flex-direction: column;
}

.AppBar {
  height: 64px;
}

.SecondaryBar {
  top: 64px;
}

.BarContent {
  max-width: 1000px;
  width: 100%;
  min-height: 64px;
}

.SecondaryHeader .BarContent {
  min-height: 56px;
}

.Bar {
  min-height: 64px;
  align-items: center;
  z-index: 20;
  border-radius: 0;
  justify-content: space-between;
}

.main-appbar {
  background: #3040bc;
  color: white;
}

.navbaritem {
  padding-left: 16px;
  padding-right: 16px;
}

.navbaritem {
  flex: 1;
  flex-basis: auto;
  flex-shrink: 0;
  width: auto;
}

.headeritem {
  flex: 1;
  flex-basis: auto;
  flex-shrink: 0;
  width: auto;
}

@media (hover: hover) {
  .navbaritem:hover {
    border-bottom: 4px solid white;
  }
}

.navbaritem:active {
  border-bottom: 4px solid white;
}

.HeaderContainer {
  position: absolute;
  top: 0;
}

.HeaderBar {
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px,
    rgba(0, 0, 0, 0.117647) 0px 1px 4px;
  padding-top: 100vh;
  margin-top: -100vh;
}

.HeaderBar.scrolled-top {
  box-shadow: none;
}

.MainHeader .HeaderBar.scrolled-top {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 80%
  );
}

.has-subheader .MainHeader .HeaderBar:not(.scrolled-top) {
  box-shadow: none;
}

.has-subheader .MainHeader .HeaderBar {
  background: #3040bc;
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px,
    rgba(0, 0, 0, 0.117647) 0px 1px 4px;
}

.SecondaryHeader .HeaderBar.scrolled-top {
  background: transparent;
}

.navbaritem .ActionName {
  display: none;
}

.navbaritem .ActionName {
  display: none;
}

.ActionLargeIcon {
  display: none;
}

@media all and (min-width: 640px) {
  .ActionLargeIcon {
    display: flex;
  }

  .ActionLargeIcon + .ActionIcon {
    display: none;
  }
}

.HeaderContainer {
  z-index: 1000;
  width: 100%;
  left: 0;
  right: 0;
  will-change: top, position;
}

.HeaderContainer .MainHeader {
  height: 64px;
  width: 100%;
}

.HeaderContainer .SecondaryHeader {
  height: 56px;
  width: 100%;
}

.InlineLink {
  font-weight: 600;
  display: inline;
}

@media (hover: hover) {
  .InlineLink:hover,
  .InlineLink:focus {
    text-decoration: underline;
    text-decoration-skip: ink;
  }
}

.InlineLink:active {
  text-decoration: underline;
  text-decoration-skip: ink;
}

.InlineLink em {
  font-weight: 600;
}

.SectionContent,
.Content {
  width: 100%;
}

.background-gradient {
  background-image: linear-gradient(
    0deg,
    rgba(41, 14, 179, 0.95) 0%,
    rgba(51, 68, 198, 0.95) 100%
  );
}

.background-gradient-shadow {
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

/*only child min height 100 vh*/
.Section:only-child .SectionContent .Content {
  min-height: 100vh;
}

.SectionContent .Content {
  padding-top: 32px;
  padding-bottom: 32px;
}

.Section:first-child .SectionContent .Content {
  padding-top: 64px;
}

@media all and (max-height: 640px) and (orientation: landscape) {
  .Page .SectionContent .Content {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .Page .Section:first-child .SectionContent .Content {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media all and (min-width: 640px) {
  .SectionContent .Content {
    padding-top: 64px;
    padding-bottom: 64px;
    align-self: center;
    max-width: 1000px;
  }

  .Section:first-child .SectionContent .Content {
    padding-top: 128px;
  }
}

footer {
  line-height: 1.7em;
}

footer .Logo {
  align-items: center;
}

footer .Logo .InlineLink {
  font-weight: 300;
}

.Section.Home .SectionContent {
  flex: 1;
  justify-content: flex-end;
}

.Section.Home {
  min-height: 77vh;
}

.Section.Home .Background {
  background-position-y: 40%;
}

@media print {
  .Section.Home {
    min-height: initial;
  }
}

.SocialIcon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.SocialEntry {
  margin-bottom: 8px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
}

.Card {
  background: white;
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px,
    rgba(0, 0, 0, 0.117647) 0px 1px 4px;
  border-radius: 2px;
}

.shadow-1 {
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px,
    rgba(0, 0, 0, 0.117647) 0px 1px 4px;
}

@page {
  size: A4;
  margin: 27mm 16mm 27mm 16mm;
}

@media screen {
  .media-only-print {
    display: none !important;
  }
}

@media print {
  .media-no-print {
    display: none !important;
  }
}

:root {
  --unit: 8px;
  --print: 4px;
}

@media print {
  html,
  body {
    background: white !important;
    width: 210mm;
    /*height: 297mm;*/
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 14px;
  }

  * {
    transition: none !important;
    box-shadow: none !important;
    border-color: white;
    background-image: none !important;
    color: black;
    overflow: initial !important;
    text-rendering: optimizeLegibility;
    text-align: justify !important;
  }

  .Background,
  .HeaderContainer,
  .Actions,
  .OverflowButton,
  .ProjectIcon,
  .ProjectUrl,
  .TechnologySection,
  .SkillIcon,
  .Bar,
  .Button {
    display: none !important;
  }

  .Subheader {
    color: rgba(0, 0, 0, 0.9) !important;
  }

  .Section.Profile .em {
    font-weight: normal !important;
  }

  .Section.Profile .InlineLink {
    font-weight: normal;
  }

  em {
    font-weight: 600;
  }

  .InlineLink {
    text-decoration: none;
    text-decoration-skip: none;
  }

  .Card > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  ul.dot-separated {
    overflow: hidden;
    margin-left: -8px;
  }

  ul.dot-separated li:before {
    content: ' \00b7 ';
    width: 8px;
    line-height: 24px;
  }

  ul.semicolon-separated li {
    display: inline;
  }

  .ProjectsGrid > .media-no-print {
    display: none !important;
  }

  .ProjectsGrid > :not(.media-no-print) {
    display: block !important;
  }

  .ProjectsGrid {
    overflow: hidden;
  }

  /*<Spacing>*/
  .spacing-half:not(.horizontal) > :not(:last-child) {
    margin-bottom: calc(var(--print) * 0.5);
  }

  .spacing:not(.horizontal) > :not(:last-child) {
    margin-bottom: var(--print);
  }

  .spacing-1:not(.horizontal) > :not(:last-child) {
    margin-bottom: var(--print);
  }

  .spacing-2:not(.horizontal) > :not(:last-child) {
    margin-bottom: calc(var(--print) * 2);
  }

  .spacing-3:not(.horizontal) > :not(:last-child) {
    margin-bottom: calc(var(--print) * 3);
  }

  .spacing-4:not(.horizontal) > :not(:last-child) {
    margin-bottom: calc(var(--print) * 4);
  }

  .spacing-8:not(.horizontal) > :not(:last-child) {
    margin-bottom: calc(var(--print) * 8);
  }

  .horizontal.spacing > :not(:last-child) {
    margin-right: var(--print);
  }

  .horizontal.spacing-2 > :not(:last-child) {
    margin-right: calc(var(--print) * 2);
  }

  .horizontal.spacing-3 > :not(:last-child) {
    margin-right: calc(var(--print) * 3);
  }

  .horizontal.spacing-4 > :not(:last-child) {
    margin-right: calc(var(--print) * 4);
  }

  .horizontal.spacing-8 > :not(:last-child) {
    margin-right: calc(var(--print) * 8);
  }

  /*hack vertical spacing*/
  .vertical-spacing > * {
    margin-bottom: 0 !important;
  }

  .vertical-spacing {
    margin-bottom: 0;
  }

  .Section {
    min-height: initial;
  }

  .ProjectsGrid {
    flex-direction: column !important;
    overflow-x: hidden !important;
    max-height: initial !important;
  }

  .ProjectsOverview {
    max-height: initial !important;
  }

  .ProjectsGrid,
  .ProjectsOverview {
    padding: 0 !important;
  }

  .ProjectCard {
    width: 100% !important;
    flex: 1 !important;
    display: none;
  }

  .ProjectHeader {
    padding: 0 !important;
  }

  .ProjectsGrid {
    max-width: initial;
    margin: 0;
    margin-right: -32px;
  }

  .ClientSection {
    order: -1;
    margin-top: -16px;
  }

  .ClientSection .Subheader,
  .ResponsibilitiesSection .Subheader {
    display: none !important;
  }

  .Page.Resume .ProjectsOverview {
    padding: 0 !important;
  }

  .ProjectCard:not(.media-no-print) {
    display: block !important;
    width: 100% !important;
    flex: none !important;
  }

  .ProjectCard:not(.media-no-print):nth-child(odd) {
    display: block !important;
    width: 100% !important;
    flex: none !important;
  }

  .ProjectCard:not(.media-no-print):nth-child(even) {
    display: block !important;
    width: 100% !important;
    flex: none !important;
  }

  .Page {
    display: block !important;
  }

  .Landing {
    width: 100% !important;
  }

  .HeadingImage {
    width: 170px !important;
    height: 170px !important;
    border-radius: 10% !important;
  }

  .Section.Profile .Content {
    flex-direction: row;
  }

  .Section.Profile .Content > * {
    margin-right: 32px;
  }

  .Section.Profile .Content > :first-child {
    margin-right: 0;
  }

  .HeadingImageContainer {
    margin-top: 0 !important;
    order: 1 !important;
  }

  .ClientSection {
    flex-direction: row;
  }

  .ClientSection .Subheader {
    display: inline;
    margin-right: 4px;
  }

  .ClientSection > :not(:first-child) {
    font-weight: bold;
  }

  .ClientSection .Subheader::after {
    content: ':';
  }

  .Section.Profile h2 {
    margin-top: 0;
    margin-bottom: 0;
    text-align: initial;
  }

  .HeadingContent {
    order: 0 !important;
  }

  .SectionContent .Content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0;
    padding-right: 0;
    max-width: initial;
  }

  .LegalNote {
    margin-bottom: 0 !important;
  }

  .Section:not(:last-child) .SectionContent .Content {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
  }

  .Section:last-child .SectionContent .Content {
    padding-bottom: 0 !important;
  }

  .Section:first-child .SectionContent .Content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .SectionContent {
    display: block !important;
  }

  .Skill {
    border-radius: 0 !important;
    padding: 0 !important;
  }

  h1,
  h2,
  h3,
  h4 {
    margin-top: 0;
    margin-bottom: 0;
    display: block;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 24px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.5); */
    padding-right: 64px;
    align-self: flex-start;
  }

  h3 {
    font-size: 17px;
  }

  h4 {
    font-size: 16px !important;
  }

  /*//fix the overflow*/
  .Section:last-child .Content {
    padding-bottom: 0 !important;
  }

  /*https://stackoverflow.com/a/35154315/1384679*/
  div {
    float: none !important;
  }

  #app,
  #app > *,
  .Landing {
    display: block !important;
  }

  .Section {
    display: block !important;
    /*page-break-inside: avoid;*/
  }

  .Section:last-child {
    page-break-after: avoid;
    page-break-before: avoid;
  }

  .InterestsSection {
    page-break-after: avoid;
    page-break-before: avoid;
  }

  .Section.Skills {
    page-break-after: auto;
    page-break-before: avoid;
  }

  .Section.Projects {
    page-break-after: avoid;
    page-break-before: always;
  }
}

.SkillName {
  line-height: 24px;
}

.ProjectIcon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  box-shadow: 0 1px 5px #1b1f2326;
}

.ProjectName {
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
}

.ProjectUrl {
  padding-top: 4px;
  font-size: 14px;
  line-height: 16px;
}

.BioEntry.media-only-print {
  line-height: 1.5;
}

.BioEntryName {
  text-transform: uppercase;
  min-width: 128px;
  font-weight: 500;
}

.Profile .Social {
  padding-top: 16px;
}

.Profile .Actions {
  max-width: 360px;
}

.HeadingImage {
  border-radius: 50%;
  width: 196px;
  height: 196px;
}

.OverflowButton {
  display: none;
}

.ProjectsGrid > * {
  display: none;
}

.ProjectsGrid > :first-child {
  display: flex;
}

.ProjectsGrid {
  overflow-x: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.ProjectsOverview {
  align-self: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.Skill {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18px;
}

.Resume .Section:first-child .SectionContent .Content {
  padding-top: 128px;
}

@media all and (max-height: 640px) and (orientation: landscape) {
  .Page.Resume .Section:first-child .SectionContent .Content {
    padding-top: 96px;
  }
}

.LegalNote {
  font-size: 12px;
  line-height: 18px;
  font-style: italic;
}

.ProjectCard {
  flex: 1;
}

@media all and (min-width: 640px) {
  .HeadingImageContainer {
    margin-top: 48px;
  }

  .SectionContent .Content {
    padding-top: 64px;
    padding-bottom: 64px;
    align-self: center;
    max-width: 1000px;
  }

  .Section:first-child .SectionContent .Content {
    padding-top: 128px;
  }

  .ProjectsOverview {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media all and (min-width: 640px) {
  .HeadingImage {
    width: 196px;
    height: 196px;
  }

  .Section.Profile .Content {
    flex-direction: row;
  }

  .Section.Profile .Content > * {
    margin-right: 32px;
  }

  .Section.Profile .Content > :first-child {
    margin-right: 0px;
  }

  .HeadingImageContainer {
    order: 1;
  }
  .HeadingContent {
    order: 0;
  }

  .HeadingImage {
    border-radius: 10%;
  }
}

/* When wide enough, display navigation labels */
@media all and (min-width: 550px) {
  .MainHeader .navbaritem .ActionName {
    padding-left: 16px;
    display: flex;
  }
}

@media all and (min-width: 800px) {
  .navbaritem .ActionName {
    padding-left: 16px;
    display: flex;
  }

  .HeadingImage {
    width: 256px;
    height: 256px;
  }
}

@media all and (min-width: 1000px) {
  .HeadingImage {
    width: 337px;
    height: 337px;
  }
}

@media all and (min-width: 1120px) {
  .ProjectsGrid {
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .ProjectCard {
    width: calc(50% - 8px);
    flex: none;
  }

  .ProjectsGrid > * {
    display: flex;
  }

  .ProjectsGrid .Card {
    margin-right: 16px;
  }

  .ProjectsGrid .Card:last-child {
    margin-right: 0px;
  }

  .OverflowLastItemFix {
    width: 1px;
    height: 100%;
    margin-left: -1px;
  }

  .OverflowButton {
    display: flex;
  }
}

.Course {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.54);
  /* padding: 16px 24px; */
  max-width: 392px;
  border-radius: 2px;
  overflow: hidden;
  height: 80px;
  max-width: 360px;
}

.CourseIcon {
  border-radius: 2px;
  overflow: hidden;
  width: 80px;
  height: 80px;
}

.CourseTitle {
  flex: 1;
  padding: 8px 16px;
  /* height: 96px; */
  font-size: 13px;
  line-height: 20px;
  justify-content: center;
}

.CourseTitle {
  flex: 1;
  /* padding: 16px 24px; */
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}

.ProjectHeadline {
  display: flex;
  flex: 1;
  min-height: 40px;
}

.ProjectTimeFrame {
  justify-content: center;
  align-items: center;
  display: flex;
}

@media print {
  .Page.Resume {
    font-size: 83%;
  }

  .ProjectCard {
    margin-top: 0;
  }

  .ProjectCard:first-child {
    margin-top: 0;
  }

  .ProjectHeadline {
    display: flex;
    flex: 1;
    min-height: 20px;
  }

  .CardContent * {
    text-align: justify !important;
  }

  .ProjectTimeFrame {
    font-weight: normal;
    font-size: 12px !important;
    line-height: 20px;
  }
}

input,
textarea {
  min-height: 36px;
  padding: 8px 8px;
  border-radius: 4px;
}

.Section.About .SectionContent {
  background-position-x: 75%;
}

@media all and (min-width: 640px) {
  .Section.About .SectionContent {
    background-image: linear-gradient(
      90deg,
      rgba(41, 14, 179, 0.9) 0%,
      rgba(51, 68, 198, 0.8) 50%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .Section.About .Content > * {
    padding-right: 50%;
  }
}

.Section.Contact .SectionContent {
  padding-bottom: 64px;
}

@media print {
  .SocialLinks {
    display: none;
  }

  .Section.Contact {
    display: none !important;
  }
}

.thumb-horizontal {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  cursor: pointer;
}

.Screenshots {
  overflow: hidden;
}

@media (hover: hover) {
  .thumb-horizontal:hover {
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
}

.thumb-horizontal:active {
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.AppIcon {
  width: 80px;
  height: 80px;
  border-radius: 6px;
}

.AppIcon.small {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

@media print {
  .OverflowLastItemFix {
    display: none;
  }

  .Screenshots {
    width: 100% !important;
    flex-wrap: wrap;
  }

  .Screenshots > * {
    margin-bottom: 16px;
  }
}

.ScreenshotsView {
  margin: 0 auto;
  margin-bottom: 16px;
  flex: 1;
  width: 100%;
}

.ScreenshotsView * {
  overflow-y: hidden !important;
}

@media print {
  .ScreenshotsView {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 0;
    margin-bottom: 48px;
  }

  .ScreenshotsView * {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .Screenshots,
  .Card {
    page-break-inside: avoid;
  }

  .Screenshots img {
    height: 200px !important;
  }

  .Screenshots {
    align-self: center;
  }
}

.PostHeader > :first-child {
  margin-bottom: 8px;
}

.Markdown > pre > code {
  font-size: 80%;
}

.Markdown > pre {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  background: #f3f3f3;
}

.Markdown a {
  font-weight: 600;
  display: inline;
}

@media (hover: hover) {
  .Markdown a:hover,
  .Markdown a:focus {
    text-decoration: underline;
    text-decoration-skip: ink;
  }
}

.Markdown a:active {
  text-decoration: underline;
  text-decoration-skip: ink;
}

p code,
h1 code,
h2 code,
h3 code {
  background: #f3f3f3;
  padding: 2px 6px;
  border-radius: 4px;
}

.Markdown > h1 {
  display: none;
}

.Markdown {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.072px;
}

.Markdown h2 {
  margin-top: 16px;
  font-size: 28px;
}

@media screen and (min-width: 640px) {
  .Markdown {
    font-size: 21px;
    line-height: 31px;
    letter-spacing: -0.063px;
  }
}

.Blog .Section:not(.RelatedPosts) .Content {
  max-width: 800px !important;
}

.RelatedPostsView > *:not(:last-child) {
  margin-bottom: 16px;
}

@media screen and (min-width: 640px) {
  .RelatedPostsView {
    flex-direction: row;
  }

  .RelatedPostsView > *:not(:last-child) {
    margin-bottom: 0px;
  }

  .RelatedPostsView > *:not(:last-child) {
    margin-right: 16px;
  }
}

code.hljs {
  padding: 4px 8px;
}

blockquote {
  padding: 8px;
  background: oldlace;
}

.Markdown {
  font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
}

.Markdown h1,
.Markdown h2,
.Markdown h3,
.Markdown h4 {
  font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans',
    Geneva, Arial, sans-serif;
}

.Markdown a {
  color: rgb(50, 142, 254);
  font-weight: inherit;
}

.Blog .Section:first-child .SectionContent {
  min-height: 60vh;
}

@media print {
  .Blog .Section:first-child .SectionContent {
    min-height: initial;
  }

  .Blog .Section.RelatedPosts {
    display: none !important;
  }
}

.PostContent {
  color: black;
  background: white;
}

.Blog .Title .SectionContent {
  justify-content: flex-end;
}

.Blog .Title .Content {
  padding-bottom: 32px;
}

.Blog .PostContent .Content {
  padding-top: 32px;
}

.Blog .Caption {
  margin-top: 16px;
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0;
}

.Blog .card-1 img {
  display: flex;
}

.Blog .card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.Blog .card-1,
.Blog .card-1 img {
  border-radius: 8px;
  overflow: hidden;
}

@media (hover: hover) {
  .Blog .card-1:hover,
  .Blog .card-1:focus {
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.12), 0 5px 5px rgba(0, 0, 0, 0.11);
  }
}

pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

/*# sourceMappingURL=styles-200936b0b514d68b7ece.css.map*/