style.css

/* Reset all default browser spacing */
*{
    margin:0;
    padding:0;
}

/* Fade‑in animation for page load */
@keyframes fadeIn {
    from {
        opacity: 0;                     /* Start invisible */
        transform: translateY(-100px);  /* Slide down from above */
    }
    to {
        opacity: 1;                     /* Fully visible */
        transform: translateY(0);       /* Back to normal position */
    }
}

/* Apply fade‑in animation to the whole page */
body{
    animation: fadeIn 1.2s ease forwards;
}

/* ===== Custom Font Imports ===== */

/* Main futuristic heading font */
@font-face {
    font-family: "nasalization";
    src: url(Fonts/Nasalization\ Rg.otf);
}

/* Polarix font — used for body text */
@font-face {
    font-family: "Polarix";
    src: url(Fonts/polarix-x_1.ttf);
}

/* Backup/alternate Polarix weight */
@font-face {
    font-family: "Polarix";
    src: url(Fonts/polarix_0.ttf);
}

/* Rostex — multiple variants for stylized headings */
@font-face {
    font-family: 'Rostex';
    font-style: normal;
    font-weight: normal;
    src: local('Rostex'), url(Fonts/RostexOblique-7OROB.woff) format('woff');
}

@font-face {
    font-family: 'Rostex';
    font-style: normal;
    font-weight: normal;
    src: local('Rostex'), url(Fonts/RostexObliqueoutline-vnPm4.woff) format('woff');
}

@font-face {
    font-family: 'Rostex';
    font-style: normal;
    font-weight: normal;
    src: local('Rostex'), url(Fonts/RostexOutline-woLow.woff) format('woff');
}

@font-face {
    font-family: 'Rostex';
    font-style: normal;
    font-weight: normal;
    src: local('Rostex'), url(Fonts/RostexRegular-m2r22.woff) format('woff');
}

/* Primary body styling with background color and horizontal overflow prevention */
body{
    background-color:#11151C;
    overflow-x: hidden;
}

/* Initial hidden state for elements designed to slide in from the left */
.fly-left{
    opacity:0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 1.6s ease;
}

/* Initial hidden state for elements designed to slide in from the right */
.fly-right{
    opacity:0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 1.6s ease;
}

/* State applied to trigger visibility and reset the transform position during animation */
.fly-in-visible{
    opacity:1;
    transform: translateX(0);
}

/* Main header container featuring a background banner with a subtle dark overlay and performance-optimized rendering */
#header{
    background-image: linear-gradient(rgba(0, 0, 0, 0.2)), url(Assets/website-banner.webp);
    height:155px;
    width:100%;
    box-sizing:border-box;
    background-size:cover;
    background-position:center;
    position:relative;
    text-align:center;
    background-repeat: no-repeat;
    padding:0 20px;
    padding-top:10px;
    overflow:hidden;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Primary heading typography with multi-layered shadows for depth and smooth transition properties for interaction */
.heading{
    font-family:"nasalization";
    color:whitesmoke;
    font-size:130px;
    text-decoration:none;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    margin:0;
    flex-shrink:0;

    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                text-shadow 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
}

/* Hover effect for the heading that increases scale and adds a luminous white glow */
.heading:hover{
    transform: scale(1.06);
    text-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.4),
        0 0 30px rgba(255,255,255,0.3);
}

/* Tactile active state for the main heading that shrinks slightly and maintains the glow effect when clicked */
.heading:active{
    transform: scale(0.97);
    text-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.4),
        0 0 30px rgba(255,255,255,0.3);
}

/* Wrapper for the heading to handle alignment, centering, and specific layout offsets within the header */
.heading-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    transform:translate(-20px,-20px);
    width:100%;
    padding:0 480px 0 340px;
    box-sizing:border-box;
}

/* Fixed positioning and dimensions for the SSC logo on the left side of the header */
.SSC{
    width:140px;
    height:140px;
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
}

/* Fixed positioning and dimensions for the Artemis logo, placed adjacent to the SSC logo */
.artemis-logo{
    width:140px;
    position:absolute;
    left:180px;
    top:50%;
    transform:translateY(-50%);
}

/* Transition and interaction properties for brand logos to ensure smooth scaling and glow effects */
.SSC,
.artemis-logo{
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                filter 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
    z-index:20;
}

/* Interactive hover state that scales the logos and applies a subtle outer glow */
.SSC:hover,
.artemis-logo:hover{
    transform: translateY(-50%) scale(1.05);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Tactile active state feedback that slightly shrinks the logos upon being clicked */
.SSC:active,
.artemis-logo:active{
    transform: translateY(-50%) scale(0.97);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Positioning and performance optimization for the crew-related visual element */
.ACREW{
    width:400px;
    position:absolute;
    right:0px;
    top:50%;
    transform: translateY(-50%);
    will-change: transform;
}

/* Navigation bar layout with background color, borders, and centralized flex alignment */
#navbar{
    background:#D66853;
    border-top:4px solid #7d4e57;
    border-bottom:4px solid #7d4e57;
    padding:12px 10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    font-family:'Rostex';
    z-index:10;
}

/* Typography and visual styling for navigation links and dropdown buttons, including multi-layered text shadows */
.nav-item a,
.dropdownbtn{
    color:white;
    font-size:20px;
    font-family:'Rostex';
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Transition properties for smooth scaling and color changes on interaction */
#navbar .nav-item a,
#navbar .dropdownbtn{
    transition: transform 0.2s ease, color 0.2s ease;
}
/* Interactive hover effects for navbar links and dropdown triggers */
#navbar .nav-item a:hover,
#navbar .dropdownbtn:hover{
    transform: scale(1.05);
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* Styling for the separator elements positioned between navigation items */
.sep{
    color:#7d4e57;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
}

/* Relative container to anchor the absolute positioning of dropdown content */
.drop{
    position:relative;
}

/* Hidden container for dropdown menus, revealed on hover */
.drop-content{
    position:absolute;
    display:none;
    background:#7d4e57;
    min-width:175px;
    border-radius:10px;
    top:100%;
    left:0;
    text-align:center;
    font-size:small;
    z-index:20;
}

/* Typography and spacing for links inside the dropdown menu */
.drop-content a{
    padding:10px;
    display:block;
    color:white;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Toggles the visibility of the dropdown menu when the parent container is hovered */
.drop:hover .drop-content{
    display:block;
}

/* Background and layout configuration for the first information section featuring the SLS launch */
#infosection1{
    background-image:url(Assets/SLS-Launching.webp);
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:120px 8% 0 8%;
}

/* Typography and styling for the primary heading in the first information section */
.infoheading{
    font-family:'Rostex';
    font-size:60px;
    z-index:10;
    color:white;
    margin-bottom:30px;
    /* Multi-layered shadow effect to ensure text stands out against the dynamic background */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Typography and styling for the heading in the second information section */
.infoheading2{
    font-family:'Rostex';
    font-size:60px;
    z-index:10;
    color:white;
    margin-bottom:30px;
    /* Consistent shadow layers to maintain visual depth across different headings */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Layout container for information content with a maximum width and stacking priority */
.informationsection{
    max-width:800px;
    position:relative;
    z-index:10;
}

/* Typography and positioning for the information text in the first section */
.information1{
    font-family:"Polarix";
    color:white;
    font-size:30px;
    text-align:center;
    position:relative;
    z-index:1;
    /* Multi-layered shadow effect for depth and legibility */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Background and layout configuration for the second information section */
#infosection2{
    background-image: url(Assets/SLS_Home.webp);
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:120px 8% 0 8%;
}

/* Styling for the text in section two, including specific alignment adjustments */
.information2{
    font-family:"Polarix";
    color:white;
    font-size:30px;
    margin-left:-100px;
    text-align:center;
    /* Consistent shadow layers to match the overall site aesthetic */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Information Section 3 Styles */
#infosection3{
    background-image: url(Assets/Orion.webp);
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-end;
    padding:120px 8% 0 8%;
}

/* Typography and styling for the heading in the third information section */
.infoheading-III{
    font-family:'Rostex';
    font-size:60px;
    z-index:10;
    color:white;
    margin-bottom:30px;
    /* Multi-layered shadow effect to ensure text stands out against the background */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Styling for the descriptive text in section three, featuring right-alignment */
.information3{
    font-family:"Polarix";
    color:white;
    font-size:30px;
    text-align:right;
    /* Consistent shadow layers for depth and legibility */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Interactive Link and Button Styles */
.interactive-hyperlink{
    font-size:20px;
    background-color:#D66853;
    font-family:'Rostex';
    text-align:center;
    color:white;
    border-radius:10px;
    text-decoration:none;
    cursor:pointer;
    z-index:20;
    display:inline-block;
    padding:10px 20px;
    position:relative;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.25s ease;
}

/* Slightly scales the link and adds a subtle glow effect on hover */
.interactive-hyperlink:hover{
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Vertically stacks buttons with consistent spacing and a top margin */
.button-stack{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top:20px;
}

/* Provides tactile feedback by slightly shrinking the link when clicked */
.interactive-hyperlink:active{
    transform: scale(0.97);
}

/* Common Section Positioning */
#infosection1,
#infosection2,
#infosection3{
    position: relative;
    z-index: 1;
}

/* Button Wrapper Layouts */
#button-wrapper1{
    margin-top:20px;
}

#button-wrapper2{
    margin-top:20px;
    text-align:center;
}

/* Footer Section Styling */
#footer{
    width:100%;
    height:350px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-top: 2px solid #D66853;
    box-shadow: 0 -4px 20px rgba(214,104,83,0.4);
    background: radial-gradient(circle at 20% 50%, rgba(214,104,83,0.08), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 40%),
                #11151C;
}

/* Footer GitHub Icon Animation */
.github-icon{
    width:80px;
    height:80px;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
    transition: transform 0.25s ease;
}

/* Rotates the GitHub icon a full 360 degrees when the user hovers over the footer heading */
.footerheading:hover .github-icon{
    transform: rotate(360deg);
}

/* Footer Heading Styling */
.footerheading{
    display:block;
    font-family:"nasalization";
    color:whitesmoke;
    font-size:50px;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:center;
    position:relative;
    text-decoration:none;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    margin:0;
    flex-shrink:0;
    cursor:pointer;
    transition:transform .25s cubic-bezier(.25,.1,.25,1), text-shadow .25s ease;
    transform-origin:bottom center;
}
/*footer heading animation after clicking on it*/
.footerheading::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-4px;
    width:0%;
    height:2px;
    background-color:#D66853;
    transition: width 0.3s ease;
}

/* Expand the decorative underline to full width on hover */
.footerheading:hover::after{
    width:100%;
}

/* Scale the footer heading and apply a luminous text shadow on hover */
.footerheading:hover{
    transform:scale(1.06);
    text-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.4),
        0 0 30px rgba(255,255,255,0.3);
}

/* Slight shrink effect when clicking the footer heading for tactile feedback */
.footerheading:active{
    transform:scale(0.97);
}

/* Artemis Introduction Section */
#artemis-main{
    background-image:url(Assets/Artemis_intro.webp) ;
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
}
/* Shared styling for Artemis main header and paragraph, featuring layered shadows for depth */
.artemis-main-header,
.artemis-main-paragraph {
    color: white;
    text-align: center;
    margin-bottom: 30px;
    /* Multi-layered shadow effect to ensure readability against the background image */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Typography and sizing for the primary Artemis introduction header */
.artemis-main-header {
    font-family: 'Rostex';
    font-size: 7rem;
    margin-top: 0;
}

/* Styling for the main descriptive paragraph in the Artemis introduction section */
.artemis-main-paragraph {
    font-family: "Polarix";
    font-size: 3.125rem;
    width: 1200px;
    flex-shrink: 0;
}

/* Artemis Section 1 Styles */
#artemis-1{
    background-image:url(Assets/Orion_section.webp) ;
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
}

/* Styling for the Artemis 1 section header including typography and layered shadows */
.artemis-1-header{
    font-family:'Rostex';
    color:white;
    font-size:10rem;
    text-align:center;
    margin:0 0 30px 0;
    /* Multi-layered shadow effect for depth and readability */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);

}

/* Main descriptive paragraph styling for the Artemis 1 section */
.artemis-1-main{
    font-family:"Polarix";
    text-align:center;
    color:white;
    width:1400px;
    font-size:2.8125rem;
    margin-bottom:30px;
    /* Consistent shadow styling for readability against backgrounds */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    flex-shrink:0;
}
#Artemis-1-Stats{
    background-color:#1f286c;
    width:1350px;
    height:250px;
    border-radius:20px;
    /* Smooth transitions for scaling and text shadow changes */
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                text-shadow 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
}

/* Scale and glow effect when hovering over the Artemis 1 stats container */
#Artemis-1-Stats:hover{
    transform:  scale(1.03);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Alignment and spacing for the statistics heading container */
.Stats-heading{
    text-align:left;
    padding-top:21px;
    padding-left:23px;
}

/* Typography, color, and multi-layered shadow effects for the main stats heading */
.statsheading{
    font-family:'Rostex';
    color:#D66853;
    width:600px;
    font-size:2.8125rem;
    /* Depth effect using multiple shadow layers */
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                text-shadow 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
}

/* Scale and glow effect on hover for the stats heading */
.statsheading:hover{
    transform: scale(1.03);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Slight shrink effect when clicking the stats heading */
.statsheading:active{
    transform: scale(0.97);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Centered layout for the statistics wrapper */
.statswrapper{
    width:100%;
    display:flex;
    justify-content: center;
}

/* Reset list styles for the statistics items */
.statistics{
    list-style-type:none;
    padding:0;
    margin:0;
}

/* Specific positioning and width for the Artemis stats data table */
.Artemis-stats-table{
    margin-left:20px;
    list-style-type:none;
    width:500px;
}

/* Visual styling for list items including font and complex shadows */
.list-decor{
    list-style-type:none;
    font-family:'Nasalization';
    color:white;
    font-size:25px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                text-shadow 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
}

/* Scale and glow interaction for decorative list items */
.list-decor:hover{
    transform: scale(1.02);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Click feedback for decorative list items */
.list-decor:active{
    transform:scale(0.98);
}

/* Manual positioning for the right-hand portion of the stats table */
.Artemis-stats-table-right{
    margin-top:-155px;
    margin-left:840px;
    list-style-type:none;
    width:500px;
}

/* Artemis 2 section hero layout with background image */
#artemis-2{
    background-image:url(Assets/Artemis-II-wallpaper.webp) ;
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
    gap:10px;
}

/* Large stylized header for the Artemis 2 section */
.artemis-2-header{
    font-family:'Rostex';
    color:white;
    font-size:10rem;
    top:20px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Styling for the main descriptive text in Artemis 2 section */
.artemis-2-main{
    font-family:"Polarix";
    text-align:center;
    color:white;
    width:1300px;
    font-size:2.8125rem;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    flex-shrink:0;
}

/* Background and interactive transitions for Artemis 2 statistics card */
#Artemis-2-Stats{
    background-color:#1f286c;
    width:1350px;
    height:250px;
    border-radius:20px;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                text-shadow 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
}

/* Hover state for Artemis 2 stats card */
#Artemis-2-Stats:hover{
    transform:  scale(1.03);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Full-width container for the Artemis 2 crew showcase */
#Artemis-2-Crew-div{
    height:1000px;
    width:100%;
    background-color:#11151C;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items: center;
    justify-content:center;
}

/* Floating header for the crew section with large typography */
.artemis-2-crew-header{
    font-family:'Rostex';
    color:white;
    font-size:5.5rem;
    top:20px;
    width:100%;
    max-width:3000px;
    position:absolute;
    margin-left:-30px;
    margin-top:10px;
    text-align:center;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Ensuring the crew division maintains full width */
#Artemis-2-Crew-div{
    width:100%;
}

/* Responsive grid layout for the crew member images */
.Artemis-II-Crew-Images-Grid{
    display:grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:2px;
    width:100%;
}

/* Image styling within the crew grid including hover animations */
.Artemis-II-Crew-Images-Grid img{
    width:100%;
    max-width:400px;
    margin: 0 auto;
    display:block;
    border-radius:10px;
    cursor:pointer;
    transition:transform 0.2s ease;
    object-fit:cover;
    height:300px;
    margin-top:-40px;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
        text-shadow 0.25s ease;
}

/* Layout for individual astronaut cards containing name, title, and bio */
.astronautcard{
    height:450px;
    width:100%;
    max-width:450px;
    justify-content:right;
    text-align:center;
}

/* Interactive wrapper for astronaut card elements */
.cooleffect{
    display:grid;
    text-decoration:none;
    cursor:pointer;
    align-items:center;
}

/* Typography and shadows for the astronaut name text */
.Astronaut_Name{
    font-family:'Rostex';
    font-size:30px;
    color:white;
    margin-top:15px;
    transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,1), filter 0.25s ease;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Typography and shadows for the astronaut title text */
.Astronaut_Title{
    font-family:'Rostex';
    font-size:30px;
    color:white;
    margin-top:5px;
    transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,1), filter 0.25s ease;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

.ralphgamboa{
    background: radial-gradient(circle at 20% 50%, rgba(213,85,83,0.08), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 40%),
                #11151C;
    height:1000px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
    gap:10px;
}

/* Horizontal line separator with color and expansion transition */
.separatorjr{
    width:270px;
    margin-left:80px;
    height:5px;
    background-color:#D66853;
    border-color:#D66853;
    transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,1), filter 0.25s ease;
}

/* Parent-triggered hover effects: scale and glow for astronaut name */
.astronautcard:hover .Astronaut_Name{
    filter: drop-shadow(0 0 8px rgba(214,104,83,1));
    transform:scale(1.1);
}

/* Parent-triggered hover effects: scale and glow for astronaut title */
.astronautcard:hover .Astronaut_Title{
    filter: drop-shadow(0 0 8px rgba(214,104,83,1));
    transform:scale(1.1);
}

/* Specific hover effect for Wiseman's title variant */
.astronautcard:hover .Astronaut_Title_wiseman{
    filter: drop-shadow(0 0 8px rgba(214,104,83,1));
    transform:scale(1.1);
}

/* Horizontal expansion effect for the separator line on hover */
.astronautcard:hover .separatorjr{
    filter: drop-shadow(0 0 8px rgba(214,104,83,1));
    transform:scaleX(1.3);
}

/* Detailed biographical text styling for astronauts */
.astronautinfo{
    text-align:center;
    font-family:"Polarix";
    font-size:20px;
    width:350px;
    color:white;
    margin-left:50px;
    cursor:default;
    margin-top:10px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
        text-shadow 0.25s ease;
}

/* Astronaut Info Hover Scale */
.astronautinfo:hover{
    transform:scale(1.1)

}

/* Image Grid Hover and Active States */
.Artemis-II-Crew-Images-Grid img:hover{
    transform:scale(1.03);
    filter: drop-shadow(0 0 8px rgba(214,104,83,1));
}

.Artemis-II-Crew-Images-Grid img:active{
    filter: drop-shadow(0 0 8px rgba(214,104,83,1));
    transform:scale(0.98);

}

/* Artemis 3 Section Background and Layout */
#artemis-3{
    background-image:url(Assets/starship-hls.webp) ;
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
    gap:10px;
}

/* Artemis 3 Header Styling */
.artemis-3-main-header{
    font-family:"Rostex";
    font-size:100px;
    color:white;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Artemis 3 Paragraph Styling */
.artemis-3-main-paragraph{
    font-family:"Polarix";
    font-size:30px;
    color:white;
    width:100%;
    max-width:1200px;
    text-align:center;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);

}
.crew-wrapper{
    width:100%;
    margin-top:50px;
}

/* Main header for the Artemis 3 crew section */
.artemis-3-crew-main-header{
    font-family:"Rostex";
    font-size:60px;
    margin-top:10px;
    color:white;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Main container for the Artemis IV section */
#artemis-iv-main{
    background-image:url(Assets/Artemis_whatever.webp) ;
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
    gap:10px;
}

/* Header text for Artemis IV section */
.artemis-iv-main-header{
    font-family:'Rostex';
    color:white;
    font-size:7rem;
    top:20px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);

}

/* Main paragraph for Artemis IV section */
.artemis-iv-main-paragraph{
    font-family:"Polarix";
    text-align:center;
    color:white;
    width:1300px;
    font-size:2.8125rem;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    flex-shrink:0;
}

/* Introduction section for the SLS rocket */
#SLS-Introduction{
    background-image:url(Assets/SLS-interactive-main.webp) ;
    height:900px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    padding-top:80px;
}

/* Header for the SLS intro section */
.sls-intro-header{
    font-family:'Rostex';
    color:white;
    font-size:5rem;
    text-align:center;
    margin:0 0 30px 0;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);

}

/* Paragraph text for the SLS intro section */
.sls-intro-p{
    font-family:"Polarix";
    text-align:center;
    color:white;
    width:1400px;
    font-size:2.8125rem;
    margin-bottom:30px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    flex-shrink:0;

}


/* Header for the SSC section */
.SSC-Header{
    font-family:'Rostex';
    color:white;
    font-size:4rem;
    top:20px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Paragraph text for the SSC section */
.SSC-P{
    font-family:"Polarix";
    text-align:center;
    color:white;
    width:1300px;
    margin-right:-90px;
    font-size:2.8125rem;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
    flex-shrink:0;
}

/* Interactive icon for the SSC section */
.SSC-icon{
    width:200px;
    height:200px;
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-390px);
}

/* Animations and states for the SSC icon */
.SSC-icon{
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                filter 0.25s ease;
    transform-origin: bottom center;
    cursor:pointer;
    z-index:20;
}

/* Hover state for the SSC icon */
.SSC-icon:hover{
    transform: translateY(-390px) scale(1.05);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Active/click state for the SSC icon */
.SSC-icon:active{
    transform: translateY(-390px) scale(0.8);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* Secondary styling for the SLS Introduction section */
#SLS-Introduction{
    background-color:#0d1117;
    min-height:500px;
    max-height:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:120px 8% 100px 8%;
}

/* Secondary header styling for SLS intro */
.sls-intro-header{
    font-family:'Rostex';
    color:white;
    font-size:60px;
    margin-bottom:30px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Secondary paragraph styling for SLS intro */
.sls-intro-p{
    font-family:"Polarix";
    color:white;
    font-size:24px;
    max-width:900px;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2),
        0 0 40px rgba(0,0,0,0.1);
}

/* Main container for the interactive SLS rocket display */
#SLS-Interactive{
    background-color:#11151C;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:80px 8% 100px 8%;
}

/* Header for the interactive SLS area */
.sls-interactive-header{
    font-family:'Rostex';
    color:white;
    font-size:36px;
    margin-bottom:50px;
    text-align:center;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4);
}

/* The viewport area for the interactive rocket */
#Interactive_Area{
    position:relative;
    width:100%;
    max-width:1400px;
    aspect-ratio: 1934 / 286;
}

/* Shared properties for rocket components */
.rocket-layer{
    position:absolute;
    object-fit:contain;
    transition: transform 0.5s cubic-bezier(0.25,0.1,0.25,1), opacity 0.5s ease, filter 0.5s ease;
    cursor:pointer;
}

/* Position and size for the rocket core stage */
.rocket-core{
    left:0%;
    top:16.26%;
    width:76.94%;
    height:67.48%;
}

/* Position and size for the top solid rocket booster */
.rocket-srb-top{
    left:0%;
    top:-13%;
    width:59.82%;
    height:32.52%;
}

/* Position and size for the bottom solid rocket booster */
.rocket-srb-bottom{
    left:0%;
    top:80%;
    width:59.82%;
    height:32.52%;
}

/* Position and size for the Orion spacecraft */
.rocket-orion{
    left: 78%;
    top: 32%;
    width: 22%;
    height: 36%;
}

/* Core stage decoupling animation on hover */
.rocket-core:hover{
    transform: translateY(-6px) scale(1.01);
    filter: drop-shadow(0 0 15px rgba(214,104,83,0.6));
}

/* Orion spacecraft decoupling animation on hover */
.rocket-orion:hover{
    transform: translateX(20px) scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.6));
}

/* Top SRB decoupling animation on hover */
.rocket-srb-top:hover{
    transform: translateY(-28px) rotate(-4deg);
    opacity:0.7;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.4));
}

/* Bottom SRB decoupling animation on hover */
.rocket-srb-bottom:hover{
    transform: translateY(28px) rotate(4deg);
    opacity:0.7;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.4));
}

/* Caption text below the interactive rocket */
.sls-caption{
    margin-top:40px;
    font-family:"Polarix";
    color:white;
    font-size:22px;
    text-align:center;
    min-height:60px;
    max-width:800px;
    transition: opacity 0.25s ease;

}