@media screen and (max-width: 2000px) {
  #showreel #vimeo-showreel {
    max-width: 1000px !important;
  }
}
#modal-lightbox,
#modal-lightbox .lightbox,
#modal-lightbox .lightbox-content {
  padding: 0 !important;
  box-sizing: border-box;
}
/* Constrain navbar content inside site-container */
/* Navbar background stretches full width, content is constrained */

.site-container > .navBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-width: 100vw;
  box-sizing: border-box;
  z-index: 100;
  padding: 0;
}

.navBar-content {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 1rem 3rem;
}


#showreel,
#work,
#about,
#contact {
  scroll-margin-top: 70px;} /* Reduced offset for fixed navbar */
/* Layout constraints for site container and main sections */
/* Section backgrounds scale to full viewport width */
#showreel, #work, #about, #contact {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-width: 100vw;
  box-sizing: border-box;
  z-index: 0;
}

#showreel {
  background-color: #181818;
  background: linear-gradient(to bottom, rgba(24, 24, 24, 0.75) 30%, rgba(24, 24, 24, 0) 100%), url("/assets/uploads/pattern3.png");
}

#work {
  background-color: #181818;
  background-image: url("/assets/uploads/pattern2.png");
}

#about {
  background-color: #f3f3f0;
  user-select: none;
}


html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border: none;
  box-shadow: none;
  align-items: stretch;
}
@media (max-width: 600px) {
  #work .work-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.work-grid > li {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  display: block;
  vertical-align: top;
  overflow: hidden;
}

.work-grid > li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
  display: block;
}

#lightbox-img {
  max-width: 100vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
}
#modal-lightbox .lightbox-close {
  font-size: 2.5em;
}

@media screen and (min-width: 2000px) {
  #modal-lightbox .lightbox-close {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 4em;
  }
  #work .work-grid {
    --auto-grid-min-size: 36rem;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  outline-style: none;
  box-shadow: none;
  border-color: transparent; }

:root {
  --scroll-var: 0px; }

html {
  scroll-behavior: smooth; }

::selection {
  background: #222;
  color: #f3f3f0; }

::-moz-selection {
  background: #222;
  color: #f3f3f0; }

ul {
  padding: 0;
  margin: 0; }

a {
  text-decoration: none;
  color: #666; }

h1 {
  font-size: 7.4em;
  font-weight: 700; 
  user-select: none;
  transition: color 0.3s;
}

h1.dark {
  color: rgba(107, 76, 246, 0.5) !important;
}

nav button.dark span {
  background-color: rgba(107, 76, 246, 0.5) !important;
}

h1.section-title:after {
  content: '';
  display: block;
  margin: 0.2em auto 0 auto;
  background-color: #6b4cf6;
  width: 45px;
  max-width: 100%;
  height: 3px; }

.tab {
  content: '';
  display: block;
  margin: 0.6em auto 0 auto;
  background-color: #f6604c;
  width: 40px;
  max-width: 100%;
  height: 3px; }

h2 {
  font-size: 4vw;
  font-weight: 500; 
  user-select: none;
}
h3 {
  font-size: 2vw;
  font-weight: 400; 
  user-select: none;}

body {
  font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, Roboto, 'Liberation Sans', 'Nimbus Sans', sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: #444;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #0f0f0f;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0; }

.nobottompad {
  padding-bottom: 0 !important; }

.head-line {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Helvetica, Arial,
 sans-serif;
  font-size: 1em;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.1em;
  opacity: 0.75;
  text-align: center;
  margin: 0 auto 0 auto; 
  user-select: none;}

body {
  background-color: black; }

img {
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  outline: none !important;
  box-shadow: none !important;
}

.row {
  zoom: 1;
  margin: 0 auto; }

.row:after,
.row:before {
  content: ' ';
  display: table;
  clear: both; }

.col {
  float: left; }

.col:last-child {
  margin-right: 0; }

.col blockquote,
.col h3,
.col p,
.col ul {
  max-width: none; }

.col .section-title:after {
  width: 35px;
  margin-left: 0; }

.span2 {
  width: 15.333%; }

.span5 {
  width: 62%;
  margin-left: 145px; }

.offset1 {
  margin-left: 8.666%; }

.textcent {
  text-align: center; }

.displaynone {
  display: none; }

article {
  padding-top: 7%;
  padding-bottom: 8%; }

article header {
  width: 1440px;
  max-width: 92%;
  margin: 0 auto;
  text-align: center; }

article figure,
article section {
  width: 1440px;
  max-width: 92%;
  margin: 0 auto;
  scroll-margin-top: 120px; /* Increased offset for desktop navbar */
}

article figure.fullwidth,
article section.fullwidth {
  width: 100%;
  max-width: 100%; }

article section {
  width: 1440px;
  max-width: 92%;
  margin: 0 auto; }

.navBar {
  padding: 1rem 3rem;
  font-size: 25px;
  width: 100%;
}
nav {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 10;
  height: 70px; /* Explicit height to prevent layout shift */
  min-height: 70px;
  overflow: hidden; /* Prevent resizing on font swap */
  /* Gradient from black (75% opacity) to transparent, with blur at top */
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.035) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

nav h1 {
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 5px;
  mix-blend-mode: difference;
  color: rgba(243, 243, 240, 0.75); }

nav {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 10;
  height: 70px; /* Explicit height to prevent layout shift */
  min-height: 70px;
  overflow: hidden; /* Prevent resizing on font swap */
  /* Gradient from black (75% opacity) to transparent, with blur at top */
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.035) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Active state (X) */
nav button.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
  background-color: #f6604c !important;
}
nav button.active span:nth-child(2) {
  opacity: 0;
}
nav button.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
  background-color: #f6604c !important;
}

nav ul {
  display: none; }

nav ul li {
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

nav ul li a {
  font-size: 20px;
  color: #222;
  text-decoration: none;
  font-weight: 700;
  margin-left: 2rem;
  letter-spacing: 0.1em;
  color: #8a8a8a;
  height: 70px; /* Match navbar height for stability */
  line-height: 70px;
  overflow: hidden; /* Prevent resizing on font swap */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

nav ul li a.dark {
  color: rgba(107, 76, 246, 0.5) !important;
}

nav ul li a:focus,
nav ul li a:hover {
  color: #f6604c; 
  }

  nav ul li a:focus {
    color: #6b4cf6; 
  }
.responsive-nav {
  position: absolute;
  top: -200%;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.215);
  box-shadow: 0px 2px 5px rgba(34, 34, 34, 0.075);
  transition: top 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  padding-top: 70px; /* Ensure dropdown starts below blurred navbar */
}

.responsive-nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 1.5rem;
  margin: 3rem 0;
  color: rgba(240, 240, 240, 0.55);
  letter-spacing: 2px;
  font-weight: 500; }

.responsive-nav li a:focus,
.responsive-nav li a:hover {
  color: #6b4cf6; }

.responsive-nav-active {
  position: fixed;
  top: 0% !important;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  height: 100%;
  overflow-y: hidden;
  opacity: 1;
  pointer-events: auto;
}

  /* Staggered fade-in for dropdown menu items */
  .responsive-nav-active li {
    opacity: 0;
    transform: translateY(30px);
    animation: dropdownFadeIn 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
    animation-delay: var(--delay, 0s);
  }

  @keyframes dropdownFadeIn {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

body {
  font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, Roboto, 'Liberation Sans', 'Nimbus Sans', sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: #444;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #0f0f0f;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
}

#splash h1 {
  position: relative;
  text-transform: uppercase;
  color: rgba(243, 243, 240, 0.75);
  letter-spacing: 0.05em;
  top: 35%;
  user-select: none;
  /* animation removed for static heading */
}


#splash h1 span {
  background-color: rgba(22, 22, 22, 0.65); }

#splash .vimeo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden; }

#splash .vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw;
  /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

#splash .grad {
  height: 100%;
  min-height: 100vh;
  height: -webkit-fill-available;
  position:static;
  overflow: hidden;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,181818+25,181818+50,181818+75,181818+100&0.65+0,0.01+25,0.01+50,0.02+75,1+100 */
  /* FF3.6-15 */
  /* Chrome4-9,Safari4-5 */
  /* Chrome10-25,Safari5.1-6 */
  /* Opera 11.10-11.50 */
  /* IE10 preview */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.62) 1%, rgba(24, 24, 24, 0.01) 25%, rgba(24, 24, 24, 0.01) 50%, rgba(24, 24, 24, 0.02) 75%, #181818 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#181818',GradientType=0 );
  /* IE6-9 */ }

#splash .arrow-down {
  width: 100%;
  height: 10vh;
  display: block;
  position: absolute;
  bottom: 0;
  background-image: url("../uploads/arrow_down.svg");
  background-size: 40px;
  opacity: 0.2;
  background-repeat: no-repeat;
  background-position: center; }

#showreel {
  background-color: #181818;
  background: linear-gradient(to bottom, rgba(24, 24, 24, 0.75) 30%, rgba(24, 24, 24, 0) 100%), url("/assets/uploads/pattern3.png"); }

#showreel p {
  color: #8b8b8b; 
  user-select: none; }

#showreel h1 {
  color: rgba(240, 240, 240, 0.75); 
  user-select: none; }

#showreel #vimeo-showreel {
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  height: auto;
  display: block; }

.embed-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #181818;
  /* Fallback for browsers without aspect-ratio */
  padding-bottom: 56.25%;
  height: 0; }

#showreel .embed-container iframe,
#showreel.embed-container object,
#showreel.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; }

#work {
  height: 100%;
  width: 100vw;
  position: relative;
  background-color: #181818;
  background-image: url("/assets/uploads/pattern2.png");
  max-width: none;
}

#work .work-grid {
  --auto-grid-min-size: clamp(12rem, 20vw, 32rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  max-width: none;
  width: 100vw;
}

#work .work-grid li  {
  background: #f6604c;
  position: relative;
  width: 100%;
  overflow: hidden;
  filter: grayscale(10%); 
  user-select: none; }

#work .work-grid li a  {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */  }

#work .work-grid .click {
  cursor: pointer;
  padding: 5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  color: rgba(245, 245, 245, 0);
  font-size: clamp(0.7rem, 1.2vw, 1.2rem);
  height: 100%;
  width: 100%;
  background-size: 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-position: center, center;
  background-repeat: no-repeat; 
  overflow:hidden;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#work .work-grid .click:focus,
#work .work-grid .click:hover {
  color: rgba(245, 245, 245, 0.95);
  filter: grayscale(100%);
  box-shadow: inset 0 0 150px #000000; }

  #work .work-grid #starwars1 {
  background-image: url("../uploads/photos/Original/thumbs_max/starwars01_Thumb.jpg"); }
  
  #work .work-grid #starwars2 {
  background-image: url("../uploads/photos/Original/thumbs_max/starwars02_Thumb.jpg"); }

  #work .work-grid #starwars3 {
  background-image: url("../uploads/photos/Original/thumbs_max/starwars03_Thumb.jpg"); }

  #work .work-grid #endgame1 {
  background-image: url("../uploads/photos/Original/thumbs_max/endgame01_Thumb.jpg"); }
  
  #work .work-grid #endgame2 {
  background-image: url("../uploads/photos/Original/thumbs_max/endgame02_Thumb.jpg"); }

  #work .work-grid #endgame3 {
  background-image: url("../uploads/photos/Original/thumbs_max/endgame03_Thumb.jpg"); }

  #work .work-grid #alita1 {
  background-image: url("../uploads/photos/Original/thumbs_max/alita01_Thumb.jpg"); }
  
  #work .work-grid #alita2 {
  background-image: url("../uploads/photos/Original/thumbs_max/alita02_Thumb.jpg"); }

  #work .work-grid #alita3 {
  background-image: url("../uploads/photos/Original/thumbs_max/alita03_Thumb.jpg"); }

  #work .work-grid #alita4 {
  background-image: url("../uploads/photos/Original/thumbs_max/alita04_Thumb.jpg"); }
  
  #work .work-grid #justice1 {
  background-image: url("../uploads/photos/Original/thumbs_max/justice01_Thumb.jpg"); }

  #work .work-grid #apes1 {
  background-image: url("../uploads/photos/Original/thumbs_max/apes01_Thumb.jpg"); }

  #work .work-grid #madmax1 {
  background-image: url("../uploads/photos/Original/thumbs_max/madmax01_Thumb.jpg"); }
  
  #work .work-grid #transformers1 {
  background-image: url("../uploads/photos/Original/thumbs_max/transformers01_Thumb.jpg"); }

  #work .work-grid #batman1 {
  background-image: url("../uploads/photos/Original/thumbs_max/batman01_Thumb.jpg"); }

  #work .work-grid #batman2 {
  background-image: url("../uploads/photos/Original/thumbs_max/batman02_Thumb.jpg"); }
  
  #work .work-grid #batman3 {
  background-image: url("../uploads/photos/Original/thumbs_max/batman03_Thumb.jpg"); }
  
  #work .work-grid #blackadam1 {
  background-image: url("../uploads/photos/Original/thumbs_max/blackadam01_Thumb.jpg"); }
  
  #work .work-grid #blackadam2 {
  background-image: url("../uploads/photos/Original/thumbs_max/blackadam02_Thumb.jpg"); }

  #work .work-grid #blackadam3 {
  background-image: url("../uploads/photos/Original/thumbs_max/blackadam03_Thumb.jpg"); }

  #work .work-grid #minecraft1 {
  background-image: url("../uploads/photos/Original/thumbs_max/minecraft01_Thumb.jpg"); }

  #work .work-grid #minecraft2 {
  background-image: url("../uploads/photos/Original/thumbs_max/minecraft02_Thumb.jpg"); }

  #work .work-grid #minecraft3 {
  background-image: url("../uploads/photos/Original/thumbs_max/minecraft03_Thumb.jpg"); }

  #work .work-grid #strangerthings1 {
    background-image: url("../uploads/photos/StrangerThings01_Thumb.webp"); }

/* Modal Lightbox Overlay */
#modal-lightbox.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#modal-lightbox.lightbox[style*="display: flex"] {
  display: flex !important;
}

/* Modal arrows use flexbox for vertical centering */
#modal-lightbox .lightbox-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 90vw;
  min-width: 320px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  position: static;
}

#modal-lightbox .lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3em;
  background: none;
  border: none;
  color: #f3f3f0;
  cursor: pointer;
  padding: 0.5em 1em;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 1002;
  display: flex;
  align-items: center;
  height: auto;
  pointer-events: auto;
}

#modal-lightbox .lightbox-arrow-left {
  left: 0;
}

#modal-lightbox .lightbox-arrow-right {
  right: 0;
}

@media screen and (max-width: 600px) {
  #modal-lightbox .lightbox-arrow {
    font-size: 8vw;
    min-width: 32px;
    max-width: 16vw;
    padding: 0.2em 0.5em;
  }
  #modal-lightbox .lightbox-arrow-left {
    left: 0;
  }
  #modal-lightbox .lightbox-arrow-right {
    right: 0;
  }
}

#modal-lightbox #lightbox-img {
  pointer-events: auto;
  z-index: 1000;
  box-shadow: 0 0 40px #000a;
  border-radius: 8px;
  background: #222;
  z-index: 1000;
}

#modal-lightbox .lightbox-close {
  position: absolute;
  top: 2vh;
  right: 3vw;
  background: none;
  border: none;
  color: #f6604c;
  font-size: 2.5em;
  cursor: pointer;
  opacity: 0.8;
  z-index: 1002;
  transition: opacity 0.2s;
}
#modal-lightbox .lightbox-close:hover {
  opacity: 1;
  color: #fff;
}


#modal-lightbox .lightbox-close {
    font-size: 2em;
    top: 1vh;
    right: 2vw;
  }


#work .lightbox .lightbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
}

#work .lightbox .lightbox-grid > * {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  display: block;
}

#work .lightbox .lightbox-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
  display: block;
}

#work .lightbox:target {
  outline: none;
  display: block; }

#about {
  background-color: #f3f3f0; 
  user-select: none;}

#about h2 div {
  color: #242422;
  display: inline;
  background-color: #ecece7; 
  user-select: none; }

#about #bio {
  text-align: left;
  padding-bottom: 8%;
  padding-top: 0; }

#about #bio #biomain p {
  font-size: 1.2em;
  line-height: 1.6em; }

#about #bio #bioside p {
  font-size: 0.8em;
  line-height: 1.6em; }

#about #bio h2,
#about #bio h3,
#about #bio p {
  margin: 0 0 0.5em 0;
  position: relative;
  z-index: 2; 
  user-select: none; }

#about #bio h2 a:hover,
#about #bio h3 a:hover,
#about #bio p a:hover {
  text-decoration: underline; }

#about #bio h3 {
  margin-top: 1.2em;
  font-size: 1.4em; }

#about #bio a {
  text-decoration: underline;
  color: #6b4cf6; }

#about #bio #autobiography {
  border-radius: 50%;
  overflow: hidden;
  margin: 3em 0 13em 0;
  transform: scale(2); }

#about #bio #autobiography.noncircle {
  border-radius: 0; }

#about #bio #autobiography span {
  display: block; }

#bio .footer {
  width: 100%;
  height: 100%;
  text-align: center; }

#bio .footer #icon:focus,
#bio .footer #icon:hover,
#bio .footer #icon:focus {
  opacity: 1;
  box-shadow: 0 0 16px #f6604c;
}

#bio .footer #icon {
  display: inline;
  width: 150px;
  height: 150px;
  opacity: 0.5;
  pointer-events: auto;
}

#bio .footer #icon img {
  pointer-events: auto !important;
  user-select: auto !important;
  text-decoration: none !important;
  transition: opacity 0.2s, box-shadow 0.2s;
  cursor: pointer !important;
}

#bio .footer a {
  text-decoration: none !important;
}

#bio .footer a:hover img,
#bio .footer a:focus img {
  opacity: 1 !important;
  box-shadow: 0 0 16px #f6604c;
  filter: drop-shadow(0 0 8px #6b4cf6) brightness(0.7) sepia(1) hue-rotate(220deg) saturate(8) !important;
}


#contact {
  background-color: #f3f3f0; }

#contact .gmaps {
  background-image: url("/assets/uploads/google_maps_webedit2.webp");
  background-size: cover;
  background-position: center center;
  width: 100%;
  padding-top: 3%;
  padding-bottom: 3%; }

#contact .head-line {
  opacity: 0.8;
  color: #444; }

#contact h1 {
  color: #444;
  margin-bottom: 0.5em; 
  user-select: none;}

#contact a {
  padding: 1em 0.5em;
  display: inline;
  color: rgba(0, 0, 0, 0.5); }

#contact a:hover {
  color: #6b4cf6;
  text-decoration: none; }

#contact .footer {
  width: 100%;
  height: 100%;
  justify-content: center;
  text-align: center;
  margin: 0 auto; }

footer {
  width: 100%;
  text-align: center;
  padding: 15px;
  background-image: url(/assets/uploads/pattern3.png); }

/* FontAwesome font-display swap overrides */
@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-solid-900.woff2') format('woff2');
  font-display: swap;
  font-weight: 900;
  font-style: normal;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
}

@media (min-width: 920px) {
  nav button,
  .responsive-nav {
    display: none; }
  nav ul {
    display: block; }
  html {
    font-size: 72.5%; 
    height: -webkit-fill-available;} }

@media screen and (max-width: 920px) {
  .nav-container {
    padding: 1rem 1.5rem; }
  .col {
    width: 100% !important;
    max-width: 540px;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 2%;
    text-align: center; }
  .col .section-title {
    display: block !important; }
  #about {
    background-color: #f3f3f0; }
  #about #bio #biomain p,
  #about #bio #bioside p {
    font-size: 1em;
    line-height: 1.5em; }
  #about #bio h3 {
    margin-top: 3.2em; }
  #about h2 {
    text-align: left !important; }
  #about h2 div {
    background-color: transparent; }
  #about #autobiography {
    transform: scale(1) !important; }
  #about #bio #autobiography {
    border-radius: 50%;
    margin: 3em 0 3em 0; }
  h1 {
    font-size: 3.6em;
    padding-left: 2%;
    padding-right: 2%; 
    user-select: none; }
  h2 {
    font-size: 1.4em;
    padding-left: 2%;
    padding-right: 2%; 
    user-select: none; }
  h2 span {
    line-height: normal;
    display: inline;
    width: auto;
    font-size: 1.4em;
    overflow: visible;
    background: 0 0 !important;
    color: #f6554c;
    font-weight: 100; 
    user-select: none; }
  
  #about h2 {
    padding: 0; 
    user-select: none;}
  #splash h1 {
    font-size: 6em; } }

@media screen and (max-width: 1200px) {
  #work .work-grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } }

@media screen and (max-width: 900px) {
  #work .work-grid {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }

@media screen and (max-width: 600px) {
  #splash h1 {
    font-size: 40px; } }

@media screen and (max-width: 1125px) {
  .span5 {
    width: 50%; } }

@media screen and (max-width: 480px) {
  #work .work-grid {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }

@media screen and (max-width: 330px) {
  h1 {
    font-size: 3.4em;
    padding-left: 2%;
    padding-right: 2%;
    user-select: none; } }

/* 50% grey for navbar when About section is active */
nav ul li a.grey50,
nav h1.grey50 {
  color: rgba(220,220,220,0.7) !important;
  background-color: transparent !important;
}

nav ul li a.grey50:hover,
nav ul li a.grey50:focus {
  color: #6b4cf6 !important;
}

nav button span,
nav button.grey50 span {
  background-color: #6b4cf6 !important;
}

nav.grey50 {
  background: linear-gradient(to bottom, rgba(32,32,32,0.85) 0%, rgba(32,32,32,0.55) 100%) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);}