body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: white; /* Set the page background to white */
    color: black; /* Adjust text color for contrast */
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    height: 100vh; /* Make the body take the full viewport height */
    margin: 0; /* Remove default margin */
    position: relative;    /* establish stacking context */

}

body:not(.scrollable-page) {
    background: linear-gradient(0deg, #000000, #0000008c, #ffffff); /* Linear gradient */
    background-size: 400% 400%; /* Optional: For animated gradient */
    animation: gradientAnimation 20s ease infinite; /* Keep the animation */
    height: 100vh; /* Restrict height to the viewport */
    overflow: hidden; /* Disable scrolling */
}

.scrollable-page {
    height: 100vh; /* Ensure it fills the viewport height */
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    overflow-y: auto; /* Enable scrolling if needed */
}

body.scrollable-page {
    display: block;      /* turn off flex for this page */
    padding: 20px 0;     /* optional breathing room */
    height: auto;        /* let the page grow beyond the viewport */
  }

@keyframes gradientAnimation {
    0% { background-position: 0% 100%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}

h1 {
    transform: translateY(-20px); /* Move the heading down by 50px */
    position: relative; /* Ensure it moves independently */
    z-index: 10; /* Bring the heading to the front */
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.1),  /* Bottom-right shadow */
        -1px 1px 0 rgba(255, 255, 255, 0.1), /* Bottom-left shadow */
        1px -1px 0 rgba(255, 255, 255, 0.1), /* Top-right shadow */
        -1px -1px 0 rgba(255, 255, 255, 0.1); /* Top-left shadow */
    color: black; /* Set the text color */
}

.second-page-title {
    font-size: 2em;
    color: black;
    text-align: center;
    margin-top: 280px;
}

a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the button's color */
}

.framed-container {
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    background-image: url('space\ muz\ merged.jpg');
    background-size: cover;
    background-position: center;
    width: 60%; /* Adjust the width of the frame */
    height: 60%; /* Adjust the height of the frame */
    border: 10px solid black; /* Add a border around the frame */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow for a 3D effect */
    padding: 20px; /* Add padding inside the frame */
    border-radius: 15px; /* Optional: Add rounded corners */
    margin-bottom: 20px; /* Add space below the frame */
    animation: float 3s ease-in-out infinite; /* Apply the floating animation */
}

@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Start and end at the original position */
    }
    50% {
        transform: translateY(-10px); /* Move up by 10px */
    }
}

.large-text {
    font-size: 3em;
    font-weight: bold;
}

.medium-text {
    font-size: 1.5em; /* Adjust the size as needed */
    font-weight: bold; /* Optional: Make it bold */
    font-family: 'Notable', sans-serif; /* Use the Notable font */
}

.button-container {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center the button horizontally */
    align-items: center; /* Center the button vertically within the container */
    width: 70%; /* Match the width of the frame */
    margin-top: 10px; /* Raise the button by 10px */
}

button {
    background: none;
    border: none;
    padding: 0;
    font-size: 35px;
    font-weight: bold;
    color: black;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

button:hover {
    color: rgb(44, 79, 167); /* Ensure the text turns blue */
    transform: scale(1.01); /* Slightly enlarge the button */
}

.transparent-image {
    position: absolute;
    top: -150px;
    left: 20%;
    transform: translateX(50%);
    width: 800px;
    height: auto;
    z-index: -1;    /* stays behind your heading */
  }

@media (max-width: 768px) {
    h1 {
        font-size: 1.5em; /* Reduce font size for smaller screens */
        transform: translateY(0); /* Reset any large translations */
        margin-top: 20px; /* Add some spacing */
    }

    .scrollable-page {
        height: 100vh; /* Ensure it fills the viewport height */
        display: flex; /* Retain Flexbox layout */
        flex-direction: column; /* Stack elements vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
        padding: 0; /* Remove extra padding */
    }

    .framed-container {
        width: 90%; /* Adjust the width to fit smaller screens */
        height: auto; /* Allow height to adjust automatically */
        padding: 10px; /* Reduce padding */
        min-height: 300px; /* Set a minimum height to ensure the image is visible */

    }

    .button-container {
        margin-top: 20px; /* Add spacing above the button */
    }

    button {
        font-size: 25px; /* Reduce button text size */
    }

    .transparent-image {
        width: 100%; /* Make the image responsive */
        max-width: 300px; /* Limit the maximum width */
        height: auto; /* Maintain aspect ratio */
        position: relative; /* Adjust positioning for smaller screens */
        top: 0; /* Reset vertical position */
        left: 0; /* Reset horizontal position */
        transform: none; /* Remove centering transform */
        margin: 20px auto; /* Center the image horizontally */
    }
}

#scrollToTop {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position on the screen */
    bottom: 20px; /* Distance from the bottom of the viewport */
    left: 50%; /* Position it horizontally in the center */
    transform: translateX(-50%); /* Center the button by adjusting its position */
    font-size: 35px; /* Set the font size */
    color: black; /* Text color */
    background: none; /* Remove background */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    text-decoration: none; /* Remove underline */
}

#scrollToTop:hover {
    color: rgb(44, 79, 167); /* Change text color on hover */
    transform: translateX(-50%) scale(1.05); /* Slightly enlarge on hover */
}