/**
 * garthenweb.de — static site
 * Ported from the SCSS sources of the previous server-rendered site.
 * Base font size is 18px, so 1rem === 18px throughout.
 */

/* ---------------------------------------------------------------- settings */

:root {
  --color-dark: #333333;
  --color-light: #fdfdfd;
  --color-minor: #cecece;
  --color-minor-light: #e9e9e9;
  --color-highlight: #009fe3;
  --color-contrary: hsl(177, 86%, 44%);

  --color-github: #000000;
  --color-npm: #cb3837;
  --color-twitter: #1da1f2;
  --color-linkedin: #0077b5;
  --color-xing: #007575;

  --font-base: "Raleway", sans-serif;
  --font-hl: "Josefin Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  --duration-fast: 0.3s;
  --duration-medium: 0.7s;
  --timingfn-cushion: cubic-bezier(0.7, 0, 0.3, 1);
}

/* ------------------------------------------------------------------- base */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color: var(--color-dark);
  font-family: var(--font-base);
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

body {
  background: var(--color-light);
  margin: 0;
  min-height: calc(100vh + 1px);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body > * {
  width: 100%;
}

@media (min-width: 40em) {
  body::before {
    content: "";
    position: fixed;
    height: 0.2222rem;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    background: var(--color-dark);
  }
}

::selection {
  color: var(--color-light);
  background: var(--color-dark);
}

::-webkit-scrollbar {
  width: 0.4444rem;
  height: 0.4444rem;
}

::-webkit-scrollbar-thumb {
  background: var(--color-dark);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::-webkit-scrollbar-thumb:active {
  background: #444;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}

a {
  color: var(--color-highlight);
  text-decoration: none;
  transition: border-color 0.3s;
  border-bottom: 1px solid var(--color-minor-light);
}

a:hover {
  border-color: var(--color-dark);
}

a:active {
  color: inherit;
}

a.reset,
a.reset:hover {
  color: inherit;
  border: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

blockquote {
  margin: 0;
  font-style: italic;
  font-family: "Times New Roman", serif;
  /* times new roman is a little smaller so we should increase the font size */
  font-size: 1.66em;
}

blockquote::before {
  content: "\201E";
}

blockquote::after {
  content: "\201C";
}

address {
  font-style: normal;
}

/* ----------------------------------------------------------------- layout */

.l-row {
  width: 100%;
  max-width: 41.6667rem;
  margin: auto;
}

.l-item {
  padding-left: 0.8333rem;
  padding-right: 0.8333rem;
}

/* ------------------------------------------------------------------ stage */

.stage {
  padding-top: 4.1667rem;
  padding-bottom: 4.1667rem;
}

@media (min-width: 40em) {
  .stage {
    padding-top: 5.5556rem;
    padding-bottom: 5.5556rem;
  }
}

@media (min-width: 64em) {
  .stage {
    padding-top: 8.3333rem;
  }
}

/* The blue cover masks the whole viewport until the first scroll. It is fixed
   rather than sized to the document (which is what the old JS did on every
   resize) so that it always covers, whatever the page height is. */
.stage__cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Default is unmasked: without the `js` class nothing here ever shows, so a
   browser that never runs the script simply gets the plain page. */
.stage__cover > span {
  position: absolute;
  width: 100vmax;
  height: 100vmax;
  /* roughly centred on the logo, so the disc collapses back towards it */
  top: 25%;
  left: 50%;
  margin: -50vmax 0 0 -50vmax;
  border-radius: 50%;
  background: var(--color-highlight);
  transform: scale(0);
  opacity: 0;
}

/* transitions are enabled one frame late, so the initial masked state is
   painted instantly instead of animating in on load */
.stage-is-rendered .stage__cover > span {
  transition: transform var(--duration-medium) var(--timingfn-cushion),
              opacity var(--duration-medium) var(--timingfn-cushion);
}

.js.is-masked .stage__cover {
  pointer-events: auto;
}

.js.is-masked .stage__cover > span {
  transform: scale(2);
  opacity: 1;
}

.stage__content {
  position: relative;
  z-index: 1;
}

.stage__content .branding {
  opacity: 0;
  animation: stage-fade-in 1.75s 0.75s forwards cubic-bezier(0, 0.7, 0.6, 1);
}

.stage__group {
  padding-left: 0.8333rem;
  padding-right: 0.8333rem;
  margin: auto;
  opacity: 0;
  animation: stage-fade-in2 1.75s 0.75s forwards cubic-bezier(0, 0.7, 0.6, 1);
}

@media (min-width: 40em) {
  .stage__group {
    width: 90%;
  }
}

.stage__group--spaceless {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

/* --------------------------------------------------------------- branding */

.branding {
  display: inline-block;
  width: 25%;
  min-width: 11.1111rem;
  max-width: 22.2222rem;
  margin-bottom: 0.8333rem;
  border: none;
}

@media (min-width: 40em) {
  .branding {
    margin-bottom: 1.6667rem;
  }
}

@media (min-width: 64em) {
  .branding {
    margin-bottom: 2.5rem;
  }
}

.branding > svg {
  width: 100%;
  display: block;
}

.branding-letter {
  transition: fill var(--duration-fast);
}

.branding-letter--accent {
  fill: var(--color-highlight);
}

/* the blue stroke would vanish on the blue cover, so both letters go dark */
.js.is-masked .branding-letter {
  fill: var(--color-dark);
}

/* -------------------------------------------------------------- headlines */

.hl-main,
.hl-sub {
  font-family: var(--font-hl);
  text-transform: uppercase;
}

.hl-main {
  line-height: 1.3;
  font-weight: 600;
  font-size: 1.6667rem;
}

.hl-sub {
  font-size: 1rem;
  font-weight: 300;
}

@media (min-width: 40em) {
  .hl-main {
    font-size: 2.6667rem;
  }

  .hl-sub {
    font-size: 1.6667rem;
  }
}

@media (min-width: 64em) {
  .hl-main {
    font-size: 3.3333rem;
  }

  .hl-sub {
    font-size: 2rem;
  }
}

.hl-brand.hl-main {
  font-size: 10vw;
}

@media (min-width: 40em) {
  .hl-brand.hl-main {
    font-size: 7vw;
  }
}

@media (min-width: 64em) {
  .hl-brand.hl-main {
    font-size: 5vw;
  }
}

/* ------------------------------------------------------------------- text */

.text {
  margin-bottom: 1.3889rem;
}

.text-intro {
  font-weight: 500;
}

.text-hl {
  font-family: var(--font-hl);
  font-weight: 600;
  font-size: 1.6667rem;
  line-height: 1.3;
  margin-bottom: 0.4167rem;
  text-transform: uppercase;
}

.text-subline {
  font-family: var(--font-hl);
  font-weight: 600;
  font-size: 0.8889rem;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 0.6944rem;
}

.text-media {
  display: block;
  margin: 0 auto;
  max-width: 33%;
  width: 100%;
  /* the img carries width/height attributes for layout stability, so the
     intrinsic height has to be released explicitly */
  height: auto;
}

.text-media--left {
  float: left;
  margin-right: 0.8333rem;
}

/* ---------------------------------------------------------------- content */

.content {
  text-align: left;
  padding-bottom: 11.1111rem;
  overflow: hidden;
}

/* ------------------------------------------------------------------ icons */

.icon-definition {
  display: none;
}

.icon path,
.icon-definition path {
  fill: currentColor;
}

/* --------------------------------------------------------- social buttons */

.item {
  width: 3.3333rem;
  height: 3.3333rem;
  position: relative;
  padding: 0.5556rem;
  display: flex;
  border-radius: 50%;
  color: var(--color-dark);
  transition: color 0.3s, transform 0.05s;
  overflow: hidden;
  border: none;
}

@media (min-width: 40em) {
  .item {
    width: 3.8889rem;
    height: 3.8889rem;
  }
}

.item::before {
  content: "";
  display: block;
  border-radius: inherit;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0);
  transition: transform 0.3s;
}

.item .icon {
  transition: transform 0.3s;
  width: 100%;
  height: 100%;
  margin: auto;
}

.item:hover {
  color: var(--color-light);
}

.item:hover .icon {
  transform: scale(0.9);
}

.item:hover::before {
  transform: none;
}

.item:active {
  transform: scale(0.9);
}

.item-list {
  text-align: center;
  margin-bottom: 3.3333rem;
  word-spacing: -0.31em;
  font-size: 0;
  line-height: 0;
}

.item-list > * {
  display: inline-block;
  margin: 0 1.75%;
}

@media (min-width: 40em) {
  .item-list > * {
    margin: 0 5%;
  }
}

.item-github::before {
  background: var(--color-github);
}

.item-npm::before {
  background: var(--color-npm);
}

.item-twitter::before {
  background: var(--color-twitter);
}

.item-linkedin::before {
  background: var(--color-linkedin);
}

.item-xing::before {
  background: var(--color-xing);
}

.item-npm > .icon,
.item-twitter > .icon,
.item-linkedin > .icon,
.item-xing > .icon {
  width: 80%;
}

/* ----------------------------------------------------------------- footer */

.footer {
  background: var(--color-dark);
  padding: 1.3889rem 0;
  align-self: flex-end;
  color: var(--color-light);
  text-align: right;
}

.footer blockquote {
  font-size: 1.7778rem;
}

.footer .text-subline {
  display: inline-block;
  line-height: 1.3889rem;
}

.footer-list {
  text-align: center;
  font-size: 0.7222rem;
  font-weight: 400;
  margin: 1.1111rem auto 0;
}

.footer-list > li {
  display: inline-block;
  margin: 0 0.8333rem;
}

@media (max-width: 39.9375em) {
  .footer-list > li:first-child {
    display: block;
  }
}

.footer-list a {
  color: inherit;
  border-color: transparent;
}

.footer-list a:hover {
  border-color: var(--color-highlight);
}

.footer-profile {
  /* without this line the whole document is repainted on hover */
  transform: translateZ(0);
  display: inline-block;
}

.footer-profile__picture {
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
  object-position: 50% 12%;
  width: 1.3889rem;
  height: 1.3889rem;
  margin-left: 0.2778rem;
  border: 1px solid var(--color-light);
  border-radius: 50%;
  transition: transform 0.2s;
  transform: translateZ(0);
  transform-origin: center center;
}

a:hover > .footer-profile__picture {
  transform: scale(1.2) translateZ(0);
}

a:active > .footer-profile__picture {
  transform: scale(1.1) translateZ(0);
}

/* --------------------------------------------- "about me" layer (:target) */

.layer {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-light);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  padding: 1.3889rem 0;
  transition: opacity var(--duration-fast);
}

@media (min-width: 40em) {
  .layer {
    padding: 5.5556rem 0;
  }
}

.layer:target {
  opacity: 1;
  pointer-events: auto;
}

.layer__header {
  margin-bottom: 2.2222rem;
}

.layer__text {
  text-align: left;
}

.layer__text a {
  color: var(--color-contrary);
}

.layer__close {
  display: block;
  text-indent: -999rem;
  position: absolute;
  right: 1.1111rem;
  top: 1.1111rem;
  width: 2.2222rem;
  height: 2.2222rem;
  border: none;
  transition: transform 0.2s;
  transform-origin: center center;
}

@media (min-width: 40em) {
  .layer__close {
    top: 2.7778rem;
    right: 2.7778rem;
  }
}

.layer__close:hover {
  transform: scale(1.2);
}

.layer__close:active {
  transform: scale(1.1);
}

.layer__close::before,
.layer__close::after {
  content: "";
  display: block;
  width: 2.2222rem;
  height: 0.2778rem;
  background: var(--color-minor-light);
  position: absolute;
  left: 0;
  top: 50%;
}

.layer__close::before {
  transform: rotate(45deg);
}

.layer__close::after {
  transform: rotate(-45deg);
}

/* blur everything behind the layer while it is open */
.layer ~ header,
.layer ~ main,
.layer ~ footer {
  transition: filter var(--duration-fast);
}

.layer:target ~ header,
.layer:target ~ main,
.layer:target ~ footer {
  filter: blur(5px);
}

/* ------------------------------------------------------------- animations */

@keyframes stage-fade-in {
  from {
    opacity: 0;
    transform: scale(0.75) translateY(13.8889rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stage-fade-in2 {
  from {
    opacity: 0;
    transform: scale(0.75) translateY(8.3333rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage__content .branding,
  .stage__group {
    animation: none;
    opacity: 1;
  }

  .stage__cover {
    display: none;
  }

  /* no blue cover here, so only the accent stroke reverts; the "G" stays dark.
     Relies on coming later in the file than the .js.is-masked rule above. */
  .js.is-masked .branding-letter--accent {
    fill: var(--color-highlight);
  }

  * {
    transition-duration: 0.01ms !important;
  }
}