/* === 1. BASE STYLES: MOBILE-FIRST (240px - 599px) === */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* --- Content Flow (Order defined by HTML structure, aligned with requirements) --- */

.header {
    width: 90%;
    padding: 20px 0;
    text-align: center;
    position: relative;
}
.title, .enquiries, .email {
    color: #fd77fe;
    font-family: "Times New Roman", serif;
    margin: 5px 0;
}
.title {
    font-size: 8vw; 
}
.enquiries, .email {
    font-size: 1rem; 
}

/* --- Profile and Misc (SIDE-BY-SIDE ON MOBILE) --- */
.profile-and-misc { /* New container needed to group PFP and Misc links */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 90%;
    margin: 20px 0;
}

.profile {
    display: block;
    width: 55%; /* Take up the left side */
    max-width: 184px;
    position: relative;
    text-align: center;
}
.pfp {
    display: block;
    width: 90%;
    height: auto;
    position: relative;
    z-index: 2;
}
.art-frame {
    display: block;
    position: absolute;
    width: 95%;
    height: 107%;
    top: -3.5%;
    left: -2.5%;
    z-index: 3;
    filter: hue-rotate(24deg) brightness(160%) saturate(55%);
}

/* MISC ITEMS (Shop, Trademark, Forum) - Vertical next to Profile */
.misc {
    display: flex;
    flex-direction: column; /* Stacked vertically */
    justify-content: space-around;
    width: 45%; /* Take up the right side */
    max-width: 100px;
    height: 150px; /* Match approximate height of PFP */
    margin-left: 10px;
}
.misc a, .misc img {
    width: 100%;
    height: auto;
    max-width: 100%; /* Small icon size */
    max-height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.forum {
   width: 50%;
   height: 50%;
}

/* --- Social Links --- */
.social-links {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 95%;
    padding: 15px 0;
    position: relative;
    /* border-top: 1px solid #fd77fe; */ /* Visual separator */
    /* border-bottom: 1px solid #fd77fe; */
    margin-bottom: 30px;
}
.social-links div {
    width: 10%;
    max-width: 40px;
    text-align: center;
}
.social-links img {
    width: 100%;
    height: auto;
    /* Apply individual filters for specific colors */
    .insta { filter: hue-rotate(708deg) brightness(1.2); }
    .youtube { filter: hue-rotate(727deg); }
    /* ... (rest of your specific filters) ... */
}

/* --- MAIN MENU (PLANET SYMMETRY) --- */
.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-bottom: 50px;
}

/* Container for each Planet Group (Image | Text | Image) */
.planet-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Pushes images to the sides */
    align-items: center;
    width: 90%;
    max-width: 500px;
    margin-bottom: 20px;
}

/* Planet Images (The single planet image containers) */
.planet-img-left, .planet-img-right {
    display: block;
    width: 30px; /* Small, fixed size for mobile symmetry */
    height: 30px;
    position: relative;
}

.planet-img-left img, .planet-img-right img, .social-links img {
    width: 100%;
    height: 100%;

}

.planet-img-left img, .planet-img-right img {
    filter: hue-rotate(347deg);
}

.insta, .discord, .threads {
    filter: hue-rotate(335deg);
}

.misc {
    filter: hue-rotate(345deg);
}

.trademark {
    filter: hue-rotate(19deg) brightness(1.3);
}

.forum {
    filter:);
}

/* Menu Text Container */
.container.item {
    /* Overrides the global .container padding for this specific item */
    padding: 0 10px;
    flex-grow: 1; /* Allows the text to take up available space */
    -:
    anchor-center;
    justify-items: center;
}
.container.item p a {
    font-size: 5vw; /* Symmetrical text size */
    color: #fd77fe;
    text-decoration: none;
    white-space: nowrap; /* Prevents menu text from wrapping */
}

/* === 2. TABLET / MID-SIZE (600px and up) === */
@media screen and (min-width: 600px) {

    .title { font-size: 6vw; }

    /* Redefine profile/misc layout for more space */
    .profile-and-misc {
        width: 600px;
        margin: 40px auto;
    }
    
    .profile {
        max-width: 250px;
    }

    .misc {
        max-width: 150px;
        height: 250px;
        margin-left: 20px;
    }
    .misc img {
        max-width: 100%; /* Larger icons on tablet */
        max-height: 100%;
    }

    /* Menu Text is now fixed size */
    .container.item p a {
        font-size: 28px; 
    }
    
    /* Planet images are larger */
    .planet-img-left, .planet-img-right {
        width: 50px; 
        height: 50px;
        
    }
}

/* === 2. DESKTOP/1024p (1024px and up) --- (Complex layout remains as defined previously) */
@media screen and (min-width: 1024px) {
    /* * NOTE: To use the complex absolute positioning for desktop, 
     * you will need to re-implement those styles here using percentage 
     * or controlled units. The inline styles were all removed in the HTML 
     * to make this possible.
     */
}
    .title { font-size: 6vw; }

    /* Redefine profile/misc layout for more space */
    .profile-and-misc {
        width: 600px;
        margin: 40px auto;
    }
    
    .profile {
        max-width: 250px;
    }

    .misc {
        max-width: 120px;
        height: 250px;
        margin-left: 45px;
        margin-bottom: -110px;
    }
    .misc img {
        /* max-width: 20vw; */ /* Larger icons on tablet */
    }

    /* Menu Text is now fixed size */
    .container.item p a {
        font-size: 28px; 
    }
    
    /* Planet images are larger */
    .planet-img-left, .planet-img-right {
        width: 50px; 
        height: 50px;
        
    }
}