@font-face { font-family: nml; src: url("./assets/NeueMontreal-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: nmr; src: url("./assets/NeueMontreal-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: nmm; src: url("./assets/NeueMontreal-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: nmmi; src: url("./assets/NeueMontreal-MediumItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: nmb; src: url("./assets/NeueMontreal-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: nmri; src: url("./assets/NeueMontreal-Italic.otf") format("opentype"); font-display: swap; }

:root { color-scheme: dark; }
:root { --text-scale: 1.27; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #2a056d; }
body { color: #fff; font-family: nmr, Arial, sans-serif; }
button, a { color: inherit; font: inherit; }
button { border: 0; padding: 0; background: none; cursor: pointer; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }

#main { position: relative; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; background: #2a056d; isolation: isolate; }
#bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; background: #2a056d; display: flex; justify-content: center; align-items: center; }
#vidbg { display: block; height: max(130vw, 230vh); width: auto; rotate: 90deg; scale: -1; transform: rotateY(180deg); filter: contrast(1.05) brightness(105%); transition: opacity 700ms linear, filter 0ms linear; max-width: none; max-height: none; flex-shrink: 0; }
#noisefilter, #noisefilter1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: contrast(90%); }
#noisefilter { opacity: .7; }
#noisefilter1 { display: none; opacity: .5; }

#c1 { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
#c1top, #nav { pointer-events: auto; }
#c1top { position: absolute; top: 0; left: 5dvw; height: 14.125dvh; }
#name { margin: 3.75dvh 0 0; color: #fff; font-family: nml, sans-serif; font-size: calc(3.5dvh * var(--text-scale)); font-weight: 100; }
#jobtitle { margin: 1.6dvh 0 0; color: #fff; font-family: nmr, sans-serif; font-size: calc(1.8dvh * var(--text-scale)); font-weight: 500; }

#nav { position: absolute; top: 28.125dvh; left: 5dvw; display: flex; flex-direction: column; align-items: flex-start; }
.navitem { display: flex; align-items: center; height: 7.7dvh; color: #fff; font-family: nmmi, sans-serif; font-size: calc(2dvh * var(--text-scale)); text-align: left; }
.navitem > b { display: block; flex: 0 0 calc(3.5dvh * var(--text-scale)); width: calc(3.5dvh * var(--text-scale)); height: calc(3.5dvh * var(--text-scale)); margin: -1dvh 0; margin-left: 2dvw; color: #fff; opacity: 0; overflow: visible; }
.navitem > b img { display: block; width: 100%; height: 100%; object-fit: contain; }
.navitem:hover > span { opacity: .67; }
#bl1 { opacity: 1; }

.contentpanel { position: absolute; inset: 0; margin: 0; pointer-events: none; }
#intropara { position: absolute; right: 5dvw; bottom: -.5dvh; width: 11.6dvw; margin: 0 0 4dvh; color: #fff; font-family: nmb, sans-serif; font-size: calc(2.25dvh * var(--text-scale)); }

#projectsdiv { position: absolute; right: 4dvw; bottom: 1.25dvh; display: grid; grid-template-columns: 4dvw 32dvw 4dvw; align-items: center; width: 40dvw; min-height: 24dvh; }
#projectsdiv, #contactcontent { pointer-events: auto; }
#projectcontent { padding: 0 1.55dvw; text-align: justify; }
#projectname { margin: 0; color: #fff; font-family: nmb, sans-serif; font-size: calc(3.25dvh * var(--text-scale)); font-weight: 700; letter-spacing: normal; line-height: .95; text-align: left; }
#projectdescription { margin: 1.75dvh 0 1.3dvh; color: #fff; font-family: nmr, sans-serif; font-size: calc(2.1dvh * var(--text-scale)); text-align: left; }
#projectlink, #contactcontent a { color: #fff; font-family: nmr, sans-serif; font-size: calc(2.25dvh * var(--text-scale)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.projectarrow { display: grid; place-items: center; width: 4dvw; height: 5dvh; opacity: .85; }
.projectarrow img { width: 4dvw; height: auto; filter: brightness(0) invert(1); }
#leftarrow img { transform: rotate(270deg); }
#rightarrow img { transform: rotate(90deg); }
.projectarrow:hover { opacity: .5; }

#contactcontent { position: absolute; right: 12dvw; bottom: 4dvh; display: flex; flex-direction: column; align-items: flex-start; gap: 1.35dvh; }
@media (min-width: 768px) and (max-aspect-ratio: 1 / 1) {
  #intropara { right: 5dvw; width: 26dvw; }
}
@media (min-width: 551px) and (max-width: 767px) {
  #vidbg { height: max(130vh, 230vw); width: auto; transform: none; rotate: none; scale: none; flex-shrink: 0; max-width: none; max-height: none; }
  #noisefilter { display: none; } #noisefilter1 { display: block; }
  #c1top, #nav { left: 5dvw; } .navitem > b { margin-left: 4dvw; }
  #intropara { right: 5dvw; width: 26dvw; }
  #projectsdiv { right: 0; grid-template-columns: 8dvw 84dvw 8dvw; width: 100dvw; } .projectarrow { width: 8dvw; } .projectarrow img { width: 8dvw; }
}
@media (max-width: 550px) {
  #vidbg { height: max(130vh, 230vw); width: auto; transform: none; rotate: none; scale: none; flex-shrink: 0; max-width: none; max-height: none; }
  #noisefilter { display: none; } #noisefilter1 { display: block; }
  #c1top, #nav { left: 7dvw; } #c1top { height: 14.125dvh; } #name { margin-top: 3.75dvh; }
  .navitem > b { margin-left: 4dvw; }
  #intropara { right: 6dvw; width: 38dvw; bottom: 1dvh; }
  #projectsdiv { right: 0; bottom: 1.25dvh; grid-template-columns: 12dvw 76dvw 12dvw; width: 100dvw; min-height: 25dvh; } #projectcontent { padding: 0 1dvw; }
  .projectarrow { width: 12dvw; } .projectarrow img { width: 12dvw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}