/* ============================================
   Global Page Styling
   ============================================ */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* stop page scroll */
}

body {
    /* Background image setup */
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;

    /* Text styling */
    color: #FF00D2;
    font-family: sans-serif;

    /* Flex layout (stack header, main, footer) */
    display: flex;
    flex-direction: column;
}

/* ============================================
   Header (Fixed at Top)
   ============================================ */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header img#lips {
    width: clamp(150px, 35%, 350px);
    height: auto;
}

header img#ad {
    width: clamp(150px, 40%; 350px);
    height: auto;
    float: right;
    padding-right: 50px;
}

/* ============================================
   Main Area (2 rows, 3 scrollable columns)
   ============================================ */
main {
    flex: 1;
    margin-top: 120px;  /* leave space for fixed header */
    margin-bottom: 60px; /* leave space for fixed footer */
    overflow: hidden;   /* prevent main scroll */
    
    /* ADDED: Center the content of the main area horizontally */
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Ensure content is stacked */
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    
    /* ADDED: Ensure the container doesn't force a full-page scroll/overflow */
    max-height: 100%; 
}

/* Row 1 (Playground image) */
.row.first {
    /* REMOVED: flex: 0 0 150px; as we want it to take more space for centering */
    /* NEW: Allow it to take up available space to center its content */
    flex-grow: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #ccc;
    width: 100%; /* Ensure it spans full width */
}

main img#play {
    /* This will now be centered horizontally and vertically
       within the expanded .row.first container */
    
    /* Enforces a maximum height of 200px */
    max-height: 125px;
    
    /* The clamp function defines the calculated height: 
       min(100px), preferred(10% of container height), max(150px)
       Note: The browser will use the lowest value among 
       100px, 10% of container height, and 150px, 
       but max-height will prevent it from ever exceeding 200px.
    */
    height: clamp(100px, 10%, 125px); 
    
    padding-top: 25px;
    box-sizing: content-box; 
    max-width: 100%; /* Optional: better responsiveness */
}

/* Row 2 (3 scrollable columns) */
.row.second {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 100%;
}

/* Each column cell scrolls independently */
.cell {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    box-sizing: border-box;
}


/* ============================================
   Footer (Fixed at Bottom)
   ============================================ */
#links_footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

#cp1{
	color: #FCC3DC;
    text-shadow: 0px 0px 20px #ED1C91;
    font-size: clamp(.8rem, 1.5vw, 1.25rem);
}

#cp2 {
    color: #FCC3DC;
    text-shadow: 0px 0px 10px #CB0A71;
	font-size: clamp(0.5rem, .75vw, 1rem);
	text-decoration: none;
}

/* ============================================
   Link Images & Lists
   ============================================ */
.links-list li img.link-img {
    max-width: 80%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    margin: 5px auto;
    display: block;
}

.links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.header-img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    min-height: 100px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    align-self: center;
}