/* ================================
   Font Imports & Global Styles
================================== */
@font-face {
  font-family: 'Web437_SperryPC_8x16';
  src: url('/user/themes/big-picture/assets/webfonts/retrofonts/Web437_SperryPC_8x16.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Web437_SperryPC_8x16', monospace !important;
  padding-top: 0;
  background-color: black;
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.02),
    rgba(0, 255, 0, 0.02) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* ================================
   Header Navigation
================================== */
#header.glass-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 2rem;
  color: limegreen !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px) saturate(120%) contrast(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) contrast(120%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-header a {
  color: transparent;
  background: linear-gradient(to right, darkblue, darkorchid);
  background-clip: text;
  text-decoration: none;
}

.glass-header a:hover {
  text-shadow: 0 0 5px #0f0;
}

nav#mainNav {
  margin: 0 auto;
  width: 90%;
}

#mainNav ul,
#lock ul {
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

#mainNav a,
#lock a {
  text-decoration: none;
  color: limegreen;
  transition: color 0.2s ease;
}

#mainNav a:hover,
#lock a:hover {
  color: cyan;
}

#nav {
  visibility: hidden;
}
/*======MOBILE PHONE HEADERS and NAVIGATION===============*/
/* adjustments up to 915px */
@media screen and (max-width: 915px) {
  #header h1 a {
    font-size: 2em;
  }
}
@media screen and (max-width: 915px) {
   nav#mainNav {
	display: flex;
    top: 39px;
  }
}

@media screen and (max-width: 915px) {
   nav#lock {
    display: flex;
    top: -5px;
  }
}
       
     

@media screen and (max-width: 915px) {
   .collection-header { 
    gap: 0rem !important;
  }
}
@media screen and (max-width: 915px) {
   .collection {
	margin-top: 3rem;
  }
}





@media screen and (max-width: 915px) {
   .collection-header h3 { 
    margin: 8px !important;
    letter-spacing: 8.5px !important;
  }
}



/*============== */


#mainNav #giphy img {
  height: 60%;
  width: 60%;
  opacity: 55%;
  margin-bottom: -11px;    
}

/* ================================
   Intro & Logos
================================== */
.intro-logo,
#main-logo {
  display: block;
  margin: 0 auto 2rem auto;
  transition: all 0.5s ease;
}

.intro-logo {
  max-width: 900px;
  width: 100%;
  z-index: 10;
}

#main-logo {
  max-width: 400px;
  position: relative;
  z-index: 5;
}

img[title="white-rabbit"] {
  max-width: 100px;
  height: auto;
  margin: -34px;
  padding: 10px;
}

/* ================================
   Background & Main Layout
================================== */
.main,
.main.style1,
.main.style2,
.main.fullscreen,
.main.style1.dark.fullscreen.intro {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ================================
   Retro Gallery
================================== */
.retro-gallery {
  background-color: black;
  color: limegreen;
  font-family: 'Courier New', monospace;
  padding: 2rem;
  text-align: center;
}

.retro-gallery h2 {
  font-size: 2rem;
  text-shadow: 0 0 2px #0f0;
  margin-bottom: 2rem;
  visibility: hidden;
}

.retro-gallery .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: -9px auto;
  padding: 1rem;
}

.retro-gallery .grid-item {
  background: rgba(0, 0, 0, 0.6);
  padding: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: transform 0.3s ease;
}

.retro-gallery .grid-item:hover {
  transform: scale(1.05);
}

.retro-gallery .grid-item img,
.retro-gallery .grid-item video {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

.grid-item img {
  animation: flicker 1s ease-out;
}

/* ================================
   IRL Gallery
================================== */
.irl-gallery {
  background-color: black;
  color: limegreen;
  font-family: 'VGA8x16', monospace;
  padding: 2rem 3rem;
  min-height: 100vh;
  text-align: center;
}

.irl-gallery h2 {
  visibility: hidden;
}


.collection {
  margin-bottom: 2rem;
  padding: .5rem;
  border: 1px solid #2fb039;
  background: rgba(0, 255, 0, 0);
  transition: background 0.3s ease;
  overflow: hidden;
}

.collection-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: cell;
}

.collection-header:hover {
  background: rgb(0 255 0 / 18%);
}

.collection-header h3 {
  font-family: 'Web437_SperryPC_8x16', monospace !important;
  margin: 0;
  font-weight: 200;
  letter-spacing: 11.5px;
}

.preview-image {
  width: 200px;
  height: 150px;
  transition: transform 0.3s ease;
}

.collection-content {
  display: flex;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
  align-content: center;
  justify-content: space-evenly;
  align-items: flex-start;
}

.collection-content.show {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}

.collection-content img {
  max-width: 300px;
  height: auto;
  transition: transform 0.3s ease;
}

.collection-content img:hover {
  transform: scale(1.05);
}



/*---------------LightBox------------------*/ 
.featherlight .featherlight-content {
  background: #02010200 !important; /* Change lightbox background */
}
/* ================================
   Motion Page Video Overrides
================================== */
body.motion-page video {
  loop: none;
  muted: false;
}

body.motion-page video::-webkit-media-controls {
  display: initial;
}


/* ================================
   Mordant Miasma Secret Page
================================== */
.mordant-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: black;
  background-image: url(https://www.transparenttextures.com/patterns/stardust.png);
  color: #0bde5b94;
  font-family: 'Web437_SperryPC_8x16', monospace;
}

.vault-box {
  background-color: transparent;
  padding: 1rem;
  width: 500px;
  height: 210px;
  border-radius: 21px;
  box-shadow: 7px 4px 17px 0px #87d59f, 0 0 10px #00f0ff66;
  text-align: center;
}

.vault-box h2 {
  font-size: 1.5em;
}

.vault-box input {
  width: 100%;
  padding: 0.7rem;
  margin: 1rem 0;
  border: 1px solid #0CFD68;
  background-color: black;
  color: #00ffff;
  font-family: inherit;
}

.vault-box button {
  background-color: #DD291B;
  color: black;
  border: none;
  cursor: pointer;
  font-family: 'Web437_SperryPC_8x16', monospace;
  transition: background-color 0.2s;
}

.vault-box button:hover {
  background-color: #7DC5E2;
}

.error {
  color: #ff5555;
  margin-bottom: 1rem;
}

/* ================================
   Contact & Footer
================================== */
#contact {
  background-image: url('/user/pages/01.home/_contact/cc.png');
}

.box {
    background: #ffffff00;
}

#footer {
  padding: 0;
}

/* ================================
   Content Boxes
================================== */
.content.box.style2 {
  background: rgba(0, 0, 0, 0.13);
  background-blend-mode: overlay;
  backdrop-filter: blur(8px) saturate(160%) contrast(110%);
  -webkit-backdrop-filter: blur(7px) saturate(160%) contrast(110%);
  border-radius: 22px;
  padding: 1.5rem;
  box-shadow:
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    0 0 0 1px hsla(0, 0%, 0%, 0.05),
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
    0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

.content.box.style2 h2 {
  font-weight: 900;
  background: linear-gradient(to right, #bbb8fe, #32cd32);
  background-clip: text;
  color: transparent;
}

input#sendm.button {
        background: linear-gradient(178deg, #6923b88c, transparent);
}

input#sendm.button:hover {
        background-color: #32cd3233;
}

/* ================================
   Animations
================================== */
@keyframes flicker {
  0%   { opacity: 0; transform: translateX(-5px) scale(1.05); }
  40%  { opacity: 0.4; transform: translateX(5px) scale(0.98); }
  60%  { opacity: 0.6; transform: translateX(-3px) scale(1.02); }
  80%  { opacity: 0.8; }
  100% { opacity: 1; transform: translateX(0px) scale(1); }
}

/* ================================
   Responsive Layout
================================== */
@media screen and (max-width: 768px) {
  .retro-gallery .grid,
  .irl-gallery .grid {
    grid-template-columns: 1fr;
  }
}



/*==============Shleeeem===============*/
/* full-viewport background video */
.video-bg-page,
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.video-bg-page {
  position: relative;
  font-family: 'Web437_SperryPC_8x16', monospace;
  color: limegreen;
}

.video-container {
  position: fixed;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
  overflow: hidden;
  z-index: -1;
}

#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

/* optional content overlay centered */
.overlay-content {
  position: relative;
  z-index: 10;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1rem;
}

.video-bg-page .overlay-content {
  display: none !important;
}


/* adjustments up to 915px */
@media screen and (max-width: 915px) {
  #header h1 a {
    font-size: 2em;
  }

  /* scale down / constrain background video on phones */
  #background-video {
    /* allow it to shrink a bit to avoid excessive cropping */
    width: auto;
    max-width: 200%;
    max-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(0.9);
  }

  /* optional: slightly dim or overlay so content (if any) reads better */
  .video-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    pointer-events: none;
  }
}

/* further tighten for very small screens */
@media screen and (max-width: 600px) {
  #background-video {
    transform: translate(-50%, -61%) scale(0.5);
  }
}