@layer pages {
/* PROJECT PAGE STYLING */

.project-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    margin-top: 100px; /* Offset from the top */
}

.project-content {
    width: 100%;
    max-width: 1400px; /* Main project page WIDTH controler */
    margin: 0 auto;
    text-align: center;
}

.project-tile-container {
    margin-bottom: 20px;
}

.project-title {
    margin: 0;
    margin-bottom: 10px;
    font-size: 25px;
}

.project-type {
    margin-top: 0px;
    text-transform: uppercase;
    color: #F16056;
    font-size: 18px;
}

.project-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    max-width: 1920px; /* Limit the maximum width to 1920px */
    height: 100%;
    margin: 0px; /* Center the video container */
    background: #000; /* Optional: Add a background color */
    overflow: hidden;
}

.project-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-video-legend {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1920px; /* Matches the max-width of the video container */
    margin-top: 10px;
}

.project-tags, .project-release-date {
    font-weight: 300;
    font-size: 10pt;
    margin-bottom: 20px;
}

.project-credits {
    font-weight: 300;   /* Set font weight */
    font-size: 10pt;    /* Set font size */
    text-align: left;   /* Align text to the left */
    margin-bottom: 40px; /* Add some spacing below the credits section */
}

.project-credits h3 {
    margin-bottom: 8px;
    border: 0px solid white;
}

.project-credits ul {
    padding-left: 0; /* Remove default padding */
    list-style-type: none; /* Remove default list styling */
    margin: 0px;
    border: 0px solid white;
}

.project-credits li {
    margin-bottom: 5px; /* Space between each credit */
}

.project-text-description {
    font-weight: 300;
    text-align: left;
    clear: both;
    width: 100%;
    max-width: 1920px; /* Matches the max-width of the video container */
    margin: 10px auto; /* Adds some spacing */
}

.additional-videos {
    width: 100%;
    margin-top: 40px; /* Add space between the text description and the additional videos */
    border: 0px solid white;
}

.additional-videos-wrapper{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    max-width: 1920px; /* Limit the maximum width to 1920px */
    height: 100%;
    margin: 0px; /* Center the video container */
    background: #000; /* Optional: Add a background color */
    overflow: hidden;
    margin-bottom: 40px;
}

.additional-videos-wrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}