/*
    Style Notes: 
    Main Colors: 
    #7e005e
    #981e7a
    Accent Colors
    #4aaad0
    #9deaec
    #27B50A
    Body Font Family:
    Avenir
    Optional Header Family:
    Great Sejagad
    Primary Header Family:
    Bebas Neue
*/

* {
    box-sizing: border-box;
}

@font-face {
    font-family: "Bebas Neue";
    src: url('../fonts/BebasNeue-Regular.ttf') format('ttf');
    src: url('../fonts/BebasNeue-Regular.woff') format('woff');
    src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
}

@font-face {
    font-family: "Great Sejagad";
    src: url('../fonts/GreatSejagad.ttf') format('ttf');
    src: url('../fonts/GreatSejagad.woff') format('woff');
    src: url('../fonts/Great\ Sejagad.woff2') format('woff2');
}

@font-face {
    font-family: "Avenir LT STD";
    src: url('../fonts/AvenirLTStd-Roman.otf') format('otf');
    src: url('../fonts/AvenirLTStd-Roman.woff') format('woff');
    src: url('../fonts/AvenirLTStd-Roman.woff2') format('woff2');
}

body {
    margin: 0px;
    font-family: "Avenir LT STD";
    background-color: black;
}

body #header,
body #footer {
    color: white;
}

body #main-content {
    background-color: white;
    color: black;
}

#hero {
    width: 100%;
    height: 500px;
    z-index: 50;
    background-color: #0f0f10;
    text-align: center;
    background-image: url(../images/firstaccessgif-final\(1\).gif);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

#header-logo {
    height: 50px;
    margin: 0;
    padding: 0;
}

#header h1 {
    margin: 0;
    padding: 0;
    font-family: "Bebas Neue";
    margin-top: 9px;
    letter-spacing: 2px;
}

a {
    text-decoration: none;
    color: white;
}

.flex-container-header {
    display: flex;
    justify-content: space-evenly;
    background: linear-gradient(to top, #7e005e, black 20%);
    align-items: center;
}

.flex-container-header a {
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 25px;
}

.flex-container-header a:hover {
    background-color: #7e005e;
    text-decoration: underline;
    transition: .45s;
}

.flex-container-header .dropdown-menu a:hover {
    background-color: #7e005e;
    background-image: linear-gradient(
        to top,
        rgb(0 0 0 / 20%),
        rgb(0 0 0 / 20%) 30%,
        transparent
    );
    transition: .45s;
}


.dropdown-container {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 0.25s,
        visibility 0.25s;
    z-index: 50;
}

.dropdown-container:last-child .dropdown-menu {
    right: 0px;
}

.dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition: .45s;
}

.dropdown-menu a {
    background-color: #7e005e;
    width: 100%;
    min-width: 200px;
}

#showbutton,
.styled-submitbutton,
.styled-footer,
#showbutton-hero {
    border: 0;
    line-height: 1.75;
    letter-spacing: 2px;
    padding: 0px 25px;
    padding-top: 2px;
    font-size: 1.5em;
    font-family: "Bebas Neue";
    text-align: center;
    color: white;
    background-color: #7e005e;
    background-image: linear-gradient(
        to top,
        rgb(0 0 0 / 20%),
        rgb(0 0 0 / 20%) 30%,
        transparent
    );
}

.styled-submitbutton {
    margin-top: 5px;
}

.styled-footer {
    margin-bottom: 35px;
    margin-right: 15px;
}

.styled-submitbutton:hover,
.styled-footer:hover,
#showbutton:hover,
#showbutton-hero:hover {
    background-color: #4aaad0;
    transition: .45s;
}

.styled-submitbutton:active,
.styled-footer:active {
    box-shadow:
        inset -2px -2px 3px #9de9ec53,
        inset 2px 2px 3px rgb(0 0 0 / 30%);
}

#showcountdown-timer,
#f-showcountdown-timer {
    font-family: "Bebas Neue";
    font-size: 1.75em;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-top: 5px;
}

#showcountdown-timer span,
#f-showcountdown-timer span {
    display: inline-block;
    padding: 0 10px;
    padding-top: 2px;
    line-height: 1.5;
    letter-spacing: 2px;
    background-color: #7e005e;
    background-image: linear-gradient(
        to top,
        rgb(0 0 0 / 20%),
        rgb(0 0 0 / 20%) 30%,
        transparent
    );
}

#herocountdown-timer {
    font-family: "Bebas Neue";
    font-size: 3em;
    text-align: center;
    margin: 0;
    padding: 325px 0 0;
    color: #0f0f10;
}

#herocountdown-timer {
    opacity: 0;
    animation: fadeIn 3s ease forwards;
    animation-delay: 3s;
}

@keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

#herocountdown-timer span {
    display: inline-block;
    padding: 0 10px;
    padding-top: 2px;
    line-height: 1.5;
    letter-spacing: 2px;
    background-color: #e17415ef;
    background-image: linear-gradient(
        to top,
        rgb(0 0 0 / 20%),
        rgb(0 0 0 / 20%) 30%,
        transparent
    );
}

#herocountdown-timer span#dot {
    color: white;
    background-color: transparent;
    background-image: none;
}

#f-showcountdown-timer span {
    margin-bottom: 35px;
    margin-top: 45px;
}

.submit-closed {
    font-family: "Avenir LT STD";
    font-style: italic;
    font-weight: 100;
}

#main-banner-image {
    height: 350px;
    margin: 0;
    padding: 0;
}

.flex-container-banner {
    display: flex;
    margin: 0;
    padding: 0;
    background-image: 
        linear-gradient(#4aaad0d3, #4aaad0c5), 
        url(../images/temp-banner-2.jpg);
    background-position: 60% 50%;
    height: 350px;
}

.column-banner-img {
    width: 60%;
    margin: 0;
    padding: 0;
}

.column-banner-text {
    width: 40%;
    margin: 0;
    margin-left: 30px;
    padding: 0;
    align-content: center;
    font-family: "Bebas Neue";
}

#slogan,
.address,
.phone,
.cr {
    font-size: 10px;
    font-weight: 100;
    letter-spacing: 2px;
    color: white;
    background-color: black;
}

#join {
    letter-spacing: 4.5px;
    font-size: 60px;
    margin-bottom: 20px;
    margin-top: 15px;
    font-family: "Bebas Neue";
}

.sitemap-h3,
#logos {
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
}

#footer-logo {
    height: 75px;
    margin: 0;
    padding: 0;
}

.flex-container-footer {
    display: flex;
    justify-content: space-evenly;
    background-color: black;
    height: 205px;
    padding-top: 25px;
    align-items: center;
}

.flex-container-site-map {
    display: flex;
    align-items: flex-start;
    gap: 75px;
    margin: 0;
    padding: 0;
}

.footer-li {
    list-style: none;
    margin-bottom: 10px;
    font-family: "Avenir LT STD";
    font-size: 12px;
    width: 125px;
    color: white;
    background-color: black;
}

.footer-ul {
    margin-left: 0;
    margin-top: 10px;
    padding: 0;
    color: white;
    background-color: black;
}

.fa-brands {
    margin: 7px;
}

#slogan {
    letter-spacing: 2px;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    font-style: normal;
    font-size: 12px;
    font-family: "Bebas Neue";
}

.flex-container-info {
    display: flex;
    gap: 25px;
    margin-top: 15px;
}

.cr {
    font-family: "Avenir LT STD";
    font-size: 9px;
    font-weight: 100;
    letter-spacing: 0.5px;
    padding-bottom: 15px;
}

.column-logo {
    text-align: center;    
    align-content: center;
}

.column-buttons {
    text-align: center;
    align-content: center;
}

.column-site-map {
    align-content: center;
}

.footer-ul a:hover,
.sitemap-h3 a:hover {
    text-decoration: underline;
}

#logos a:hover {
    color: #9deaec;
}

.flex-container-footer h3 {
    font-family: "Bebas Neue";
}

#mobile-cr-info {
    display: none;
}

.flex-container-guide {
    display: flex;
    justify-content: space-evenly;
}

.column-guide {
    max-width: 300px;
}

#main-content p,
#main-content h1 {
    margin: 0;
}

#main-content h1 {
    font-family: "Bebas Neue";
    text-align: center;
    font-size: 50px;
    padding: 50px 0 0;
    letter-spacing: 3px;
}

#main-content #entrants {
    font-family: "Great Sejagad";
    text-align: center;
    font-size: 50px;
    font-weight: normal;
    color: #7e005e;
    margin: 75px;
}

#main-content #content-restrict h2,
#main-content #file-req h2,
#main-content #asset-accred h2,
#main-content #prompts h2,
#main-content #enter h2 {
    text-align: center;
    font-family: "Bebas Neue";
    font-size: 35px;
    letter-spacing: 2px;
    margin: 100px 0 15px;
}

#main-content #content-restrict h3,
#main-content #asset-accred h3,
#main-content #prompts #img-prompts h3,
#main-content #prompts #aud-prompts h3,
#main-content #prompts #vid-prompts h3 {
    text-align: center;
    color: #7e005e;
    font-size: 22px;
}

#main-content #content-restrict .flex-container-guide {
    align-items: center;
    justify-content: center;
    gap: 0px;
}

#main-content #content-restrict .flex-container-guide #cr-l, 
#main-content #content-restrict .flex-container-guide #cr-r {
    flex: 1;
    max-width: 250px;
    font-size: 16px;
    padding: 25px 15px 0;
}

#main-content #content-restrict .flex-container-guide #cr-m {
    flex: 2;
    max-width: 450px;
}

#main-content #content-restrict .flex-container-guide #cr-m p {
    text-align: center;
    font-size: 20px;
}

#main-content #content-restrict .flex-container-guide #cr-m ul {
    margin: 10px 0; 
    padding: 0;
}

#main-content #content-restrict .flex-container-guide #cr-m li {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.75;
}

#main-content #content-restrict #cr-list.flex-container-guide {
    gap: 75px;
}

#main-content #file-req h3,
#main-content #prompts h4 {
    text-align: center;
    color: #7e005e;
    font-size: 22px;
    font-family: "Bebas Neue";
    letter-spacing: 1.5px;
    margin: 15px;
}

#main-content #prompts h4 {
    font-size: 20px;
    margin: 0;
}

#main-content #file-req li {
    line-height: 1.5;
}

#main-content #file-req li:last-child {
    margin-bottom: 15px;
}

#main-content #asset-accred p {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
}

#main-content #asset-accred p span {
    font-weight: bold;
    color: #7e005e;
}

#main-content #prompts h2 {
    margin-top: 5px;
}

#main-content #prompts #inspire {
    font-family: "Great Sejagad";
    color: #7e005e;
    font-weight: normal;
    text-align: center;
    font-size: 30px;
    margin: 100px 0 0;
}

#main-content #review {
    font-family: "Bebas Neue";
    font-size: 50px;
    padding: 200px 0 0;
    margin: 0;
}

#main-content #view-date {
    text-align: center;
    font-size: 30px;
    color: #7e005e;
    padding: 15px 0 200px;
    margin: 0;
}

#main-content #enter p {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
}

#main-content #enter .flex-container-guide {
    margin-top: 25px;
    justify-content: center;
    gap: 75px;
}

#main-content #enter .flex-container-guide #enter-online {
    max-width: 375px;
}

#main-content #enter .flex-container-guide #enter-direct {
    max-width: 450px;
}

#main-content #enter .flex-container-guide h3,
#main-content #enter #remember h3 {
    font-family: "Bebas Neue";
    color: #7e005e;
    font-size: 25px;
    letter-spacing: 2px;
    text-align: center;
    margin: 10px 0;
}

#main-content #enter .flex-container-guide p, 
#main-content #enter #remember p {
    text-align: start;
    font-size: 18px;
    margin-bottom: 15px;
}

#main-content #enter #remember p {
    max-width: 550px;
    text-align: center;
}

#main-content #enter #remember p span {
    font-weight: bold;
}

#main-content #enter .flex-container-guide #enter-online #note {
    font-size: 16px;
}

#main-content #enter .flex-container-guide p span {
    font-weight: bold;
    color: #7e005e;
}

#main-content #enter .flex-container-guide h4 {
    font-family: "Avenir LT STD";
    letter-spacing: normal;
    color: black;
    font-size: 18px;
}

#main-content #enter #enter-member {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

#main-content #enter #enter-member .member-column {
    width: 250px;
}

#main-content #enter #enter-member .member-column p {
    font-size: 16px;
}

#main-content #enter #enter-member .member-column p span {
    font-size: 14px;
}

#main-content #prompts #img-prompts p,
#main-content #prompts #aud-prompts p,
#main-content #prompts #vid-prompts p {
    font-size: 18px;
    max-width: 1000px;    
    text-align: center;
    margin: 0 auto;
}

#main-content #prompts #img-prompts p.for-your,
#main-content #prompts #aud-prompts p.for-your,
#main-content #prompts #vid-prompts p.for-your {
    margin: 0 auto 30px;
}

#main-content #prompts #img-prompts .column-guide p,
#main-content #prompts #aud-prompts .column-guide p,
#main-content #prompts #vid-prompts .column-guide p {
    font-size: 16px;
    text-align: start;
    margin: 0 0 15px;
}

#main-content #prompts {
    padding-bottom: 50px;
}

#main-content hr {
    max-width: 1000px;
    margin: 100px auto;
    border: 1px solid #7e005e;
}

#main-content #welcome {
    font-family: "Great Sejagad";
    color: #7e005e;
    font-weight: normal;
    font-size: 55px;
    margin-top: 25px;
}

#main-content #join-us {
    font-family: "Avenir LT STD";
    font-size: 35px;
    letter-spacing: 2px;
    text-align: center;
    font-weight: normal;
}


#main-content #sub-open {
    font-family: "Bebas Neue";
    font-Size: 50px;
    color: #7e005e;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    padding: 0px 0 15px;
}

#main-content #sub-deadline {
    text-align: center;
    font-weight: normal;
    font-size: 25px;
    margin: 0;
}

#main-content .flex-container-home {
    display: flex;
    justify-content: center;
    padding: 25px 0 75px;
    gap: 150px;
}

#main-content .column-home {
    text-align: center;
}

#main-content .column-home h4 {
    font-size: 25px;
    letter-spacing: 2px;
    color: black;
    margin-bottom: 5px;
}

#main-content #view-guide.column-home h4 {
    margin-bottom: 7px;
}

#sub-ready .styled-submitbutton,
#view-guide .styled-guidebutton {
    border: 0;
    line-height: 1.75;
    letter-spacing: 2px;
    padding: 0px 25px;
    padding-top: 2px;
    font-size: 2em;
    font-family: "Bebas Neue";
    text-align: center;
    color: white;
    background-color: #7e005e;
    background-image: linear-gradient(
        to top,
        rgb(0 0 0 / 20%),
        rgb(0 0 0 / 20%) 30%,
        transparent
    );
    margin: 0;
}

#view-guide .styled-guidebutton {
    padding: 7px 25px;
}

#sub-ready .styled-submitbutton:hover,
#view-guide .styled-guidebutton:hover  {
    background-color: #4aaad0;
    transition: .45s;
}

#sub-ready .styled-submitbutton:active,
.styled-guidebutton:active  {
    box-shadow:
        inset -2px -2px 3px #9de9ec53,
        inset 2px 2px 3px rgb(0 0 0 / 30%);
}

#developers {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#developers p {
    width: 350px;
    text-align: center;
    margin: 10px 0 0px;
}

#developers p span {
    font-weight: bold;
}

#developers p#web-cred {
    order: 2;
}

#developers p#hero-cred {
    order: 1;
}

#developers p#access-cred {
    order: 3;
}

#welcome span {
    font-size: 80px;
    line-height: 1.75;
}

#sub-deadline.closed {
    padding-bottom: 75px;
}

#main-content.gallery #thanks {
    font-family: "Great Sejagad";
    font-size: 10vw;
    font-weight: normal;
    margin: 0;
    padding: 40px 0 75px;
}

#main-content.gallery hr {
    width: 85%;
}

/*Gallery*/
#main-content #submission-gallery {
    padding-bottom: 75px;
}

#main-content #gallery-head {
    font-size: 10vw;
}

#main-content.gallery {
    padding-top: 50px;
}

#main-content.gallery h2 {
    text-align: center;
    margin-bottom: 50px;
}

/*Submission*/
#main-content #submission-gallery .submission {
    display: flex;
    max-width: 85%;
    justify-content: space-between;
    padding: 5%;
    margin: 0 auto;
    border: 15px ridge #7e005e;
    box-shadow: 
        inset 0 0 25px 5px #9de9ec32,
        0 0 50px 5px rgb(75, 75, 75);
        background-color: #000000ed;
}

#main-content #submission-gallery .submission .sub-img-container {
    width: 45%;
    height: 450px;
    object-fit: cover;
    border: 15px ridge #7e005e;
    box-shadow: 0 0 15px 7.5px #ecc09d1a;
    transition: .5s ease-in-out;
}

#main-content #submission-gallery .submission .sub-img-container:hover {
    cursor: pointer;
    transform: scale(105%);
    box-shadow: 0 0 15px 7.5px #ecc09d33;
}

#main-content #submission-gallery .submission .sub-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#main-content #submission-gallery #lightboxContainer img#lightbox {
    object-fit: contain;
}

#main-content #submission-gallery .submission .sub-info {
    width: 45%;
}

#main-content #submission-gallery .submission .sub-info h2 {
    font-family: "Great Sejagad";
    font-weight: normal;
    font-size: 4vw;
    color: #7e005e;
    margin: 0;
}

#main-content #submission-gallery .submission .sub-info h3 {
    font-family: "Bebas Neue";
    font-size: 1.5vw;
    text-align: center;
    margin: 0;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.888);
}

#main-content #submission-gallery .submission .sub-info h3 span{
    font-weight: normal;
    font-size: 3vw;
    letter-spacing: 1px;
}

#main-content #submission-gallery .submission .sub-info .student-info {
    display: flex;
    justify-content: space-between;
}

#main-content #submission-gallery .submission .sub-info .student-info h5 {
    font-size: 1.1vw;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.888);
}

#main-content #submission-gallery .submission .sub-info .student-info h5.course {
    font-weight: bolder;
}

#main-content #submission-gallery .submission .sub-info h4 {
    font-family: "Bebas Neue";
    font-size: 2vw;
    margin: 30px 0 5px;
    letter-spacing: 2px;
    padding: 0;
}

#main-content #submission-gallery .submission .sub-info p {
    font-size: 1.4vw;
    margin: 0;
    color: rgba(255, 255, 255, 0.888);
}

#main-content #submission-gallery .submission .sub-info p.p-too-long {
    font-size: 1.25vw;
    letter-spacing: -.5px;
}

#main-content #submission-gallery .submission.black-heart {
    align-items: center;
}

/*Flipped Submission*/
#main-content #submission-gallery .submission.flipped .sub-img-container {
    order: 2;
}

#main-content #submission-gallery .submission.flipped .sub-info {
    order: 1;
}

/*Additional Image Submission*/
#main-content #submission-gallery .submission.with-additional-images {
    display: block;
    padding-bottom: 40px;
}

#main-content #submission-gallery .submission.with-additional-images .submission {
    display: flex;
    justify-content: space-between;
    border: none;
    box-shadow: none;
    background-color: transparent;
    margin: 0px auto;
    padding: 0;
    max-width:100%;
}

#main-content #submission-gallery .submission.with-additional-images h2.second-header {
    text-align: center;
    font-family: "Bebas Neue";
    color: #7e005e;
    letter-spacing: 2px;
    font-size: 3vw;
    margin: 50px 0 25px;
}

#main-content #submission-gallery .submission .additional-images {
    display: flex;
    justify-content: space-evenly;
    border: none;
    box-shadow: none;
    background-color: transparent;
    margin: 0px auto;
    padding: 0;
}

#main-content #submission-gallery .submission .additional-images .sub-img-container {
    width: 20%;
    height: 5%;
    object-fit: cover;
    border: 10px ridge #7e005e;
    box-shadow: 0 0 15px 7.5px #ecc09d1a;
    transition: .5s ease-in-out;
}

#main-content #submission-gallery .submission .additional-images .sub-img-container.marsh {
    height: 300px;
    width: 24%;
}

#main-content #submission-gallery .submission .sub-img-container.marsh {
    height: 575px;
}

/*Landscape Submission*/
#main-content #submission-gallery .submission.landscape {
    display: block;
}

#main-content #submission-gallery .submission.landscape .sub-img-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
}

#main-content #submission-gallery .submission.landscape .sub-img-container.landscape.multi {
    margin-bottom: 50px;
}

#main-content #submission-gallery .submission .sub-info.header {
    width: 100%;
    margin: 0 auto 35px;
    text-align: center;
}

#main-content #submission-gallery .submission .sub-info.header .student-info .student-info {
    display: block;
    text-align: start;
}

#main-content #submission-gallery .submission .sub-info.container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}

#main-content #submission-gallery .submission .sub-info.container .student-info {
    display: block;
    width: 45%;
    margin-top: 25px;
}

#main-content #submission-gallery .submission .sub-info.container .student-info.longer {
    width: 55%;
}

#main-content #submission-gallery .submission .sub-info.container .student-info.shorter {
    width: 35%;
}

#main-content #submission-gallery .submission.landscape .sub-info.container .student-info.pic-instead-p h4{
    text-align: center;
}

#main-content #submission-gallery .submission .sub-img-container.about-img {
    width: 100%;
    height: 500px;
    margin-top: 20px;
}

/*Square Submission*/
#main-content #submission-gallery .submission.square {
    align-items: center;
}

#main-content #submission-gallery .submission.square .sub-img-container {
    width: 55%;
    height: 55%;
    margin-top: 15px;
}

#main-content #submission-gallery .submission.square .sub-info {
    width: 35%;
}

#main-content #submission-gallery .submission.square.extra-text {
    align-items: center;
    display: block;
}

#main-content #submission-gallery .submission.square.extra-text .sub-info {
    width: 100%;
    margin: 0 auto;
}

#main-content #submission-gallery .submission.square.extra-text .flex-container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
}

#main-content #submission-gallery .submission.square.extra-text .flex-container .sub-info {
    width: 40%;
    margin: 0;
    padding: 0;
}

#main-content #submission-gallery .submission.square.extra-text .sub-info .p-flex-container {
    display: flex;
    justify-content: space-between;
}

#main-content #submission-gallery .submission.square.extra-text .sub-info .p-flex-container .p-container.large {
    width: 57%;
}

#main-content #submission-gallery .submission.square.extra-text .sub-info .p-flex-container .p-container.short {
    width: 35%;
}

#main-content #submission-gallery .submission.square.extra-text .sub-info .p-flex-container .p-container p.margin {
    margin-bottom: 15px;
}

/*Audio Submission*/
#main-content #submission-gallery .submission.audio {
    display: block;
}

#main-content #submission-gallery .submission.audio  .audio-sub-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#main-content #submission-gallery .submission.audio  .audio-sub-container .sub-aud-container {
    border: 6.5px ridge #7e005e;
    box-shadow: 0 0 15px 7.5px #ecc09d1a;
    border-radius: 100px;
    transition: .5s ease-in-out;
    width: 45%;
}

#main-content #submission-gallery .submission.audio  .audio-sub-container .sub-aud-container:hover {
    cursor: pointer;
    transform: scale(105%);
    box-shadow: 0 0 15px 7.5px #ecc09d33;
}

#main-content #submission-gallery .submission.audio  .audio-sub-container .sub-aud-container audio {
    display: block;
    width: 100%;
}

#main-content #submission-gallery .submission.audio  .sub-info.audio-about {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#main-content #submission-gallery .submission.audio  .sub-info.audio-about .about-container {
    width: 45%;
}

/*Video Submission*/
#main-content #submission-gallery .submission.video.landscape .sub-vid-container {
    width: 100%;
    margin: 0 auto;
    object-fit: cover;
    border: 15px ridge #7e005e;
    box-shadow: 0 0 15px 7.5px #ecc09d1a;
    transition: .5s ease-in-out;
}

#main-content #submission-gallery .submission.video.landscape .sub-vid-container video {
    width: 100%;
    display: block;
}

body #main-content .showcase-vid-container {
    width: 100vw;
    background-color: black;
    text-align: center;
    
}

body #main-content .showcase-vid-container video {
    width: 80%;
}

@media screen and (max-width: 768px) {
    .flex-container-header {
        flex-wrap: wrap;  
        padding: 0 0 35px;      
    }

    #header-logo-container {
        order: 1;
    }

    #gallery-drop {
        order: 3;
    }

    #header-count {
        order: 2;
    }

    #guideline-drop {
        order: 5;
    }

    #sub-button {
        order: 4;
    }

    #gallery-drop h1,
    #guideline-drop h1,
    #gallery-drop a,
    #guideline-drop a {
        font-size: 15px;
        padding: 2px 7px 5px;
        text-align: center;
        vertical-align: middle;
    }

    #gallery-drop sub,
    #guideline-drop sub {
        display: none;
    }

    #gallery-drop .dropdown-menu a,
    #guideline-drop .dropdown-menu a{
        display: none;
    }

    #header-logo {
        height: 40px;
    }

    #showcountdown-timer,
    #f-showcountdown-timer {
        font-size: 20px;
    }
    
    #showbutton,
    .styled-submitbutton,
    .styled-footer {
        font-size: 20px;
        padding: 2px 15px 0;
    }

    #flex-container a {
        padding: 0;
    }

    #showbutton {
        margin: auto 25px auto 50px;
    }

    #submittext {
        padding: 0;
        text-align: center;
        font-size: 12px;
        width: 60px;
    }

    #main-banner-image {
        width: 100%;
        height: auto;
    }

    .flex-container-banner {
        flex-direction: column;
        height: auto;
        background-position: 20% 25%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .column-banner-img,
    .column-banner-text {
        width: 100%;
    }

    .column-banner-text {
        margin: 0;
        padding-left: 30px;
    }

    #join {
        font-size: 50px;
    }

    .flex-container-footer {
        flex-wrap: wrap;
        margin-top: 15px;
    }

    #footer-logo {
        height: 50px;
    }

    #slogan {
        font-size: 10px;
    }

    #logos {
        font-size: 16px;
    }

    .flex-container-site-map {
        order: 3;
        padding-top: 40px;
        padding-left: 25px;
        gap: 100px;
    }

    .column-logo {
        order: 1,
    }

    .column-buttons {
        order: 2;
        justify-content: center;
    }

    #mobile-cr-info {
        display: block;
        order: 4;
        text-align: center;
    }

    #developers {
        flex-direction: column;
        margin-top: 235px;
    }

    #developers p {
        margin-bottom: 5px;
        font-size: 8px;
        width: 310px;
    }

    #developers #web-cred {
        order: 1;
    }

    #developers #hero-cred {
        order: 2;
    }

    .column-logo .flex-container-info,
    .column-logo .cr {
        display: none;
    }

    #f-showcountdown-timer span {
        margin-bottom: 20px;
        margin-top: 0px;
    }

    .flex-container-footer .styled-footer {
        margin-bottom: 0;
    }

    #mobile-cr-info .flex-container-info {
        flex-direction: column;
        gap: 0;
    }

    #main-content {
        width: 100%;
    }

    #main-content #review {
        padding: 50px 15px 0;        
    }

    #main-content #view-date {
        padding: 15px 15px 50px;
    }

    #main-content h1 {
        padding: 50px 0 0;
        font-size: 45px;
    }
    
    #main-content #entrants {
        margin: 50px 25px 0;
        font-size: 40px;
    }

    #main-content #enter h2,
    #main-content #content-restrict h2,
    #main-content #file-req h2,
    #main-content #asset-accred h2 {
        margin: 50px 0 15px;
        font-size: 30px;
    }

    #main-content #enter p {
        font-size: 15px;
        padding: 0 15px;
        margin-bottom: 15px;
    }

    #main-content #enter .flex-container-guide {
        flex-direction: column;
        gap: 0;
        margin-top: 0;
    }

    #main-content #enter .flex-container-guide #enter-online,
    #main-content #enter .flex-container-guide #enter-direct,
    #main-content #enter .flex-container-guide #enter-online .column-guide,
    #main-content #enter .flex-container-guide #enter-direct .column-guide {
        max-width: 100%;
        padding: 0 15px;
    }

    #main-content #enter .flex-container-guide #enter-online p,
    #main-content #enter .flex-container-guide #enter-direct p {
        font-size: 15px;
        max-width: 100%;
    }

    #main-content #enter .flex-container-guide #enter-online #note {
        font-size: 14px;
    }

    #main-content #enter .flex-container-guide #enter-direct #enter-member {
        flex-direction: column;
        gap: 0;
    }

    #main-content #enter #enter-member .member-column {
        width: 100%;
    }

    #enter .flex-container-guide #enter-direct p {
        max-width: 100%;
        font-size: 14px;
        padding: 0 25px;
        text-align: center;
    }

    #enter .flex-container-guide #enter-direct p br {
        display: none;
    }

    #enter .flex-container-guide #enter-direct h4 {
        font-size: 16px;
        text-align: center;
    }

    #main-content #enter .flex-container-guide h3, 
    #main-content #enter #remember h3 {
        font-size: 22px;
    }

    #main-content #enter #remember p,
    #main-content #asset-accred p {
        font-size: 15px;
    }

    #main-content hr {
        max-width: 90%;
        margin: 50px auto;
    }

    #main-content #content-restrict h3,
    #main-content #asset-accred h3,
    #main-content #prompts #img-prompts h3,
    #main-content #prompts #aud-prompts h3,
    #main-content #prompts #vid-prompts h3  {
        font-size: 20px;
    }

    #main-content #content-restrict .flex-container-guide {
        flex-direction: column;
        gap: 0;
    }

    #main-content #content-restrict .flex-container-guide #cr-l {
        order: 2;
        max-width: 100%;
        padding: 15px 15px 0;
        text-align: center;
        font-size: 15px;
    }

    #main-content #content-restrict .flex-container-guide #cr-m {
        order: 1;
        max-width: 100%;
        padding: 0px 15px;        
        text-align: center;
    }
    
    #main-content #content-restrict .flex-container-guide #cr-m li {
        font-size: 16px;
    }

    #main-content #content-restrict .flex-container-guide #cr-m p {
        font-size: 17px;
    }

    #main-content #content-restrict .flex-container-guide #cr-r {
        order:3;
        max-width: 100%;
        padding: 15px 15px 0;        
        text-align: center;
        font-size: 15px;
    }

    #main-content #content-restrict #cr-list.flex-container-guide {
        gap: 75px;
        margin: 0;
        flex-direction: row;
    }

    #main-content #content-restrict #cr-list.flex-container-guide ul {
        margin: 0;
        text-align: start;
    }

    #main-content #content-restrict .flex-container-guide #cr-m p {
        margin-bottom: 10px;
    }

    #main-content #file-req .flex-container-guide {
        flex-direction: column;
        gap: 0;
        justify-content: center;
        
    }

    #main-content #file-req .flex-container-guide .column-guide {
        max-width: 75%;
        margin: 0 auto;
    }

    #main-content #file-req .flex-container-guide .column-guide ul {
        padding: 0 0 0 18px;
        font-size: 15px;
    }

    #main-content #file-req .flex-container-guide .column-guide ul ul {
        max-width: 35%;
        margin: 0 auto;
    }

    #main-content #asset-accred p {
        padding: 0 15px;
    }

    #main-content #prompts #inspire {
        margin: 50px 0 0;
        font-size: 25px;
    }

    #main-content #prompts h2 {
        font-size: 30px;
        margin: 5px 0 15px;
    }
    
    #main-content #prompts #img-prompts h3 {
    margin: 0 0 10px;
    }

    #main-content #prompts #aud-prompts h3,
    #main-content #prompts #vid-prompts h3 {
        margin: 20px 0 10px;
    }

    #main-content #prompts #img-prompts p,
    #main-content #prompts #aud-prompts p,
    #main-content #prompts #vid-prompts p  {
        font-size: 16px;
        padding: 0 20px;
        margin: 0;
    }

    #main-content #prompts #img-prompts h4,
    #main-content #prompts #aud-prompts h4,
    #main-content #prompts #vid-prompts h4  {
        margin-top: 20px;
        padding: 0;
    }

    #main-content #prompts .flex-container-guide {
        flex-direction: column;
    }

    #main-content #prompts .flex-container-guide .column-guide {
        max-width: 100%;
        margin: 0;
    }

    #main-content #prompts #img-prompts .column-guide p,
    #main-content #prompts #aud-prompts .column-guide p,
    #main-content #prompts #vid-prompts .column-guide p {
        font-size: 14px;
        margin: 10px 0 0;
    }

    #main-content #prompts #img-prompts p.for-your,
    #main-content #prompts #aud-prompts p.for-your,
    #main-content #prompts #vid-prompts p.for-your {
        padding-top: 5px;
    }

    #main-content #welcome {
        font-size: 35px;
        padding: 25px 25px 0;
    }

    #main-content #join-us {
        font-size: 24px;
        padding: 15px 15px 0;
    }

    #main-content #sub-open {
        font-size: 50px;
        padding: 0 15px 10px;
    }

    #main-content #sub-deadline {
        padding: 0 15px;
        font-size: 24px;
    }

    #main-content .flex-container-home {
        flex-direction: column;
        gap: 50px;
    }

    #main-content .flex-container-home .column-guide {
        padding: 0;
    }

    #main-content #hero {
        height: 272px;
    }

    #herocountdown-timer {
    font-size: 1.5em;
    padding: 185px 0 0;
    }

    #main-content #welcome span {
        font-size: 50px;
        line-height: 1.25;
    }
}

@media screen and (max-width: 425px) {
    /*Gallery*/
    #main-content #submission-gallery {
        padding-bottom: 35px;
    }

    #main-content #gallery-head {
        font-size: 10vw;
    }

    #main-content.gallery {
        padding-top: 0;
    }

    #main-content.gallery h2 {
        text-align: center;
        font-size: 12px;
    }

    #main-content #submission-gallery {
        margin-top: 25px;
    }

    /*Submission*/
    #main-content #submission-gallery .submission {
        max-width: 100%;
        border-right: none;
        border-left: none;
        border-top: 7.5px ridge #7e005e;
        border-bottom: 7.5px ridge #7e005e;
        align-items: center;
    }

    #main-content #submission-gallery .submission .sub-img-container {
        height: 200px;
        border: 7.5px ridge #7e005e;
    }

    #main-content #submission-gallery .submission .sub-info h2 {
        font-size: 20px;
    }

    #main-content #submission-gallery .submission .sub-info h3 {
        font-size: 6px;
        font-weight: normal;
        text-align: end;
    }

    #main-content #submission-gallery .submission .sub-info h3 span{
        font-size: 10px;
    }

    #main-content #submission-gallery .submission .sub-info .student-info {
        flex-direction: column-reverse;
    }

    #main-content #submission-gallery .submission .sub-info .student-info h5 {
        font-size: 7px;
        margin: 5px 0 0;
        padding-bottom: 0;
    }

    #main-content #submission-gallery .submission .sub-info h4 {
        font-size: 11px;
        margin: 10px 0 2.5px;
    }

    #main-content #submission-gallery .submission .sub-info p {
        font-size: 7px;
    }

    #main-content #submission-gallery .submission .sub-info p.p-too-long {
        font-size: 7px;
        letter-spacing: 0px;
    }

    /*Additional Image Submission*/
    #main-content #submission-gallery .submission.with-additional-images {
        display: block;
        padding-bottom: 5%;
    }

    #main-content #submission-gallery .submission.with-additional-images h2.second-header {
        letter-spacing: 2px;
        font-size: 15px;
        margin: 25px 0 10px;
    }

    #main-content #submission-gallery .submission .additional-images .sub-img-container {
        border: 6px ridge #7e005e;
    }

    #main-content #submission-gallery .submission .additional-images .sub-img-container.marsh {
        height: 125px;
        width: 24%;
    }

    #main-content #submission-gallery .submission .sub-img-container.marsh {
        height: 225px;
    }

    /*Landscape Submission*/
    #main-content #submission-gallery .submission.landscape .sub-img-container {
        height: 200px;
    }

    #main-content #submission-gallery .submission.landscape .sub-img-container.landscape.multi {
        margin-bottom: 25px;
    }

    #main-content #submission-gallery .submission .sub-info.header {
        margin: 0 auto 15px;
    }

    #main-content #submission-gallery .submission .sub-info.container .student-info {
        margin-top: 10px;
    }

    #main-content #submission-gallery .submission .sub-img-container.about-img {
        height: 250px;
        margin-top: 5px;
    }

    /*Square Submission*/
    #main-content #submission-gallery .submission.square .sub-img-container {
        margin-top: 10px;
    }

    #main-content #submission-gallery .submission.square.extra-text .sub-info .p-flex-container .p-container p.margin {
        margin-bottom: 7.5px;
    }

    /*Audio Submission*/
    #main-content #submission-gallery .submission.audio  .audio-sub-container .sub-aud-container {
        border: 4px ridge #7e005e;
    }

    /*Video Submission*/
    #main-content #submission-gallery .submission.video.landscape .sub-vid-container {
        border: 7.5px ridge #7e005e;
    }
}