html {
    font-family: Arial, sans-serif;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-width: 70vw;
    margin: 0 auto;
}
.container2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-width: 70vw;
    margin: 0 auto;
}
.back-arrow {
    align-self: flex-start;
}
.project_media {
    display: flex;
    justify-content: center;
    width: 100%;
}
.project_media video {
    display: flex;
    max-width: 75%;
    height: auto;
    margin: auto;
}
.image {
    flex: 1;
    padding-right: 2rem;
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally (optional, if needed) */
    align-items: center; /* Center vertically */
}
.content {
    flex: 2;
}
img {
    max-height: 80vh;
    border-radius: 8px;
}
a {
    color: #6386ba;
    text-decoration: underline;
}
.separator {
    color: #6386ba;
    margin: 0 5px;
}
.content {
    color: #313c4d;
}
body {
    height: 95vh;
}

@media (max-width: 768px) {
.container {
    flex-direction: column; /* Stack the elements vertically */
    align-items: center; /* Center elements for a clean layout */
}
.image {
    order: -1; /* Move the image above the content */
    padding-right: 0; /* Remove extra padding */
    margin-bottom: 1rem; /* Add spacing below the image */
}
.content {
    text-align: center; /* Optional: Center align text for better readability */
}
ul {
    width: fit-content; /* Adjust width to fit content */
    margin: 0 auto; /* Center the <ul> block */
    text-align: left; /* Ensure text inside the <ul> is left-aligned */
    padding: 0; /* Optional: Adjust padding if needed */
}
img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
}
}