/* Define CSS styles for JCS FUTURE mothersite */
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }

                body {
                    background-color: #000;
                    color: white;
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 0;
                    scroll-behavior: smooth; /* Smooth scrolling behavior */
                }
                
                header {
                    justify-content: center;
                    background-size: 500% auto;
                    background-color: black;
                }
                
                .menu {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 0;
                    padding-left: .5vw;
                }
                
                .desktop-logo {
                    text-decoration: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    position: relative;
                    font-family: sans-serif;
                    font-size: clamp(3rem, 11vmin, 6vw);
                    background: linear-gradient(to right, #ffc3c3 0%, #FCC8C8 10%, #FFBAFF 25%, #B3B3FF 35%, #BDF7BD 50%, #FFFFBD 65%, #FFECC9 75%, #FCC8C8 85%, #ffc3c3 100%);
                    background-size: 400% auto;
                    background-clip: text;
                    color: transparent;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: shine 22s linear infinite;
                    transition: color 0.3s ease-in-out;
                }
                
                .mobile-logo {
                    text-decoration: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    position: relative;
                    font-family: sans-serif;
                    font-size: clamp(3rem, 11vmin, 6vw);
                    background: linear-gradient(to right, #ffc3c3 0%, #FCC8C8 10%, #FFBAFF 25%, #B3B3FF 35%, #BDF7BD 50%, #FFFFBD 65%, #FFECC9 75%, #FCC8C8 85%, #ffc3c3 100%);
                    background-size: 400% auto;
                    background-clip: text;
                    color: transparent;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: shine 22s linear infinite;
                    transition: color 0.3s ease-in-out;
                }
                
                @keyframes shine {
                    to {
                        background-position: 400% center;
                    }
                }
                
                .desktop-logo:hover {
                    margin: 0;
                    padding: 0;
                    color: rgb(255, 193, 193);
                    -webkit-text-stroke: 0.9px rgb(255, 255, 255);
                    -webkit-animation: glow 0.8s ease-in-out infinite alternate;
                    -moz-animation: glow 0.8s ease-in-out infinite alternate;
                    animation: glow 0.8s ease-in-out infinite alternate;
                }
                
                .mobile-logo:hover {
                    margin: 0;
                    padding: 0;
                    color: rgb(255, 193, 193);
                    -webkit-text-stroke: 0.9px rgb(255, 255, 255);
                    -webkit-animation: glow 0.8s ease-in-out infinite alternate;
                    -moz-animation: glow 0.8s ease-in-out infinite alternate;
                    animation: glow 0.8s ease-in-out infinite alternate;
                }
                
                .desktop-logo {
                    display: block;
                    /* Show the desktop logo */
                }
                
                .mobile-logo {
                    display: none;
                    /* Hide the mobile logo by default */
                }
                
                @-webkit-keyframes glow {
                    from {
                        text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #ffcfe7, 0 0 12px #ffa2d1, 0 0 15px #ff9ccd, 0 0 18px #ff70b7, 0 0 21px #ff67b3;
                    }
                    to {
                        text-shadow: 0 0 3px #fff, 0 0 6px #ff9dce, 0 0 9px #ff96ca, 0 0 12px #ff86c3, 0 0 15px #ff76bb, 0 0 18px #ff6db6, 0 0 21px #ff68b4;
                    }
                }
                
                @keyframes glow {
                    from {
                        text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #ffcfe7, 0 0 12px #ffa2d1, 0 0 15px #ff9ccd, 0 0 18px #ff70b7, 0 0 21px #ff67b3;
                    }
                    to {
                        text-shadow: 0 0 3px #fff, 0 0 6px #ff9dce, 0 0 9px #ff96ca, 0 0 12px #ff86c3, 0 0 15px #ff76bb, 0 0 18px #ff6db6, 0 0 21px #ff68b4;
                    }
                }

                #stars-canvas {
                    display: flex;
                    width: 100vw;
                    height: 400px;
                }

                .social-section {
                    width: auto;
                    justify-content: center;
                    align-items: center;
                }
                
                .passage-section {
                    text-align: center;
                    background-color: #063559;
                }
                
                #plbackground {
                    background-color: #063559;
                }
                
                .container {
                    position: relative;
                    height: 100vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    overflow: hidden;
                }
                
                .background-video {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    min-width: 100vw;
                    min-height: 100vh;
                    width: auto;
                    height: auto;
                    z-index: -1;
                }
                
                .video-cont {
                    position: relative;
                    z-index: -2;
                }
                
                .container-header {
                    text-align: center;
                    position: relative;
                    color: white;
                    font-size: 15vw; /* Adjust font size as needed */
                    -webkit-text-stroke: 0.9px black;
                    margin-bottom: 20px; /* Space between header and links/images */
                }
                
                .p-subheader {
                    margin: auto;
                    position: absolute;
                    text-align: center;
                    align-content: center;
                    color: white;
                    font-size: 20px;
                }
                
                .container-header a {
                    text-decoration: none;
                    color: white;
                    transition: color 0.3s ease-in-out;
                    text-decoration: none;
                    -webkit-text-stroke: 0.9px black;
                }
                
                .container-header a:visited {
                    color: white;
                    text-decoration: none;
                    -webkit-text-stroke: 0.9px black;
                }
                
                .container-header a:hover {
                    text-align: center;
                    text-decoration: none;
                    -webkit-text-stroke: 0.9px rgb(255, 255, 255);
                    -webkit-animation: glow s ease-in-out infinite alternate;
                    -moz-animation: glow 1s ease-in-out infinite alternate;
                    animation: glow 1s ease-in-out infinite alternate;
                }
                
                .container-header a:active {
                    text-decoration: none;
                }
                
                .passage-header {
                    text-align: center;
                    position: relative;
                    text-decoration: none;
                    color: #62FF88;
                    font-size: 15vw; /* Adjust font size as needed */
                }
                
                .passage-header a {
                    color: #62FF88;
                    text-decoration: none;
                    transition: color 0.3s ease-in-out;
                }
                .passage-header a:link {
                    color: #62FF88;
                    text-decoration: none;
                }
                
                .passage-header a:visited {
                    color: #62FF88;
                    text-decoration: none;
                }
                
                .passage-header a:hover {
                    color: white;
                    text-align: center;
                    text-decoration: none;
                    -webkit-text-stroke: 0.9px rgb(255, 255, 255);
                    -webkit-animation: glow s ease-in-out infinite alternate;
                    -moz-animation: glow 1s ease-in-out infinite alternate;
                    animation: glow 1s ease-in-out infinite alternate;
                }
            
                .social-links {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    padding: 25px;
                    gap: 100px; /*spacing consistent between images*/
                }
                
                .social-links a {
                    display: inline-block;
                    transition: filter 0.2s ease;
                }

                .social-links a:hover  {
                    filter: invert(100%);
                    background: #000;
                }

                .s-icon {
                    display: block;
                    width: auto;
                    height: auto;
                }
                
                footer {
                    background-color: black;
                    text-align: center;
                    padding: 2vh;
                    color: white;
                    font-size: 2vw;
                }
                
                /* Responsive for tablet */
                
                @media only screen and (max-width: 1280px) {
                    /* Container padding adjustment*/
                    .container {
                        padding: 10px;
                        height: 80vh;
                    }
                    .desktop-logo {
                        display: none;
                        /* Hide the desktop logo on tablet and mobile */
                    }
                    .mobile-logo {
                        display: block;
                        /* Show the mobile logo on tablet and mobile */
                    }
                    .social-links {
                        padding: 15px;
                        gap: 50px;
                    }
                    footer {
                        font-size: 2.5vw;
                    }
                }
                /* Responsive for mobile */
                
                @media only screen and (max-width: 800px) {
                    /* Container padding adjustment */
                    .container {
                        padding: 5px;
                        height: 75vh;
                    }
                    .social-links {
                        width: auto;
                        height: 60px;
                        padding: 0px;
                        gap: 15px; 
                    }
                    .s-icon {
                        width: auto;
                        height: 60px;
                    }
                    footer {
                        font-size: 4vw;
                    }
                }
                
                @media only screen and (max-width: 540px) {
                    .container {
                        height: 65vh;
                    }
                    .social-links {
                        width: auto;
                        height: 35px;
                        padding: 0px;
                        gap: 5px; 
                    }
                    .s-icon {
                        width: auto;
                        height: 35px;
                    }
                }