@charset "UTF-8";
/*
  Variables
  SASS variables shared across multiple files.
*/
:root {
  --font-size-xs:0.725rem;
  --font-size-s:0.85rem;
  --font-size-m:1.2rem;
  --font-size-l:1.5rem;
  --font-size-xl:1.85rem;
  --font-size-xxl:2.25rem;
  --font-size-title-xs:calc(0rem + 1.5vmin);
  --font-size-title-s:calc(0.5rem + 2vmin);
  --font-size-title-m:calc(0.85rem + 2.25vmin);
  --font-size-title-l:calc(1rem + 2.5vmin);
  --font-size-title-xl:calc(2.5rem + 2.5vmin);
  --font-size-title-xxl:calc(3.5rem + 2.5vmin);
  --font-size-title-xxxl:calc(5rem + 2.5vmin);
  --font-display:Clack Web, -apple-system, BlinkMacSystemFont, arial, sans-serif;
  --font-body:klima-web, -apple-system, BlinkMacSystemFont, arial, sans-serif;
  --font-secondary:Clack Web, Menlo, Monaco, Consolas, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  --site-border-radius:3px;
}

/* Horizontal Overflow styles + controls */
.horizontal-scroll {
  min-height: 225px;
  padding-bottom: 2em;
}

.horizontal-scroll-outer {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  padding-top: 3px;
  padding-right: 0;
  padding-bottom: 0.3em;
  width: 100%;
}

.horizontal-overflow.dragging {
  scroll-behavior: auto;
}

.horizontal-overflow .section-inner {
  margin-bottom: calc(6.875vh + 3.125vw);
}

.horizontal-overflow::-webkit-scrollbar,
.horizontal-overflow::-webkit-scrollbar-track,
.horizontal-overflow::-webkit-scrollbar-track-piece {
  background-color: transparent;
  border: 0 none;
  box-shadow: 0 0 0;
}

.horizontal-overflow::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.horizontal-overflow::-webkit-scrollbar {
  height: 5px;
}

.horizontal-scroll-inner {
  display: flex;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.horizontal-overflow .section-content {
  display: flex;
  flex-wrap: nowrap;
  min-width: 100vw;
  max-width: 80rem;
  width: calc(80vw + 40em);
}

.horizontal-scroll-inner > * {
  display: inline-block;
  flex-shrink: 0;
  margin-right: 0.3em;
}

.horizontal-scroll-inner > *:first-child {
  margin-left: calc(0.625vw + 1.375vh);
}

.horizontal-scroll img,
.horizontal-scroll picture,
.horizontal-scroll video {
  height: auto;
  max-height: 175px;
  max-height: clamp(175px, 35vmin, 300px);
  max-width: 220px;
  max-width: clamp(220px, 50vmin, 400px);
  white-space: break-spaces;
}

.horizontal-scroll .project-image-small {
  max-height: clamp(150px, 30vmin, 270px);
}

/*
@media screen and (min-width:600px){
	.horizontal-scroll img,
	.horizontal-scroll video{
		max-height:27vh;}
	.horizontal-scroll img.project-image-small{
		max-height:24vh;}
}
*/
.horizontal-overflow.horizontal-overflow-multirow .section-content {
  flex-wrap: wrap;
  max-width: calc(100vw + 15em);
}

.horizontal-scroll-nav-controls {
  left: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 100%;
  -webkit-overflow-scrolling: auto;
  width: 100%;
  z-index: 2;
}

.horizontal-scroll-nav-control {
  color: var(--color-text);
  cursor: pointer;
  height: 2.5rem;
  position: absolute;
  left: 0;
  text-indent: -9999px;
  transition: 300ms opacity 300ms padding;
  width: 5rem;
  z-index: 10;
}

.horizontal-scroll-nav-control::after {
  border-style: solid;
  border-width: 0 3px 3px 0;
  content: "";
  height: 0.4rem;
  position: absolute;
  top: 0.85rem;
  transform-origin: center;
  width: 0.4rem;
}

.horizontal-scroll-nav-control:hover::after {
  border-color: rgba(0, 0, 0, 0.7);
}

.horizontal-scroll-nav-control.inactive {
  cursor: default;
  opacity: 0.1;
}

.horizontal-scroll-nav-control-back {
  border-left-width: 0;
  transform-origin: left center;
}

.horizontal-scroll-nav-control-back::after {
  left: 0.8rem;
  transform: rotate(135deg);
}

.horizontal-scroll-nav-control-forward {
  border-radius: 3px 0 0 3px;
  border-right-width: 0;
  left: auto;
  right: 0.3em;
  transform-origin: right center;
}

.horizontal-scroll-nav-control-forward::after {
  right: 0.5rem;
  transform: rotate(-45deg);
}

:root {
  transition-property: color, background-color;
  transition-duration: 100ms;
  letter-spacing: calc(0.025rem - 0.025em);
  --content-narrow:82%;
  --content-narrow-max:40rem;
  --body-padding:clamp(12px, calc(6vmin + 3vmax - 35px), 13rem);
  --font-body:Clack Web,courier, monospace;
  --font-display:routed-gothic-wide-web,sans-serif;
  --font-secondary:Klima Web, Klima, -apple-system, BlinkMacSystemFont, sans-serif;
  --bg-grid-size:min(25svw, 25svh);
  --color-text:#2243ff;
  --color-text-trans:#2234ff44;
  --color-accent:#cccfff;
  --color-bg:rgba(250,250,255, 0.75);
  --color-bg-solid:rgba(250,250,255,1);
  --screen-s: 600px;
  --screen-m: 950px;
  --screen-l: 1260px;
  --screen-xl: 1500px;
}

::-moz-selection {
  background-color: rgba(0, 240, 250, 0.15);
}

::selection {
  background-color: rgba(0, 240, 250, 0.15);
}

html {
  background-color: var(--color-bg);
  background-image: linear-gradient(#ddddff 1px, transparent 1px), linear-gradient(90deg, #ddddff 1px, transparent 1px);
  background-size: 20vmin 20vmin;
  color-scheme: light;
  font-family: var(--font-body);
  font-size: calc(0.15vw + 0.15svh + 13.5px);
}

h1, h2, h3, h4, h5 {
  font-size: 1rem;
}

a {
  color: var(--color-text);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button {
  border-width: 2px;
}

.text-highlight {
  border-radius: 0.1em;
  box-shadow: inset 0 -0.4em 0 0 var(--color-accent-trans);
  padding: 0 0.15em;
  margin-left: -0.15em;
  margin-right: -0.15em;
  position: relative;
}

.homepage {
  background-color: var(--color-bg);
  padding: calc(var(--body-padding)) var(--body-padding) var(--body-padding);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.homepage body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.homepage #site-header {
  margin-bottom: 0rem;
}
.homepage #site-header-inner {
  padding-left: 0.5rem;
}
.homepage .smiley {
  --smiley-size:2rem;
  animation: spin 40s infinite;
  animation-timing-function: linear;
  border-radius: 10rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cstyle%3E.st2%7Bfill:%232243ff%7D%3C/style%3E%3Cg id='Layer_2'%3E%3Cpath class='st2' d='M150 30.1c32 0 62.1 12.5 84.8 35.1s35.1 52.7 35.1 84.8-12.5 62.1-35.1 84.8-52.8 35.1-84.8 35.1-62.1-12.5-84.8-35.1S30.1 182 30.1 150s12.5-62.1 35.1-84.8S118 30.1 150 30.1m0-22C71.6 8.1 8.1 71.6 8.1 150S71.6 291.9 150 291.9 291.9 228.4 291.9 150 228.4 8.1 150 8.1z'/%3E%3Cpath d='M221.9 153.1c-14.7 36.9-41.3 57.2-78.8 57.2-12.3 0-26.3-3.2-37.8-10.8' fill='none' stroke='%232243ff' stroke-width='20' stroke-miterlimit='10'/%3E%3Ccircle class='st2' cx='182.8' cy='105' r='17.8'/%3E%3Cpath transform='rotate(-21.323 100.662 138.209)' class='st2' d='M71.5 128.2h58.3v20H71.5z'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--color-bg-solid);
  content: "";
  height: var(--smiley-size);
  width: var(--smiley-size);
  transition: 0s all;
  z-index: 0;
}
.homepage .smiley:hover, .homepage .smiley:focus-visible {
  transform: scale(1.2);
  opacity: 1;
}
.homepage #site-header-smiley {
  position: fixed;
  left: calc(var(--body-padding) - var(--smiley-size) / 2 + 0.2rem);
  top: calc(var(--body-padding) - var(--smiley-size) / 2 + 0.2rem);
  font-size: 0;
  z-index: 10;
}
.homepage #site-footer-smiley {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: calc(2.2svh + 1vw) calc(0.9375svh + 2.0625vw);
}

#container {
  align-items: stretch;
  background-color: var(--color-bg);
  border: 2px solid;
  border-radius: 1vmin;
  flex-direction: column;
  flex-wrap: nowrap;
  height: calc(100svh - 2 * var(--body-padding));
  justify-content: stretch;
  overflow: auto;
  position: relative;
}
@media screen and (min-width: 950px) {
  #container {
    height: calc(100svh - 2 * var(--body-padding));
  }
}
@media screen and (min-aspect-ratio: 5/4) {
  #container {
    flex-direction: row;
  }
}

#container .section {
  --row-height:clamp(3.2rem, 13vmin, 4.5rem);
  align-items: stretch;
  border-top: 0px solid transparent;
  border-bottom: 2px solid currentcolor;
  flex: 0 0 var(--row-height);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  top: 0;
  min-height: var(--row-height);
  scrollbar-width: none;
  z-index: 1;
}
@media screen and (min-aspect-ratio: 5/4) {
  #container .section {
    border-right: 2px solid currentcolor;
    border-bottom: 0px none;
    flex-direction: row;
  }
}
#container .section.active {
  flex: 1 1 max-content;
  overflow: scroll;
  scroll-behavior: smooth;
  z-index: 0;
}
#container .section.active + * + .section:last-child,
#container .section.active + .section:last-child,
#container .section.active:last-child {
  border-bottom: 2px solid transparent;
}
@media screen and (min-aspect-ratio: 5/4) {
  #container .section.active + * + .section:last-child,
  #container .section.active + .section:last-child,
  #container .section.active:last-child {
    border-bottom: 0px none;
    border-right: 0 none;
  }
}
#container .section-inner {
  width: 100%;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#container .section-content {
  display: none !important;
  opacity: 0;
  padding: 1.5rem 1.7rem;
  transition: 400ms opacity;
}
#container .section.active .section-content {
  display: flex !important;
  flex-direction: column;
  animation: fadeIn 400ms ease-out both;
  width: 100%;
}
@media screen and (min-aspect-ratio: 5/4) {
  #container .section.active .section-content {
    width: calc(100% - var(--row-height) - 1.2rem);
  }
}

.section-title {
  align-items: center;
  background-color: var(--color-bg-solid);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: calc(1.3rem - 8px);
  font-weight: 500;
  letter-spacing: calc(0.1rem - 0.01em);
  line-height: 1;
  margin: 0;
  padding-block: 0;
  padding-inline: clamp(1.3rem, 6vmin, 2rem);
  position: -webkit-sticky;
  position: sticky;
  height: var(--row-height);
  top: 0;
  transition: margin 300ms, background-color 100ms;
  transition-timing-function: ease-out;
  text-transform: uppercase;
  width: 100%;
  z-index: 2;
}
.section-title::after {
  content: "+";
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  font-size: 1.15em;
}
.section-title:hover, .section-title:focus-visible {
  background-image: radial-gradient(circle, rgba(0, 0, 255, 0.1333333333) 0.5px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0;
}
@media screen and (min-aspect-ratio: 5/4) {
  .section-title {
    writing-mode: vertical-rl;
    height: 100%;
  }
}

.section.active .section-title {
  border-bottom: 2px solid currentcolor;
}
.section.active .section-title::after {
  content: "-";
}
.section.active .section-title::before {
  --notch-size:1rem;
  content: "";
  height: var(--notch-size);
  width: var(--notch-size);
  background-color: var(--color-bg-solid);
  border-bottom: 2px solid;
  border-right: 2px solid;
  border-radius: 0 0 calc(var(--notch-size) * 0.2) 0;
  position: absolute;
  bottom: calc(var(--notch-size) * -0.666);
  left: calc(50% - var(--notch-size) * 0.5);
  transform: rotate(45deg);
  transition: background-color 100ms;
}
@media screen and (min-aspect-ratio: 5/4) {
  .section.active .section-title {
    border-bottom: 0 none;
    border-right: 2px solid currentcolor;
    margin-bottom: 0;
    margin-right: 1.2rem;
    width: var(--row-height);
  }
  .section.active .section-title::before {
    left: unset;
    bottom: calc(50% - var(--notch-size) * 0.5);
    right: calc(var(--notch-size) * -0.666);
    transform: rotate(-45deg);
  }
}

#container #about .section-content {
  align-items: center;
}

#hero-text-headline {
  align-items: center;
  background-image: url("/_/imgs/mha-pencil-circle1.webp");
  background-repeat: no-repeat;
  background-position: 60% 50%;
  background-size: 65% 65%;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--font-size-title-m);
  font-weight: 250;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1.25;
  min-height: calc(93svh - 2 * var(--body-padding) - 3 * var(--row-height) - 1rem);
  text-transform: uppercase;
}
@media screen and (min-aspect-ratio: 5/4) {
  #hero-text-headline {
    min-height: 92%;
  }
}
@media screen and (min-width: 1500px) {
  #hero-text-headline {
    font-size: var(--font-size-title-l);
  }
}
#hero-text-headline span {
  display: block;
}
#hero-text-headline span span {
  display: inline;
}
@media screen and (min-width: 1260px) {
  #hero-text-headline span:nth-of-type(1) {
    margin-left: 0ch;
  }
  #hero-text-headline span:nth-of-type(2) {
    margin-left: 9ch;
  }
  #hero-text-headline span:nth-of-type(3) {
    margin-left: 6ch;
  }
  #hero-text-headline span:nth-of-type(4) {
    margin-left: 3ch;
  }
  #hero-text-headline span:nth-of-type(5) {
    margin-left: 0ch;
  }
  #hero-text-headline span span:nth-of-type(1) {
    margin-left: 0;
  }
  #hero-text-headline span span:nth-of-type(2) {
    margin-left: 8ch;
  }
}
@keyframes slideUp {
  0% {
    top: -1rem;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
#hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 1.1vw, 1rem) clamp(0.5rem, 1vw, 1rem);
  margin-top: calc(2rem + 1.2vh);
  width: 100%;
}
#hero-cta .button {
  flex: 1 0 9rem;
  text-align: center;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
#hero-cta .button:not(.new-page)::after {
  display: inline-block;
  width: 0;
  transition: 250ms all;
  vertical-align: bottom;
  opacity: 0;
  overflow: hidden;
}
#hero-cta .button:not(.new-page):hover::after, #hero-cta .button:not(.new-page):focus::after {
  width: 1rem;
  opacity: 1;
}

/* Intro text */
#about h3 {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: calc(0.1rem - 0.01em);
  margin-bottom: 4rem;
}

#about .section-content {
  position: relative;
  overflow-x: hidden;
}

#about-image {
  width: 13rem;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 950px) {
  #about-intro {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
  }
  #about-image {
    width: 18rem;
  }
}
#about-text {
  position: relative;
  max-width: 45ch;
  max-width: min(66svw, 45ch);
}
@media screen and (min-width: 1260px) {
  #about-text {
    padding: 3rem 2rem;
  }
}

.about-text-links {
  margin-top: 3rem;
}

.about-text-links a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: calc(0.1rem - 0.01em);
  font-size: 0.65rem;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.about-text-links a.tab::after {
  content: " →";
}
.about-text-links a:hover {
  border-bottom-color: currentcolor;
  opacity: 1;
}

#about-image {
  margin: 2rem auto;
  position: relative;
}
#about-image::before {
  content: "";
  background-image: url(/_/imgs/mha-pencil-underline1.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 1.3rem;
  position: absolute;
  left: -1rem;
  bottom: 1rem;
  width: 15rem;
}
@media screen and (min-width: 950px) {
  #about-image::before {
    left: 2rem;
  }
}
@media screen and (min-width: 1260px) {
  #about-image {
    margin: -1rem 0 0;
    padding: 0 2rem;
  }
}

.about-skills {
  position: relative;
}
.about-skills::before {
  content: "";
  background-image: url(/_/imgs/mha-pencil-arrow-curve.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 7rem;
  position: absolute;
  right: -1.5rem;
  top: -0.3rem;
  transform: rotate(60deg);
  width: 7rem;
}

.about-skills,
.about-experience {
  margin: 4rem 0;
}

.logo-wall {
  container-size: inline-size;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 1rem;
  padding-left: 0;
}

.logo {
  align-items: center;
  display: flex;
  flex: 0 1 12rem;
  justify-content: center;
  margin-left: 0;
  padding: 0.5rem 1rem;
  min-width: 6rem;
  max-width: calc(50% - 1rem);
}
@container (width > breakpoint(tablet)) {
  .logo {
    max-width: calc(33% - 2rem);
  }
}

.logo a {
  display: block;
  font-size: 0;
}

.logo picture,
.logo img {
  max-height: 2.5rem;
}

.logo-350 picture,
.logo-350 img {
  border-radius: 3px;
}

.skills-list {
  font-size: var(--font-size-m);
}

.skills-list li {
  padding-left: 0.4em;
}

.skills-list li::marker {
  content: "→ ";
  color: var(--color-accent);
  margin-right: 1em;
}

/* Work */
#work .section-content {
  padding: 0;
}

@media screen and (min-aspect-ratio: 5/4) {
  #container #work.active .section-content {
    width: calc(100% - var(--row-height));
    margin-top: 4vmin;
  }
}

#work .section-title {
  margin-bottom: 0;
  margin-right: 0;
}

.project {
  margin-top: calc(2vmax + 2vmin);
  margin-bottom: calc(2vmax + 2vmin);
  --padding-left:1.7rem;
}
@media screen and (min-width: 950px) {
  .project {
    --padding-left:calc(1rem + 3vw);
  }
}
@media screen and (min-width: 1260px) {
  .project {
    --padding-left:calc(2rem + 5vw);
  }
}

.project-text {
  margin-bottom: 0;
  padding: 1.5rem var(--padding-left);
}
@media screen and (min-width: 1260px) {
  .project-text {
    display: grid;
    grid-template-areas: "prti prti prtg" "prdc prdc prtg";
  }
}

.project-title {
  grid-area: prti;
  font-family: var(--font-display);
  font-size: var(--font-size-title-s);
  font-weight: 400;
  margin-bottom: 0.5em;
  margin-right: 3ch;
  text-transform: uppercase;
  letter-spacing: calc(0.1rem - 0.01em);
  max-width: 30ch;
}
.project-description {
  grid-area: prdc;
}

@media screen and (min-width: 950px) {
  .project-description {
    font-size: 0.85rem;
  }
}
.project-tags {
  grid-area: prtg;
}

.project-tags-list {
  line-height: 1.2;
  margin: 0.5rem 0 0;
  opacity: 0.5;
  padding: 0;
}
.project-tags-list li {
  display: inline-block;
  list-style-type: none;
  font-family: var(--font-secondary);
  font-size: 0.75em;
  font-weight: 600;
  margin-bottom: 0;
  margin-right: 0.7em;
}
@media screen and (min-width: 1260px) {
  .project-tags-list li {
    display: block;
    margin-bottom: 0.5em;
    text-align: right;
  }
}

.project .horizontal-scroll-outer {
  scrollbar-width: none;
}

.project-image-link {
  border-radius: 4px;
  display: block;
  font-size: 0;
  overflow: hidden;
}

.project-image {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.homepage .horizontal-scroll-inner > *:first-child {
  margin-left: var(--padding-left);
}

.thumbnail-mobile img,
.thumbnail-tablet img,
.thumbnail-desktop img {
  border: 0 none;
  border-radius: 0;
}

.thumbnail-mobile {
  background-image: url(/_/imgs/mobile-wireframe-dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  height: 14rem;
  padding: 1.5rem 0.4rem 0 0.3rem;
  text-align: center;
  width: 6.75rem;
}

.dark-mode .thumbnail-mobile {
  background-image: url(/_/imgs/mobile-wireframe.svg);
}

.light-mode .thumbnail-mobile {
  background-image: url(/_/imgs/mobile-wireframe-dark.svg);
}

.thumbnail-tablet {
  background-image: url(/_/imgs/tablet-wireframe-dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  height: 14rem;
  padding: 0.5rem 0.55rem 1.6rem 0.45rem;
  text-align: center;
  width: 10rem;
}

.dark-mode .thumbnail-tablet {
  background-image: url(/_/imgs/tablet-wireframe.svg);
}

.light-mode .thumbnail-tablet {
  background-image: url(/_/imgs/tablet-wireframe-dark.svg);
}

.thumbnail-desktop {
  background-image: url(/_/imgs/desktop-wireframe-dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  height: 12rem;
  text-align: center;
  padding: 0.9rem 0.25rem 0rem 0.15rem;
  width: 16rem;
}

.dark-mode .thumbnail-desktop {
  background-image: url(/_/imgs/desktop-wireframe.svg);
}

.light-mode .thumbnail-desktop {
  background-image: url(/_/imgs/desktop-wireframe-dark.svg);
}

.thumbnail-mobile .project-image-link,
.thumbnail-tablet .project-image-link,
.thumbnail-desktop .project-image-link {
  border-radius: 0;
}

.thumbnail-mobile img,
.thumbnail-mobile picture,
.thumbnail-tablet img,
.thumbnail-tablet picture,
.thumbnail-desktop img,
.thumbnail-desktop picture {
  max-height: unset;
  width: auto;
  max-width: 100%;
}

/* About */
/* Work in Use */
.in-use-image {
  flex: 0 1 auto;
  margin: 0 0.8em 0.8em 0;
  line-height: 0;
}

.in-use-image img {
  box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.1);
  height: calc(3em + 6vmax + 6vmin);
  opacity: 0.86;
  transition: box-shadow 700ms, opacity 300ms;
  width: auto;
}

.in-use-image img:hover {
  box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.22);
  opacity: 1;
  transition: box-shadow 700ms, opacity 100ms;
}

.in-use-caption {
  display: none;
  font-size: 0.8rem;
}

.project-description {
  margin-bottom: 0;
  transition: 0.5s all;
}

.project-description.expanded {
  margin-bottom: 1rem;
}

#fonts .project-image-wrapper {
  background-image: radial-gradient(circle, rgba(0, 0, 255, 0.1333333333) 0.5px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0;
}

/* Writing */
.post {
  max-width: 34em;
}

/* Contact */
#about-contact .section-content {
  align-items: start;
  justify-content: center;
  min-height: 30%;
}

#contact {
  width: var(--content-narrow);
  max-width: var(--content-narrow-max);
}
#contact .section-title {
  width: 100%;
}
@media screen and (min-width: 1260px) {
  #contact {
    margin-left: 3rem;
  }
}

#contact-text {
  font-size: clamp(1rem, 0.6rem + 3vw, 2rem);
  width: 100%;
}

.contact-label {
  font-family: var(--font-display);
  font-size: 0.6em;
  display: inline-block;
  position: relative;
  top: -0.1em;
}

.con-deob1 {
  direction: rtl;
  font-style: italic;
}

.con-deob2 {
  unicode-bidi: bidi-override;
}

.hpt {
  display: none;
}

/* .con-deob::after{
  content:'matthew@wehtt.am'} */
/* Work sample page */
.work-gallery {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1.875svh - 4.125vw);
  width: 100vw;
}

.work-gallery .horizontal-scroll-inner {
  display: flex;
  flex: 1 1 40em;
}

.work-gallery img {
  height: 25svh;
  min-height: 150px;
  margin: 0.2em;
}

#site-footer {
  display: none;
  margin-top: auto;
  margin-bottom: 0;
  border-bottom: 0 none;
  height: 1.7rem;
  padding: 0.5rem 0.2rem 0;
}
#site-footer p {
  margin-bottom: 0;
}

/*# sourceMappingURL=style-homepage-alt.css.map */