/* Hide mobile elements on desktop */
.mobile-header,
.mobile-nav,
.mobile-nav-toggle,
.mobile-coelacanth,
.mobile-lavalamp {
    display: none;
}

/* Make sure desktop header shows */
.desktop-header {
    display: block;
}

button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
}

/* GRID BACKGROUND ANIMATION */
html {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    position: relative;
    height: 100vh;
    margin: 0;
    padding: 30px;
    background: linear-gradient(
        #000000 25%,
        #ff3131 50%,
        #ff3131 50%,
        #000000 100%
    );
    background-attachment: fixed;
    font-family: "Orbitron", "Courier New", monospace;
    color: red;
}

.wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
    perspective: 360px;
    perspective-origin: 50% 50%;
    pointer-events: none;
    z-index: 0;
}

.top-plane {
    width: 200%;
    height: 130%;
    position: absolute;
    bottom: -30%;
    left: -50%;
    background-image: 
        linear-gradient(#ff3131 2px, transparent 2px),
        linear-gradient(to right, #ff3131 2px, transparent 2px);
    background-size: 100px 100px, 100px 100px;
    background-position: -1px -1px, -1px -1px;
    transform: rotateX(85deg);
    animation: planeMoveTop 2s infinite linear;
}

.bottom-plane {
    width: 200%;
    height: 130%;
    position: absolute;
    top: -30%;
    left: -50%;
    background-image: 
        linear-gradient(#ff3131 2px, transparent 2px),
        linear-gradient(to right, #ff3131 2px, transparent 2px);
    background-size: 100px 100px, 100px 100px;
    background-position: -1px -1px, -1px -1px;
    transform: rotateX(-85deg);
    animation: planeMoveBot 2s infinite linear;
}

@keyframes planeMoveTop {
    from {
        background-position: 0px -100px, 0px 0px;
    }
    to {
        background-position: 0px 0px, 100px 0px;
    }
}

@keyframes planeMoveBot {
    from {
        background-position: 0px 0px, 0px 0px;
    }
    to {
        background-position: 0px -100px, 100px 0px;
    }
}

@media (max-height: 350px) {
    .wrap {
        perspective: 210px;
    }
}


/* OVERALL STYLE STUFFS */
body {
    font-family: "Orbitron", "Courier New", monospace;
    color: red;
    margin: 0;
    padding: 30px;
}

header h1 {
    font-family: "Audiowide", "Courier New", monospace;
    font-size: 2em;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
h1, h2, h3, h4 {font-family: "Audiowide", "Courier New", monospace;
    margin: 0;
    padding: 0;
}

 p {
    margin: 0;
    padding: 0;
     font-size: small;
}

footer p {
    font-size: 8px;
    margin: 0;
    padding: 0;
}

 a:link {
    color:blueviolet;
    background-color: transparent;
    text-decoration: none;
}
 a:visited {
    color:darkred;
    background: transparent;
    text-decoration: none;
}

a[href^='http']::after {
    content: url('IMAGES/external.png');
    margin-left: 0.25em;
}

/* MAINCONTAINER */
.maincontainer {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: black; 
    border: 10px double red;
    padding: 10px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 0 20px red;
    z-index: 1;
}

/* HEADER STUFFS AND MARQUEES */
header {
    text-align: center;
}

header h1 {
    font-size: 2em;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

header marquee {
    display: block;
    border: 4px dotted red; 
    padding: 3px;
    margin-bottom: 10px;
    color: red;
    background: black;
}

/* NAV STUFFS */
nav {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 30px;
}

nav a {
    color: red !important;
    text-decoration: none;
    border: 2px solid red;
    background: black;
    padding: 5px 15px;
    font-weight: bold;
    font-family: "Audiowide", "Courier New", monospace;
    transition: all 0.2s ease-in-out;
    position: relative;
}

/* this might be unneeded now but i'm afraid to change it*/
@keyframes pulseGlow {
    0%, 100% {
        filter: drop-shadow(0 0 3px red) drop-shadow(0 0 6px red);
    }
    50% {
        filter: drop-shadow(0 0 6px red) drop-shadow(0 0 12px red);
    }
}

/* nav hover effects */
nav a:hover {
    background: black !important; 
    color: red !important; 
    transform: translateY(-3px);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

/* nav current tab */
nav a:visited {
    color: red !important;
}

/* SHAKE EFFECT FOR ALL NON-NAV LINKS */
a:not(nav a) {
    position: relative;
    display: inline-block;
}

a:not(nav a):hover {
    animation: linkShake 0.3s ease-in-out;
}

@keyframes linkShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 0); }
    50% { transform: translate(1px, 0); }
    75% { transform: translate(-1px, 0); }
}

/* GRID LAYOUT */
main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:
    auto
    auto
    auto
    auto
    auto
    auto
    auto
    auto
    auto;
    gap: 50px;

    grid-template-areas:
    "imagebox-1 aboutmebox aboutmebox"
    "aboutsitebox aboutsitebox imagebox-2"
    "imagebox-3 interestbox favsbox"
    ". interestbox favsbox"
    "divtop divtop divtop"
    "stampmarquee stampmarquee stampmarquee"
    "divbottom divbottom divbottom"
    "buttonbox buttonbox buttonbox"
    "citiesbox . instabox";
}

/* box=box */
.imagebox-1 {grid-area: imagebox-1;}
.imagebox-2 {grid-area: imagebox-2;}
.imagebox-3 {grid-area: imagebox-3;}
.aboutmebox {grid-area: aboutmebox;}
.aboutsitebox {grid-area: aboutsitebox;}
.interestbox {grid-area: interestbox;}
.favsbox {grid-area: favsbox;}
.stampmarquee {grid-area: stampmarquee;}
.buttonbox {grid-area: buttonbox;}
.citiesbox {grid-area: citiesbox;}
.instabox {grid-area: instabox;}

/* SMALL BOX STYLES */
.imagebox-1,
.imagebox-2,
.imagebox-3 {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagebox-1 {
    border-image: url(IMAGES/polaroid11-27-25.png) 16 15 94 13 fill / 16px 15px 94px 13px;
padding: 16px 15px 94px 13px;
    transform: rotate(-5deg) scale(0.8);
}

.imagebox-1 img{
    max-width: 100%;
    height: auto;
    display: block;
}

.imagebox-2 {
    border-image: url(IMAGES/polaroid5-20-23.png) 16 15 94 13 fill / 16px 15px 94px 13px;
padding: 16px 15px 94px 13px;
    transform: rotate(17deg) scale(0.75);
}

.imagebox-2 img{
    max-width: 100%;
    height: auto;
    display: block;
}

.imagebox-3 {
    border-image:url(IMAGES/polaroid11-6-25.png) 16 15 94 13 fill / 16px 15px 94px 13px;
padding: 16px 15px 94px 13px;
    transform: rotate(-3deg) scale(0.8);
}

.imagebox-3 img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.pushpin {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    z-index: 4;
}

.pushpin2 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    z-index: 4;
}

/* different positions for each pushpin */
.imagebox-1 .pushpin {
    top: -48px;
    left: 53%;
}

.imagebox-2 .pushpin {
    top: -44px;
    left: 10%;
}

.imagebox-2 .pushpin2 {
    top: 512px;
    left: 94%;
}


.imagebox-3 .pushpin {
    top: -47px;
    left: 55%;
}

.aboutmebox,
.aboutsitebox {
    border: none;
    padding: 15px;
    padding-bottom: 5px;
    background: rgba(255, 0, 0, 0.2);
    font-family: "Space Mono", monospace;
    height: 450px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scrollable-content {
    flex: 1; /* Takes up remaining space */
    overflow-y: auto;
    padding-right: 10px;
    
    /* special firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: red black;
}

/* gross chromium scrollbar */
.scrollable-content::-webkit-scrollbar {
    width: 12px;
    background: black;
}

.scrollable-content::-webkit-scrollbar-track {
    background: black !important;
    border: 1px solid red;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: black !important;
    border: 2px solid red !important;
    transition: all 0.2s ease-in-out;
}

.idbanners {
    flex-shrink: 0;
    padding: 0;
    padding-top: 5px;
    justify-content: center;
    text-align: center;
}

.aboutsitebox .idbanners {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.interestbox,
.favsbox {
    border: 3px dashed red;
    padding: 15px;
    background: transparent;
    font-family: "Space Mono", monospace;
    height: 450px;
    overflow-y: auto;
    
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: red black;
}

/* Chromium scrollbar */
.interestbox::-webkit-scrollbar,
.favsbox::-webkit-scrollbar {
    width: 12px;
    background: black;
}

.interestbox::-webkit-scrollbar-track,
.favsbox::-webkit-scrollbar-track {
    background: black !important;
    border: 1px solid red;
}

.interestbox::-webkit-scrollbar-thumb,
.favsbox::-webkit-scrollbar-thumb {
    background: black !important;
    border: 2px solid red !important;
    transition: all 0.2s ease-in-out;
}

.favsbox dl {
    margin: 10px 0 0 0;
    padding: 0;
}

.favsbox dt {
    font-weight: bold;
    display: inline;
    margin: 0;
    font-family: "Audiowide";
    font-size: small;
}

.favsbox dd {
    display: inline;
    margin: 0;
    font-family: "Orbitron";
    font-size: small;
}

.favsbox dd::after {
    content: "";
    display: block;
    margin-bottom: 10px;
}

.interestbox ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    font-family: "Orbitron", "Courier New", monospace;
}

.interestbox li {
    margin-bottom: 15px;
    font-size: small;
}

.stampmarquee {
    border: none;
    padding: 0px;
    background: transparent;
}

.divtop {
    grid-area: divtop;
    width: 100%;
    overflow: hidden;
    margin-bottom: -40px;
}

.divbottom {
    grid-area: divbottom;
    width: 100%;
    overflow: hidden;
    margin-top: -25px;
}

.divtop img,
.divbottom img {
    width: 100%;
    height: auto;
    display: block;
}

.instabox {
    border: none;
    padding: 15px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transform: scale(1.3);
    margin-bottom: 20px;
}

.citiesbox {
    border: none;
    padding: 15px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transform: scale(1.3);
     margin-bottom: 20px;
}

.citiesbox img,
.instabox img {
    width: 100%;
    height: auto;
    display: block;
}

/* STICKER STYLES */
.sticker {
    position: absolute;
    pointer-events: none; /* So they don't interfere with clicking */
}

.sticker img {
    display: block;
}

/* Frog */
.sticker-frog {
    top: 623px;
    left: 393px;
    z-index: 5;
}

.sticker-frog img {
    width: 160px;
    height: auto;
}

/* Glass Frog */
.sticker-glassfrog  {
    top: 798px;
    left: 1164px;
    z-index: 5;
    transform: scaleX(-1) rotate(-20deg);
}

.sticker-glassfrog img {
    width: 100px;
    height: auto;
}

/* Cherries */
.sticker-cherries  {
    top: 823px;
    left: 698px;
    z-index: 5;
    transform: scaleX(-1) rotate(13deg);
}

.sticker-cherries img {
    width: 73px;
    height: auto;
}

/* Coelacanth */
.sticker-coelacanth {
    bottom: 565px;
    right: -80px;
    z-index: 5;
    transform: rotate(20deg);
}

.sticker-coelacanth img {
    width: 450px;
    height: auto;
}

/* CD */
.interestbox .sticker-cd {
    top: 1426px;
    right: 433px;
    z-index: 5;
}

.interestbox .sticker-cd img {
    width: 75px;
    height: auto;
}

/* Gir */
.sticker-gir {
    top: 161px;
    right: 33px;
    z-index: 5;
}

.sticker-gir img {
    width: 50px;
    height: auto;
}

/* Marceline */
.sticker-marceline {
    top: 1314px;
    left: 340px;
    z-index: 5;
    transform: rotate(-10deg);
}

.sticker-marceline img {
    width: 168px;
    height: auto;
}

/* Lava lamp */
.sticker-lavalamp {
    bottom: 40px;
    left: 51%;
    transform: translateX(-50%);
    z-index: 5;
}

.sticker-lavalamp img {
    width: 115px;
    height: auto;
}

/* Pride dino */
.interestbox .sticker-pridedino {
    bottom: 544px;
    left: 300px;
    z-index: 5;
    transform: rotate(8deg);
}

.interestbox .sticker-pridedino img {
    width: 270px;
    height: auto;
}

/* 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;
}

/* ============================================ */
/* MOBILE RESPONSIVE STYLES */
/* ============================================ */
@media (max-width: 768px) {
  
  /* FIX BOX SIZING */
    * {
        box-sizing: border-box !important;
    }
    
    /* Hide specific idbanners on mobile */
.aboutmebox .idbanners img:nth-child(n+7) {
    display: none !important;
}

.aboutsitebox .idbanners img:nth-child(n+4) {
    display: none !important;
}

    /* MOBILE BACKGROUND */
body {
    background: black url('IMAGES/blackinkbackground.png') repeat !important;
    background-attachment: fixed !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}
    
    /* Hide desktop grid background */
    .wrap {
        display: none !important;
    }
    
    /* Hide accessibility panel on mobile */
    .accessibility-panel {
        display: none !important;
    }
    
    /* MOBILE CONTAINER */
.maincontainer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px !important;
    padding-bottom: 20px !important;
    gap: 20px !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}
    
    /* Increase text size on mobile */
.maincontainer {
    font-size: 115% !important;
}

/* Keep header normal size */
.mobile-header h1 {
    font-size: 18px !important;
}

/* Adjust specific elements if needed */
.aboutmebox .scrollable-content,
.aboutsitebox .scrollable-content {
    font-size: 1em !important;
}

.interestbox,
.favsbox {
    font-size: 0.95em !important;
}

    /* ==================== */
    /* MOBILE HEADER */
    /* ==================== */
    /* Hide desktop header */
    .desktop-header {
        display: none !important;
    }
    
    /* Show mobile header */
    .mobile-header {
        display: flex !important;
        position: relative;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .mobile-header h1 {
        text-align: left !important;
        font-size: 18px !important;
        margin: 0 !important;
        flex: 1;
        line-height: 1.2;
        letter-spacing: 1px;
        font-family: "Audiowide", "Courier New", monospace;
    }
    
    /* HAMBURGER MENU BUTTON */
    .mobile-nav-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        background: black;
        border: 2px solid red;
        padding: 8px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
    
    .mobile-nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: red;
        transition: 0.3s;
    }
    
    /* Animate hamburger to X when open */
    .mobile-nav-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-nav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
    
    /* Mobile nav dropdown */
    .mobile-nav {
        display: flex !important;
        position: fixed;
        top: 70px;
        left: 10px;
        right: 10px;
        background: black;
        border: 2px solid red;
        flex-direction: column;
        z-index: 1000;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    }
    
    /* Show nav when open */
    .mobile-nav.mobile-open {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, visibility 0s;
    }
    
    /* Mobile nav links */
    .mobile-nav a {
        display: block;
        padding: 15px 20px;
        margin: 0;
        border: none;
        border-bottom: 1px solid red;
        background: black !important;
        text-align: left;
        font-size: 0.9em;
        color: red !important;
        text-decoration: none;
        font-family: "Audiowide", "Courier New", monospace;
        font-weight: bold;
        transform: none !important;
    }
    
    .mobile-nav a:last-child {
        border-bottom: none;
    }
    
    .mobile-nav a:hover {
        background: rgba(255, 0, 0, 0.1) !important;
        transform: none !important;
        animation: none !important;
    }
    
    /* ==================== */
    /* MOBILE LAYOUT */
    /* ==================== */
    main {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        padding-bottom: 40px !important;
    }
    
    /* Hide all desktop stickers */
    .sticker {
        display: none !important;
    }
    
    /* ==================== */
    /* ROW 1: ABOUTMEBOX */
    /* ==================== */
    .aboutmebox {
    order: 1;
    height: 300px !important;
    width: 100% !important;
    padding: 15px !important;
    padding-bottom: 10px !important;
    background: rgba(255, 0, 0, 0.2) !important;
    border: none !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}
    
    .aboutmebox .scrollable-content {
        font-size: 0.9em;
    }
    
    .aboutmebox .idbanners {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        justify-content: center;
    }
    
    .aboutmebox .idbanners img {
        width: 86px;
        height: 15px;
    }

    .aboutmebox p {
      font-size: 0.9rem;
    }
    
    /* ==================== */
/* ROW 2: IMAGES SIDE BY SIDE */
/* ==================== */
/* Create a wrapper for the images */
.imagebox-1,
.imagebox-3 {
    display: block !important;
    width: 48% !important;
    transform: none !important;
    padding: 10px 5px 50px 5px !important;
    border: 2px solid #ededed !important;
    border-image: none !important;
    background: #ededed !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.imagebox-1 {
    order: 2;
}

.imagebox-3 {
    order: 3;
}

/* Make main use flexbox and wrap */
main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2% !important;
    padding-bottom: 40px !important;
}

/* Force full width for single-column items */
.aboutmebox,
.aboutsitebox,
.mobile-coelacanth,
.divtop,
.stampmarquee,
.divbottom,
.mobile-lavalamp {
    width: 100% !important;
}
    
    .imagebox-1 img,
    .imagebox-3 img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Hide pushpins on mobile */
    .pushpin,
    .pushpin2 {
        display: none !important;
    }
    
    /* Clearfix after images */
    .imagebox-3::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Hide imagebox-2 on mobile */
    .imagebox-2 {
        display: none !important;
    }
    
    /* ==================== */
    /* ROW 3: ABOUTSITEBOX */
    /* ==================== */
    .aboutsitebox {
    order: 4;
    height: 300px !important;
    width: 100% !important;
    padding: 15px !important;
    background: rgba(255, 0, 0, 0.2) !important;
    border: none !important;
    clear: both;
    margin-top: 40px !important;
}
    
    .aboutsitebox .scrollable-content {
        font-size: 0.9em;
    }
    
    .aboutsitebox .idbanners {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        justify-content: center;
    }
    
    .aboutsitebox .idbanners img {
        width: 88px;
        height: 31px;
    }
    
    .aboutsitebox p {
      font-size: 0.9rem;
    }
    
    /* ==================== */
    /* ROW 4: COELACANTH */
    /* ==================== */
    .mobile-coelacanth {
        display: block !important;
        order: 5;
        text-align: center;
        padding: 20px 0;
    }
    
    .mobile-coelacanth img {
        max-width: 90%;
        height: auto;
    }
    
    /* ==================== */
/* ROW 5: INTERESTBOX & FAVSBOX SIDE BY SIDE */
/* ==================== */
.interestbox,
.favsbox {
    display: block !important;
    width: 48% !important;
    height: 350px !important;
    border: 2px solid red !important;
    padding: 10px !important;
    font-size: 0.85em !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.interestbox {
    order: 6;
}

.favsbox {
    order: 7;
}
    
    /* Make titles and subtitles sticky */
    .interestbox h3,
.interestbox p,
.favsbox h3 {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}
    
    .interestbox ul,
    .favsbox dl {
        font-size: 0.9em;
    }
    
    /* Clearfix after boxes */
    .favsbox::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* ==================== */
    /* ROW 6: DIVTOP */
    /* ==================== */
    .divtop {
        order: 8;
        clear: both;
        margin-bottom: -5px !important;
        margin-top: 40px;
    }
    
    /* ==================== */
    /* ROW 7: STAMPMARQUEE */
    /* ==================== */
    .stampmarquee {
    order: 9;
   }
    
    /* ==================== */
    /* ROW 8: DIVBOTTOM */
    /* ==================== */
    .divbottom {
        order: 10;
        margin-top: -5px !important;
    }
    
    /* ==================== */
    /* ROW 9: LAVALAMP */
    /* ==================== */
    .mobile-lavalamp {
        display: block !important;
        order: 11;
        text-align: center;
        padding: 20px 0;
    }
    
    .mobile-lavalamp img {
        width: 115px;
        height: auto;
    }
    
    /* Hide desktop citiesbox and instabox */
    .citiesbox,
    .instabox {
        display: none !important;
    }
    
    /* ==================== */
    /* FOOTER */
    /* ==================== */
    footer {
        order: 12;
        padding: 20px 10px;
        text-align: center;
        font-size: 7px;
        line-height: 1.5;
    }
    
    footer p {
        font-size: 7px;
        margin: 0;
    }
}