* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
}
body {
    background-image: url(IMAGES/bricksbackground.jpg);
    margin: 0;
    overflow-x: hidden;
    font-family: "Orbitron", "Courier New", monospace;
    color: red;
    min-height: 100vh;
}
a[href^='http']::after {
    content: url('IMAGES/external.png');
    margin-left: 0.25em; /* Adjust spacing */
}

/* MAIN CONTAINER - INVISIBLE */
.maincontainer {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    min-height: 100vh;
    z-index: 1;
}
/* CONTENT AREA */
main {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding-top: 150px; /* Space for the strings */
}

/* LIGHT STRINGS */
.light-string {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    max-width: 1600px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.light-string img {
    width: 108%;
    height: auto;
    display: block;
}

.light-string-1 {
    top: 40px;
}

.light-string-2 {
    top: 640px;
}

.light-string-3 {
    top: 1200px;
}

/* FAIRY LIGHTS */
.fairy-light {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at center, #fff9e6 0%, #ffd966 40%, #cc9933 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 8px rgba(255, 217, 102, 0.8),
        0 0 15px rgba(255, 217, 102, 0.5),
        0 0 20px rgba(255, 200, 80, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    pointer-events: none;
    animation: fairy-glow 3s ease-in-out infinite;
}

/* GLOW ANIMATION */
@keyframes fairy-glow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(255, 217, 102, 0.9),
            0 0 20px rgba(255, 217, 102, 0.6),
            0 0 30px rgba(255, 200, 80, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2);
        filter: brightness(1.1);
    }
    50% {
        box-shadow: 
            0 0 6px rgba(255, 217, 102, 0.7),
            0 0 12px rgba(255, 217, 102, 0.4),
            0 0 18px rgba(255, 200, 80, 0.2),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2);
        filter: brightness(0.9);
    }
}

/* STAGGER ANIMATION DELAYS - Add these classes to individual lights */
.fairy-light.delay-1 { animation-delay: 0.3s; }
.fairy-light.delay-2 { animation-delay: 0.6s; }
.fairy-light.delay-3 { animation-delay: 0.9s; }
.fairy-light.delay-4 { animation-delay: 1.2s; }
.fairy-light.delay-5 { animation-delay: 1.5s; }
.fairy-light.delay-6 { animation-delay: 1.8s; }
.fairy-light.delay-7 { animation-delay: 2.1s; }
.fairy-light.delay-8 { animation-delay: 2.4s; }
.fairy-light.delay-9 { animation-delay: 2.7s; }

/* PHOTO BOXES WITH POLAROID FRAMES */
.imagebox-1,
.imagebox-2,
.imagebox-3,
.imagebox-4,
.imagebox-5,
.imagebox-6,
.imagebox-7,
.imagebox-8,
.imagebox-9,
.imagebox-10,
.imagebox-11,
.imagebox-12 {
    position: absolute;
    width: 255px;
    transform-origin: top center;
    z-index: 10;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* HOVER EFFECT - Red glow, scale up, and slight lift */
.imagebox-1:hover,
.imagebox-2:hover,
.imagebox-3:hover,
.imagebox-4:hover,
.imagebox-5:hover,
.imagebox-6:hover,
.imagebox-7:hover,
.imagebox-8:hover,
.imagebox-9:hover,
.imagebox-10:hover,
.imagebox-11:hover,
.imagebox-12:hover {
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)) 
            drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
    z-index: 100;
}

/* Keep rotation on hover */
.imagebox-1:hover { transform: scale(1.05) translateY(-10px) rotate(-1deg); }
.imagebox-2:hover { transform: scale(1.05) translateY(-10px) rotate(1deg); }
.imagebox-3:hover { transform: scale(1.05) translateY(-10px) rotate(1deg); }
.imagebox-4:hover { transform: scale(1.05) translateY(-10px) rotate(0deg); }
.imagebox-5:hover { transform: scale(1.05) translateY(-10px) rotate(6deg); }
.imagebox-6:hover { transform: scale(1.05) translateY(-10px) rotate(-7deg); }
.imagebox-7:hover { transform: scale(1.05) translateY(-10px) rotate(6deg); }
.imagebox-8:hover { transform: scale(1.05) translateY(-10px) rotate(4deg); }
.imagebox-9:hover { transform: scale(1.05) translateY(-10px) rotate(9deg); }
.imagebox-10:hover { transform: scale(1.05) translateY(-10px) rotate(9deg); }
.imagebox-11:hover { transform: scale(1.05) translateY(-10px) rotate(9deg); }
.imagebox-12:hover { transform: scale(1.05) translateY(-10px) rotate(-4deg); }

/* POLAROID FRAME STYLING */
.imagebox-1 img:not(.clothespin),
.imagebox-2 img:not(.clothespin),
.imagebox-3 img:not(.clothespin),
.imagebox-4 img:not(.clothespin),
.imagebox-5 img:not(.clothespin),
.imagebox-6 img:not(.clothespin),
.imagebox-7 img:not(.clothespin),
.imagebox-8 img:not(.clothespin),
.imagebox-9 img:not(.clothespin),
.imagebox-10 img:not(.clothespin),
.imagebox-11 img:not(.clothespin),
.imagebox-12 img:not(.clothespin) {
    width: 100%;
    height: auto;
    border: 15px solid #ededed;
    border-bottom-width: 50px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 5px 10px rgba(0, 0, 0, 0.2);
    background: #ededed;
    z-index: 3;
}

/* CLOTHESPIN POSITIONING */
.clothespin {
    position: absolute;
    top: -125px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px !important;
    height: auto !important;
    z-index: 2;
    border: none !important;
}

/* ROW 1 - POSITIONS */
.imagebox-1 {
    left: -4%;
    top: 96px;
    transform: rotate(-5deg);
}

.imagebox-1 .clothespin {
    transform: rotate(6deg);
    left: 47%;
    top: -115px;
}

.imagebox-2 {
    left: 30%;
    top: 123px;
    transform: rotate(4deg);
}

.imagebox-2 .clothespin {
    left: 45%;
    top: -118px;
    transform: rotate(13deg);
}

.imagebox-3 {
    left: 59%;
    top: 114px;
    transform: rotate(-2deg);
}

.imagebox-3 .clothespin {
    left: 43%;
    top: -112px;
    transform: rotate(-2deg);
}

.imagebox-4 {
    left: 92%;
    top: 102px;
    transform: rotate(3deg);
}

/* ROW 2 - POSITIONS */
.imagebox-5 {
    left: 0%;
    top: 696px;
    transform: rotate(3deg);
}

.imagebox-5 .clothespin {
    left: 21%;
    top: -121px;
    transform: rotate(3deg);
}

.imagebox-6 {
    left: 30%;
    top: 704px;
    transform: rotate(-4deg);
}

.imagebox-6 .clothespin {
    left: 30%;
    top: -131px;
    transform: rotate(-1deg);
}

.imagebox-7 {
    left: 61%;
    top: 684px;
    transform: rotate(2deg);
}

.imagebox-7 .clothespin {
    left: 39%;
    top: -117px;
    transform: rotate(-4deg);
}

.imagebox-8 {
    left: 95%;
    top: 683px;
    transform: rotate(9deg);
}

.imagebox-8 .clothespin {
    left: 30%;
    top: -119px;
    transform: rotate(-4deg);
}

/* ROW 3 POSITIONS */
.imagebox-9 {
    left: 94%;
    top: 683px;
    transform: rotate(9deg);
}

.imagebox-9 .clothespin {
    left: -333%;
    top: 606px;
    transform: rotate(-16deg);
}

.imagebox-10 {
    left: 95%;
    top: 683px;
    transform: rotate(9deg);
}

.imagebox-10 .clothespin {
    left: -106%;
    top: 530px;
    transform: rotate(-16deg);
}

.imagebox-11 {
    left: 95%;
    top: 683px;
    transform: rotate(9deg);
}

.imagebox-11 .clothespin {
    left: -223%;
    top: 564px;
    transform: rotate(-4deg);
}

.imagebox-12 {
    left: 87%;
    top: 1257px;
    transform: rotate(-11deg);
}

.imagebox-12 .clothespin {
    left: 71%;
    top: -117px;
    transform: rotate(12deg);
}

/* FOOTER */
footer {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    color: red;
    background: transparent;
    font-size: 8px;
    font-weight: bold;
    text-align: center;
    margin-top: 900px;
}
/* ============================================ */
/* PHOTO PAGE NAVIGATION PANEL */
/* ============================================ */
/* Add this section to your global.css file */

.photo-nav-panel {
  position: fixed;
  top: 295px;
  left: 20px;
  z-index: 9999;
  background: #000000;
  border: 2px solid #ff0000;
  padding: 10px;
  font-family: 'Fixedsys Excelsior', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #ff0000;
  width: 220px;
  max-width: 220px;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

/* Adjust position when accessibility panel is collapsed */
body.accessibility-collapsed .photo-nav-panel {
  top: 90px;
}

.photo-nav-panel-header {
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid #ff0000;
  padding-bottom: 5px;
  font-size: 14px;
}

.photo-nav-link {
  cursor: pointer;
  user-select: none;
  padding: 5px;
  margin: 3px 0;
  display: block;
  text-align: left;
  transition: all 0.1s ease;
  text-decoration: none;
  color: #ff0000;
  position: relative;
}

.photo-nav-link .carat-left,
.photo-nav-link .carat-right {
  display: inline-block;
  transition: transform 0.2s ease;
}

.photo-nav-link:hover .carat-left {
  transform: translateX(3px);
}

.photo-nav-link:hover .carat-right {
  transform: translateX(-3px);
}

.photo-nav-link:hover {
  color: #000000;
  background: #ff0000;
}

.photo-nav-collapse-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #000000;
  border: 2px solid #ff0000;
  color: #ff0000;
  cursor: pointer;
  padding: 2px 8px;
  font-family: 'Fixedsys Excelsior', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  transition: all 0.1s ease;
}

.photo-nav-collapse-btn:hover {
  background: #ff0000;
  color: #000000;
}

/* Collapsed state */
.photo-nav-panel.collapsed .photo-nav-link {
  display: none;
}

/* High contrast mode styling */
body.high-contrast .photo-nav-panel {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body.high-contrast .photo-nav-panel-header {
  border-bottom-color: #ffffff;
}

body.high-contrast .photo-nav-link {
  color: #ffffff;
}

body.high-contrast .photo-nav-link:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

body.high-contrast .photo-nav-collapse-btn {
  border-color: #ffffff;
  color: #ffffff;
}

body.high-contrast .photo-nav-collapse-btn:hover {
  background: #ffffff;
  color: #000000;
}