@font-face{
  font-family:"Inclusive Sans";
  src:url(../fonts/InclusiveSans-Variable.ttf);
  font-weight:400
}
html{--primary-background-colour:#ffffff;--primary-text-colour:#000000;--secondary-text-colour:#adadad;--title-text-colour:#000000;--header-background-colour:rgba(10,235,180,1) }
body{color:var(--primary-text-colour);background-color:var(--primary-background-colour);font-family:Inclusive Sans,Roboto,sans-serif;font-weight:700;font-size:20px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;display:flex;flex-direction:column;min-height:100dvh;min-height:100svh;width:100vw}
header{background-color:var(--header-background-colour);display:flex;align-items:center}
.title{color:var(--title-text-colour);margin: auto; max-width:80vw}
.marquee-wrapper { overflow: hidden; display: flex; border-width: 4px; border-color: #000000; border-radius: 3px; margin:50px auto; height:340px; justify-content: center; white-space: nowrap; width: 50%; background: rgba(0,0,0,0.2); cursor: grab; }
.marquee { display: flex; width: max-content; max-width: 50vw; column-gap: 20px; animation: scrollGallery 45s linear infinite; gap: 20px; align-items: center }
.marquee:hover { animation-play-state: paused; }
.marquee img { height: 300px; width: auto; object-fit: cover; border-radius: 8px; cursor: zoom-in; transition: transform 0.3s ease; }
.marquee img:hover { transform: scale(1.03); }
@keyframes scrollGallery { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 10px)); } }
#art-lightbox { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; padding: 0; border: none; background: transparent; }
#art-lightbox::backdrop { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(5px); }
.lightbox-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#lightbox-img { max-width: 95vw; max-height: 95vh; object-fit: contain; cursor: zoom-out; }
@media screen and (min-width: 32.5em){header{height:60px;font-size:175%}footer,.footer-spacer{height:60px;font-size:145%}}
@media screen and (max-width:32.4999em){header{font-size:110%;height:40px}footer,.footer-spacer{height:40px;font-size:90%}}