@charset "UTF-8";
/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets
  List of CSS3 Sass Mixins File to be @imported and @included as you need
  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files
  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties
------------------------------------------------------------- */
@import url("https://rsms.me/inter/inter.css");
:root {
  --main-bg-color: #F7FF00;
  --main-text-color: #222222;
  --main-bg-transparency: rgba(34, 34, 34, 0.1);
  --main-input-transparency: rgba(34, 34, 34, 0.05);
  --alt-bg-color: #ffffff;
  --theme-dark-bg-color: #000000;
  --theme-dark-text-color: #f0f0f0;
  --theme-dark-accent: #F7FF00;
  --theme-dark-transparency: rgba(247, 255, 0, 0.1);
  --theme-alien-bg-color: #222222;
  --theme-alien-accent: #3AA550;
  --theme-alien-transparency: rgba(58, 165, 80, 0.1);
  --theme-gold-accent: #FFDD60;
  --theme-gold-transparency: rgba(255, 221, 96, 0.15);
  --theme-trids-bg-color: var(--alt-bg-color);
  --theme-trids-accent: #00afaf;
  --theme-trids-transparency: rgba(0, 175, 175, 0.1);
  --theme-klarna-bg-color: var(--alt-bg-color);
  --theme-klarna-text-color: #0E0E0F;
  --theme-klarna-accent: #EE3C6B;
  --theme-klarna-pink: #FFB3C7;
  --theme-klarna-transparency: rgba(255, 179, 199, 0.15); }

html {
  font-family: 'Inter', sans-serif; }

@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', sans-serif; } }

body {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.02em; }

h1,
h2,
h3,
h4,
h5 {
  max-width: 768px;
  margin: 0;
  line-height: 1em;
  text-transform: uppercase;
  text-wrap: balance; }

h1 {
  font-size: 3.4rem;
  font-weight: 700; }
  h1 b {
    font-weight: 900; }

h2 {
  margin-bottom: 48px;
  font-size: 2.618rem;
  font-weight: 900; }

h3 {
  margin-bottom: 36px;
  font-size: 1.618rem;
  font-weight: 900; }

h4 {
  margin-bottom: 24px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1em; }
  h4 span {
    font-weight: 500;
    text-transform: none; }

h5 {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 500;
  text-transform: none; }
  h5 a {
    font-weight: 500;
    text-decoration: none; }
    h5 a:hover:not(:active) {
      text-decoration: underline; }

p {
  max-width: 768px;
  margin: 0;
  margin-bottom: 24px;
  font-size: 1.1rem;
  line-height: 1.6em; }
  p:last-of-type {
    margin-bottom: 0; }
  p a {
    font-weight: 800; }
  p b {
    font-weight: 800; }

html {
  scroll-behavior: smooth;
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
  html ::-webkit-scrollbar {
    width: 0;
    height: 0; }
  html ::-webkit-scrollbar-thumb {
    background: transparent; }
  html ::-webkit-scrollbar-track {
    background: transparent; }
  html body {
    scrollbar-face-color: transparent;
    scrollbar-track-color: transparent; }

*,
*::before,
*::after {
  outline: 0;
  -webkit-box-sizing: inherit;
  -khtml-box-sizing: inherit;
  -moz-box-sizing: inherit;
  -ms-box-sizing: inherit;
  -o-box-sizing: inherit;
  box-sizing: inherit; }

body {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 96px;
  color: var(--main-text-color);
  background: var(--main-bg-color);
  font-size: 14px;
  transition: background-color 0.8s ease;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

section {
  margin: 192px 0;
  scroll-margin: 96px; }

img,
figure,
video,
iframe {
  width: 100%; }

figure figcaption {
  margin-top: 24px;
  color: var(--main-text-color);
  font-size: 1rem; }
  figure figcaption::before {
    content: '—\00a0\00a0'; }

svg {
  pointer-events: none; }

form {
  margin-top: 24px; }
  form:first-child {
    margin-top: 0; }

hr {
  width: 100%;
  margin-top: 24px;
  border: 0; }

time,
.money {
  font-variant-numeric: slashed-zero; }

.focus, a:focus, button:focus,
.btn:focus {
  outline-color: var(--main-text-color);
  outline-style: dashed;
  outline-offset: 2px;
  outline-width: 2px; }

.no-margin {
  margin: 0 !important; }

.margin-ts {
  margin-top: 8px !important; }

.margin-tb {
  margin-top: 12px !important; }

.margin-tl {
  margin-top: 24px !important; }

.margin-te {
  margin-top: 48px !important; }

.margin-tj {
  margin-top: 96px !important; }

.margin-bs {
  margin-bottom: 8px !important; }

.margin-bb {
  margin-bottom: 12px !important; }

.margin-bl {
  margin-bottom: 24px !important; }

.margin-be {
  margin-bottom: 48px !important; }

.margin-bj {
  margin-bottom: 96px !important; }

[data-tooltip] {
  cursor: help; }

.wrapper {
  width: 100%;
  max-width: 1112px; }

.vimeo {
  position: relative;
  display: block;
  width: 100%;
  padding: 56.25% 0 0 0; }

header .logo {
  scroll-margin: 96px; }

header .role {
  transition: opacity 0.2s ease; }

header section {
  display: grid;
  grid-template-columns: 4fr 1fr;
  column-gap: 48px;
  margin: 192px 0; }
  header section nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
    header section nav a {
      margin-left: -12px;
      padding: 12px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease; }
      header section nav a::after {
        content: "↓";
        margin-left: 8px;
        opacity: 0; }
      header section nav a:hover:not(:active), header section nav a:focus {
        background: var(--main-bg-transparency); }
        header section nav a:hover:not(:active)::after, header section nav a:focus::after {
          opacity: 1; }
  header section .mobile-only {
    display: none; }

.grid-1-4 {
  display: grid;
  grid-template-columns: 1fr 4fr;
  column-gap: 48px; }

.grid-2-2 {
  display: grid;
  grid-template-columns: 2fr 2fr;
  column-gap: 48px; }

.grid-2-3 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: 48px; }

.grid-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 48px; }

.gap-jumbo {
  column-gap: 96px; }

.align-center > * {
  align-self: center; }

.m-tj {
  margin-top: 96px !important; }

.m-th {
  margin-top: 192px !important; }

.dual-column {
  display: grid;
  grid-template-columns: 2fr 2fr;
  column-gap: 48px; }
  .dual-column article a:first-of-type {
    width: 100%;
    height: auto; }
    .dual-column article a:first-of-type picture,
    .dual-column article a:first-of-type video {
      margin: 0;
      width: inherit;
      height: inherit; }
      .dual-column article a:first-of-type picture img,
      .dual-column article a:first-of-type video img {
        width: inherit;
        height: inherit; }
  .dual-column article hgroup {
    margin-top: 48px; }
    .dual-column article hgroup h3 {
      margin-bottom: 24px; }
    .dual-column article hgroup h4 {
      margin-bottom: 48px; }
    .dual-column article hgroup ~ p {
      margin-bottom: 24px;
      font-size: 1rem; }
      .dual-column article hgroup ~ p + a {
        margin-top: 24px; }
  .dual-column article > div > div h3 {
    margin-top: 48px; }
  .dual-column article > div > div p {
    font-size: 1rem; }
  .dual-column article > div > div:last-of-type h4, .dual-column article > div > div:last-of-type p {
    display: none; }
  .dual-column article > div > div:last-of-type a {
    width: auto;
    margin-top: 48px; }

footer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  margin: 96px 0; }
  footer section {
    margin: 0; }
    footer section p:last-of-type {
      margin-bottom: 48px; }
    footer section p .highlight {
      margin: -2px 0;
      padding: 2px 4px;
      background: var(--main-bg-transparency);
      font-weight: inherit;
      cursor: help; }
  footer .icon {
    justify-self: flex-end;
    align-self: flex-end; }

#about {
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: 48px;
  align-items: flex-start; }
  #about p:last-of-type {
    margin-bottom: 48px; }
  #about .avatar {
    position: relative;
    width: 80%;
    justify-self: center;
    cursor: pointer; }
    #about .avatar picture {
      width: 100%;
      height: auto;
      transition: opacity 0.4s ease; }
      #about .avatar picture img {
        width: inherit;
        height: inherit; }
      #about .avatar picture:nth-child(2), #about .avatar picture:nth-child(3), #about .avatar picture:nth-child(4), #about .avatar picture:nth-child(5), #about .avatar picture:nth-child(6) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        opacity: 0; }

#work article {
  margin-bottom: 96px; }
  #work article h4 {
    margin-bottom: 12px; }
  #work article > a {
    overflow: hidden;
    filter: grayscale(1);
    mix-blend-mode: multiply; }
    #work article > a picture,
    #work article > a video {
      display: block;
      transition: transform 0.4s ease; }
    #work article > a:hover, #work article > a:active {
      filter: grayscale(0);
      mix-blend-mode: normal; }
      #work article > a:hover picture,
      #work article > a:hover video, #work article > a:active picture,
      #work article > a:active video {
        transform: scale(105%); }
  #work article > div {
    display: grid;
    grid-template-columns: 4fr 1fr;
    column-gap: 96px;
    justify-items: flex-start;
    margin-top: 48px; }
    #work article > div div:nth-child(2) b {
      margin-bottom: 24px; }
    #work article > div div:nth-child(2) p {
      font-size: 1em; }
    #work article > div div:nth-child(2) a {
      margin-top: 24px; }

#work .dual-column article {
  margin-bottom: 0; }
  #work .dual-column article a {
    margin-top: 24px; }

#content .card-grid {
  display: grid;
  justify-items: flex-start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px; }
  #content .card-grid .card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 384px;
    padding: 32px;
    border: 2px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease; }
    #content .card-grid .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url(images/pattern.png);
      background-size: 5%;
      background-repeat: repeat;
      opacity: .3; }
    #content .card-grid .card header {
      margin-bottom: 24px; }
      #content .card-grid .card header .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-bottom: 24px;
        background: var(--main-bg-transparency);
        border-radius: 8px; }
      #content .card-grid .card header h3 {
        font-size: 1.25rem;
        margin-bottom: 8px;
        text-wrap: balance; }
        #content .card-grid .card header h3::after {
          content: "—";
          display: block;
          margin-top: 8px; }
      #content .card-grid .card header p {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.2em;
        text-wrap: balance; }
    #content .card-grid .card .btn {
      text-align: center; }
    #content .card-grid .card:hover:not(:active), #content .card-grid .card:focus {
      border-color: var(--main-text-color); }
      #content .card-grid .card:hover:not(:active) .btn, #content .card-grid .card:focus .btn {
        background: var(--main-text-color);
        color: var(--main-bg-color); }
  @media only screen and (max-device-width: 1230px) {
    #content .card-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media only screen and (max-device-width: 799px) {
    #content .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 48px; }
      #content .card-grid .card header {
        margin-bottom: 24px; }
        #content .card-grid .card header h3 {
          font-size: 1.2rem; }
        #content .card-grid .card header p {
          font-size: 14px; } }
  @media only screen and (max-device-width: 470px) {
    #content .card-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr)); }
      #content .card-grid .card {
        min-height: 336px; } }

#contact {
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 48px;
  justify-items: flex-start; }
  #contact > * {
    grid-column-start: 1; }
  #contact form {
    margin: 0;
    margin-top: 48px;
    width: 100%;
    text-align: right; }

#bye {
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: 48px;
  margin: 96px 0; }
  #bye h1 {
    grid-column-start: 2;
    text-align: right; }

a {
  display: inline-block;
  color: var(--main-text-color);
  font-weight: 700;
  text-underline-offset: .15em; }
  a:hover:not(:active), a:focus {
    color: var(--main-text-color); }
  a.arrow-right::after {
    content: '\00a0\00a0→'; }
  a.arrow-left::before {
    content: '←\00a0\00a0'; }

button,
.btn {
  display: inline-block;
  margin: 0;
  margin-right: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: none;
  border: 2px solid var(--main-text-color);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-decoration: none;
  user-select: none;
  transition: all 0.2s ease;
  cursor: pointer; }
  button:last-child,
  .btn:last-child {
    margin-right: 0;
    margin-bottom: 0; }
  button:hover:not(:active), button:focus,
  .btn:hover:not(:active),
  .btn:focus {
    background: var(--main-text-color);
    color: var(--main-bg-color); }
  button.secondary,
  .btn.secondary {
    background: var(--main-bg-transparency);
    border: none; }
    button.secondary:hover:not(:active), button.secondary:focus,
    .btn.secondary:hover:not(:active),
    .btn.secondary:focus {
      background: var(--main-text-color);
      color: var(--main-bg-color); }
  button.arrow-right::after,
  .btn.arrow-right::after {
    content: '\00a0\00a0→'; }
  button.arrow-left::before,
  .btn.arrow-left::before {
    content: '←\00a0\00a0'; }

.back-to-top {
  position: fixed;
  right: 48px;
  bottom: 48px;
  width: 60px;
  height: 60px;
  margin: 0;
  color: var(--main-bg-color);
  background: var(--main-text-color);
  border: 2px solid transparent;
  border-radius: 30px;
  font-size: 24px;
  text-decoration: none;
  user-select: none;
  transition: all 0.2s ease;
  opacity: 0;
  pointer-events: none; }
  .back-to-top::after {
    content: '↑';
    position: absolute;
    top: 50%;
    left: 50%;
    color: inherit;
    -webkit-transform: translate(-50%, -50%);
    -khtml-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .back-to-top:hover:not(:active) {
    color: var(--main-text-color);
    background: var(--main-bg-color);
    border-color: var(--main-text-color); }
  .back-to-top.is-visible {
    opacity: 1;
    pointer-events: all; }

.cursor {
  z-index: 10000;
  position: absolute;
  top: -100vh;
  left: -100vw;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  backdrop-filter: invert(1) grayscale(1);
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.5, 1, 0.89, 1);
  pointer-events: none; }
  @media (hover: none) {
    .cursor {
      display: none; } }

.input {
  position: relative;
  width: 100%;
  margin-bottom: 24px; }
  .input:last-of-type {
    margin-bottom: 48px; }
  .input label {
    position: absolute;
    top: 33px;
    left: 16px;
    margin: 0;
    color: var(--main-text-color);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1em;
    pointer-events: none;
    transition: all 0.2s ease;
    -webkit-transform: translate(0, -50%);
    -khtml-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%); }
  .input input,
  .input textarea {
    width: 100%;
    height: 66px;
    padding: 16px;
    padding-bottom: 12px;
    background-color: var(--main-input-transparency);
    background-image: none;
    background-position-x: 150%;
    border: 1px solid transparent;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.2s ease; }
    .input input:hover,
    .input textarea:hover {
      border-color: var(--main-text-color); }
    .input input:active, .input input:focus,
    .input textarea:active,
    .input textarea:focus {
      border-width: 2px;
      border-color: var(--main-text-color); }
      .input input:active ~ label, .input input:focus ~ label,
      .input textarea:active ~ label,
      .input textarea:focus ~ label {
        top: 18px;
        left: 18px;
        font-size: .5rem; }
    .input input:-webkit-autofill,
    .input textarea:-webkit-autofill {
      transition: background-color 10000s ease-in-out 0s; }
    .input input.has-value ~ label,
    .input textarea.has-value ~ label {
      top: 18px;
      left: 18px;
      font-size: 0.5em; }
    .input input.has-value:hover ~ label,
    .input input.has-value:active ~ label,
    .input input.has-value:focus ~ label,
    .input textarea.has-value:hover ~ label,
    .input textarea.has-value:active ~ label,
    .input textarea.has-value:focus ~ label {
      top: 18px;
      left: 18px;
      font-size: 0.5em; }
  .input textarea {
    height: 198px;
    padding: 16px;
    padding-top: 24px;
    resize: vertical; }

.name {
  position: relative;
  cursor: pointer; }
  .name::after {
    content: '←\00a0\00a0Hear';
    position: absolute;
    margin-left: 8px;
    padding: 8px;
    border: 2px solid var(--main-text-color);
    font-weight: 700;
    font-size: .2em;
    line-height: 1em;
    transition: all 0.2s ease;
    user-select: none;
    transform: translate(0, 0.5em); }
  .name:hover::after {
    color: var(--main-bg-color);
    background: var(--main-text-color); }

.tooltip {
  z-index: 10000;
  position: absolute;
  max-width: 288px;
  padding: 12px 16px;
  color: var(--main-bg-color);
  background: var(--main-text-color);
  font-size: 1em;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  -webkit-transform: translate(0, 100%);
  -khtml-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transform: translate(0, 100%); }
  .tooltip::after {
    content: '';
    z-index: 9999;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 1px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: inherit;
    font-size: 1rem;
    user-select: none;
    -webkit-transform: translate(-50%, 50%) rotate(45deg);
    -khtml-transform: translate(-50%, 50%) rotate(45deg);
    -moz-transform: translate(-50%, 50%) rotate(45deg);
    -ms-transform: translate(-50%, 50%) rotate(45deg);
    -o-transform: translate(-50%, 50%) rotate(45deg);
    transform: translate(-50%, 50%) rotate(45deg); }
  .tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -khtml-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); }

.theme-white {
  background: var(--alt-bg-color); }
  .theme-white .back-to-top {
    background: var(--main-text-color);
    color: var(--alt-bg-color); }
    .theme-white .back-to-top:hover:not(:active), .theme-white .back-to-top:focus {
      background: var(--alt-bg-color);
      color: var(--main-text-color);
      border-color: var(--main-text-color); }
  .theme-white button.secondary:hover:not(:active), .theme-white button.secondary:focus,
  .theme-white .btn.secondary:hover:not(:active),
  .theme-white .btn.secondary:focus {
    color: var(--alt-bg-color); }

.theme-dark {
  color: var(--theme-dark-text-color);
  background: var(--theme-dark-bg-color); }
  .theme-dark h1,
  .theme-dark h2,
  .theme-dark h3,
  .theme-dark h4 {
    color: var(--theme-dark-accent); }
  .theme-dark a,
  .theme-dark a:hover:not(:active),
  .theme-dark a:focus {
    color: var(--theme-dark-accent); }
  .theme-dark figcaption {
    color: var(--theme-dark-accent); }
  .theme-dark .btn {
    color: var(--theme-dark-accent);
    border-color: var(--theme-dark-accent); }
    .theme-dark .btn:hover:not(:active), .theme-dark .btn:focus {
      background: var(--theme-dark-accent);
      color: var(--theme-dark-bg-color); }
    .theme-dark .btn.secondary {
      background: var(--theme-dark-transparency); }
  .theme-dark .back-to-top {
    background: var(--theme-dark-accent);
    color: var(--theme-dark-bg-color); }
    .theme-dark .back-to-top:hover:not(:active), .theme-dark .back-to-top:focus {
      background: var(--theme-dark-bg-color);
      color: var(--theme-dark-accent);
      border-color: var(--theme-dark-accent); }
  .theme-dark .highlight {
    background: var(--theme-dark-transparency); }
  .theme-dark .tooltip {
    color: var(--theme-dark-accent); }

.theme-alien {
  background: var(--theme-alien-bg-color); }
  .theme-alien h1,
  .theme-alien h2,
  .theme-alien h3,
  .theme-alien h4 {
    color: var(--theme-alien-accent); }
  .theme-alien a,
  .theme-alien a:hover:not(:active),
  .theme-alien a:focus {
    color: var(--theme-alien-accent); }
  .theme-alien figcaption {
    color: var(--theme-alien-accent); }
  .theme-alien .btn {
    color: var(--theme-alien-accent);
    border-color: var(--theme-alien-accent); }
    .theme-alien .btn:hover:not(:active), .theme-alien .btn:focus {
      background: var(--theme-alien-accent);
      color: var(--theme-alien-bg-color); }
    .theme-alien .btn.secondary {
      background: var(--theme-alien-transparency); }
  .theme-alien .back-to-top {
    background: var(--theme-alien-accent);
    color: var(--theme-alien-bg-color); }
    .theme-alien .back-to-top:hover:not(:active), .theme-alien .back-to-top:focus {
      background: var(--theme-alien-bg-color);
      color: var(--theme-alien-accent);
      border-color: var(--theme-alien-accent); }
  .theme-alien .highlight {
    background: var(--theme-alien-transparency); }
  .theme-alien .tooltip {
    color: var(--theme-alien-accent); }
  .theme-alien .work-main .dual-column article > a:before {
    background: var(--theme-alien-accent); }

.theme-gold h1,
.theme-gold h2,
.theme-gold h3,
.theme-gold h4 {
  color: var(--theme-gold-accent); }

.theme-gold a,
.theme-gold a:hover:not(:active),
.theme-gold a:focus {
  color: var(--theme-gold-accent); }

.theme-gold figcaption {
  color: var(--theme-gold-accent); }

.theme-gold .btn {
  color: var(--theme-gold-accent);
  border-color: var(--theme-gold-accent); }
  .theme-gold .btn:hover:not(:active), .theme-gold .btn:focus {
    background: var(--theme-gold-accent); }
  .theme-gold .btn.secondary {
    background: var(--theme-gold-transparency); }

.theme-gold .back-to-top {
  background: var(--theme-gold-accent); }
  .theme-gold .back-to-top:hover:not(:active), .theme-gold .back-to-top:focus {
    color: var(--theme-gold-accent);
    border-color: var(--theme-gold-accent); }

.theme-gold .highlight {
  background: var(--theme-gold-transparency); }

.theme-gold .tooltip {
  color: var(--theme-gold-accent); }

.theme-gold .work-main .dual-column article > a:before {
  background: var(--theme-gold-accent); }

.theme-trids {
  color: var(--theme-trids-text-color);
  background: var(--theme-trids-bg-color); }
  .theme-trids h1,
  .theme-trids h2,
  .theme-trids h3,
  .theme-trids h4 {
    color: var(--theme-trids-accent); }
  .theme-trids a,
  .theme-trids a:hover:not(:active),
  .theme-trids a:focus {
    color: var(--theme-trids-accent); }
  .theme-trids figcaption {
    color: var(--theme-trids-accent); }
  .theme-trids .btn {
    color: var(--theme-trids-accent);
    border-color: var(--theme-trids-accent); }
    .theme-trids .btn:hover:not(:active), .theme-trids .btn:focus {
      background: var(--theme-trids-accent);
      color: var(--theme-trids-bg-color); }
    .theme-trids .btn.secondary {
      background: var(--theme-trids-transparency); }
  .theme-trids .back-to-top {
    background: var(--theme-trids-accent);
    color: var(--theme-trids-bg-color); }
    .theme-trids .back-to-top:hover:not(:active), .theme-trids .back-to-top:focus {
      background: var(--theme-trids-bg-color);
      color: var(--theme-trids-accent);
      border-color: var(--theme-trids-accent); }
  .theme-trids .highlight {
    background: var(--theme-trids-transparency); }
  .theme-trids .tooltip {
    color: var(--theme-trids-bg-color); }
  .theme-trids .work-main .dual-column article > a:before {
    background: var(--theme-trids-accent); }
  .theme-trids .work-main .dual-column article > a picture,
  .theme-trids .work-main .dual-column article > a video {
    mix-blend-mode: screen; }

.theme-klarna {
  background: var(--theme-klarna-bg-color); }
  .theme-klarna h1,
  .theme-klarna h2,
  .theme-klarna h3,
  .theme-klarna h4 {
    color: var(--theme-klarna-text-color); }
  .theme-klarna a,
  .theme-klarna a:hover:not(:active),
  .theme-klarna a:focus {
    color: var(--theme-klarna-accent); }
  .theme-klarna figcaption {
    color: var(--theme-klarna-accent); }
  .theme-klarna .btn {
    color: var(--theme-klarna-text-color);
    border-color: var(--theme-klarna-text-color); }
    .theme-klarna .btn:hover:not(:active), .theme-klarna .btn:focus {
      background: var(--theme-klarna-text-color);
      color: var(--theme-klarna-bg-color); }
    .theme-klarna .btn.secondary {
      background: var(--theme-klarna-transparency); }
  .theme-klarna .back-to-top {
    background: var(--theme-klarna-text-color);
    color: var(--theme-klarna-bg-color); }
    .theme-klarna .back-to-top:hover:not(:active), .theme-klarna .back-to-top:focus {
      background: var(--theme-klarna-bg-color);
      color: var(--theme-klarna-text-color);
      border-color: var(--theme-klarna-text-color); }
  .theme-klarna .highlight {
    background: var(--theme-klarna-transparency); }
  .theme-klarna .tooltip {
    color: var(--theme-klarna-bg-color); }
  .theme-klarna .work-main .dual-column article > a:before {
    background: var(--theme-klarna-pink); }

.work-header {
  display: grid;
  grid-template-columns: 4fr 2fr;
  gap: 48px;
  justify-items: flex-start;
  align-items: flex-start;
  margin-bottom: 96px; }
  .work-header nav {
    justify-self: flex-end; }

.work-main {
  margin-bottom: 96px; }
  .work-main h1 {
    margin-bottom: 96px;
    font-weight: 900; }
  .work-main aside hgroup {
    margin-bottom: 48px; }
    .work-main aside hgroup p {
      font-size: 1em; }
    .work-main aside hgroup:last-child {
      margin-bottom: 0; }
  .work-main article {
    margin: 96px 0; }
    .work-main article:nth-of-type(2) {
      margin-top: 192px; }
    .work-main article figure,
    .work-main article video {
      margin: 0; }
  .work-main figure,
  .work-main video {
    justify-self: center;
    width: 100%;
    height: auto;
    margin: 0;
    margin-bottom: 96px; }
    .work-main figure:last-of-type,
    .work-main video:last-of-type {
      margin-bottom: 0; }
  .work-main .dual-column {
    margin-top: 0; }
    .work-main .dual-column article {
      margin-top: 0; }
      .work-main .dual-column article > a {
        position: relative;
        overflow: hidden; }
        .work-main .dual-column article > a:before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--theme-dark-accent); }
        .work-main .dual-column article > a picture,
        .work-main .dual-column article > a video {
          display: flex;
          filter: grayscale(1);
          mix-blend-mode: multiply;
          transform: scale(1);
          transition: transform 0.4s ease; }
        .work-main .dual-column article > a:hover, .work-main .dual-column article > a:active {
          filter: grayscale(0); }
          .work-main .dual-column article > a:hover picture,
          .work-main .dual-column article > a:hover video, .work-main .dual-column article > a:active picture,
          .work-main .dual-column article > a:active video {
            filter: grayscale(0);
            mix-blend-mode: normal;
            transform: scale(1.08); }

main.standalone-page h1 {
  margin-bottom: 96px;
  font-size: 6em;
  font-weight: 900; }

main.salary {
  margin-bottom: 192px; }
  main.salary h4 {
    font-size: 1.1rem;
    font-weight: 900; }
  main.salary h5 {
    font-size: 1.1rem;
    font-weight: 500; }
    main.salary h5:last-of-type {
      margin-bottom: 48px; }
  main.salary section:not(:first-of-type) {
    margin-top: 0;
    margin-bottom: 96px; }
  main.salary section:last-child {
    margin-bottom: 192px; }
  main.salary section p:last-of-type {
    margin-bottom: 24px; }
  main.salary article {
    margin-bottom: 72px; }
    main.salary article time {
      margin-bottom: 24px;
      font-size: 1.1rem;
      font-weight: 500; }

@media only screen and (max-device-width: 799px) {
  main.standalone-page h1 {
    margin-bottom: 96px;
    font-size: 4em; }
  main.salary h4 {
    margin-bottom: 24px; }
  main.salary h5 {
    font-size: 1em; }
  main.salary article time {
    font-size: 1em; } }

@media only screen and (max-device-width: 799px) {
  body {
    padding: 48px; }
    body h1 {
      font-size: 1.602rem; }
    body h2 {
      font-size: 1.266rem; }
    body h3 {
      font-size: 1.125rem; }
    body p {
      font-size: 1rem; }
    body header .logo {
      width: 65px;
      height: auto; }
    body header nav {
      display: none; }
    body header section {
      grid-template-columns: auto;
      column-gap: initial;
      margin: 48px 0;
      margin-top: 96px; }
      body header section .name::after {
        padding: 4px;
        border-width: 1px;
        font-size: .3em;
        transform: translate(0, 0.3em); }
    body section {
      margin: 96px 0; }
    body #about {
      grid-template-columns: auto;
      column-gap: 0; }
      body #about .avatar {
        margin-bottom: 48px; }
    body #work article {
      margin-bottom: 48px; }
      body #work article > div {
        grid-template-columns: auto;
        column-gap: 0; }
        body #work article > div h4 {
          margin-top: 48px; }
    body #work .dual-column article {
      margin-bottom: 48px; }
      body #work .dual-column article:last-child {
        margin-bottom: 0; }
    body #contact,
    body #bye,
    body .dual-column,
    body .work-header {
      grid-template-columns: auto;
      column-gap: 0; }
    body .grid-1-4, body .grid-2-2, body .grid-2-3, body .grid-3-2 {
      grid-template-columns: auto;
      column-gap: 0; }
    body .grid-2-2:nth-child(even) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }
    body .input {
      margin-bottom: 12px; }
      body .input:last-of-type {
        margin-bottom: 24px; }
    body footer {
      grid-template-columns: auto;
      column-gap: 0; }
      body footer .icon {
        justify-self: flex-start; }
        body footer .icon svg {
          width: 50px;
          height: auto; }
    body .work-main h1 {
      margin-bottom: 48px; }
    body .work-main article {
      margin: 48px 0; }
    body .work-main aside {
      margin-top: 48px; }
    body .work-main figure,
    body .work-main video {
      margin-bottom: 48px; }
    body .work-main .m-th {
      margin-top: 96px !important; } }