@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&family=Playfair+Display:wght@600&family=Merriweather:wght@300;400;700&family=Bebas+Neue&family=Oswald:wght@300;400;600;700&family=Poppins:wght@500&family=Inter:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    color: #fff;
}

/* Panels container */
.panels {
    display: flex;
    height: 100vh;
    width: 100%;
}

.panel {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: flex 600ms cubic-bezier(.2,.8,.2,1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-width: 0;
}

.panel .content {
    padding: 2rem;
    text-align: center;
    transform: translateY(0);
    transition: transform 400ms ease, opacity 300ms ease;
}

.panel h2 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
}

.panel p {
    font-size: 1rem;
    opacity: 0.95;
}

/* Expand on hover (desktop/pointer) or when active class added (touch) */
.panel:hover,
.panel.active {
    flex: 3 1 0;
}

/* Background images for each panel (place images in public/images/) */
#aboutsite {
    background-image: url('images/home.jpg');
    background-size: cover;
    background-position: center;
}

/* Custom fonts for About This Website panel */
#aboutsite .content h2 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
}

#aboutsite .content p {
    font-family: 'Exo 2', sans-serif;
    font-weight: 300;
}

#services {
    background-image: url('images/services.jpg');
    background-size: cover;
    background-position: center;
}

/* Custom fonts for Services panel */
#services .content h2 {
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#services .content p {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}

#interactive {
    background-image: url('images/contact.jpg');
    background-size: cover;
    background-position: center;
}

/* Custom fonts for Interactive panel */
#interactive .content h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

#interactive .content p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

#resume {
    background-image: url('images/green_forest.png');
    background-size: cover;
    background-position: center;
}

/* Custom fonts for Resume panel */
#resume .content h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

#resume .content p {
    font-family: 'Merriweather', serif;
    font-weight: 300;
}

/* Dark overlay for readability */
.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35));
    transition: background 400ms ease, opacity 300ms ease;
    z-index: 0;
}

.panel .content {
    position: relative;
    z-index: 1;
}

/* Focus styles for keyboard users */
.panel:focus {
    outline: 4px solid rgba(255,255,255,0.25);
}

/* Mobile: stacked panels with click-to-open */
@media (max-width: 768px) {
    .panels { flex-direction: column; height: 100%; }
    .panel { height: 25vh; transition: height 400ms ease; }
    .panel.active { height: 100vh; }
}