/* CSS for everything */

:root {
    --color-1: #0acf83;
    --color-2: #2e87ad;
    --color-3: #FFFFFF;
    --color-4: #CCCCCC;
    --color-5: #565554;
}


a:link {
    color: var(--color-1)
}

a:visited {
    color: var(--color-2)
}

a:hover {
    cursor: pointer;
}


/* --------------------------------- Helpers --------------------------------- */
.notifications-alert {
    position: fixed;
    background-color: rgb(10, 207, 131, 0.9);
    padding: 0.5em 1em 0.5em 1.5em;
    border-radius: 1em;
    max-width: 23.44em;
    right: 1em;
    bottom: 1em;
    z-index: 20000;
    display: none;
    box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.3);
}

.notifications-alert a {
    text-decoration: none;
}

.notifications-alert p {
    color: #fff;
    font-size: 1.1em;
    display: flex;
    align-items: center;
}

.notifications-alert p:first-child::before {
    content: '';
    height: 0.5em;
    width: 0.5em;
    background-color: #FE4C4C;
    display: block;
    border-radius: 3.13em;
    position: relative;
    right: 0.63em;
    bottom: 0.63em;
    border: 0.05em solid white;
    /* box-shadow: 0 0 1em 0 rgba(255, 255, 255, 1); */
}

.hide {
    display: none !important;
}

.center {
    text-align: center;
}

.sorting {
    opacity: 0.5;
}

div.full-body {
    height: calc(100vh - 28.75em);
}

p.error-msg.step-error {
    margin-left: auto;
    margin-right: auto;
}

div.alert {
    width: calc(100% - 5em);
    top: 1em;
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 1em;
    display: flex;
    align-items: center;
    padding: 1em 1.5em; 
    margin: 1em;
    transition: all 0.2s ease-in-out;
    z-index: 10000;
}

div.alert p {
    font-size: 0.88em;
    color: #fff;
    margin: 0;
    flex-grow: 1;
    margin-right: 1em;
}

div.alert img {
    max-width: 100%;
    height: 1.5em;
    margin-right: 1em;
}

div.alert button {
    background-color: var(--color-2);
    color: var(--color-3);
    border: 0.13em solid var(--color-2);
    padding: 0.5rem;
    border-radius: 0.63em;
}

button {
    cursor: pointer;
}

div.modal-overlay {
    background: rgba(0,0,0,0.25);
    z-index: 10250;
    width: 100vw;
    height: 100vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

div.modal {
    position: fixed;
    top: 6.25em;
    left: 50%;
    transform: translateX(-50%);
    width: 31.25em;
    z-index: 10500;
    background: #fff;
    border-radius: 1em;
    padding: 2em;
    text-align: center;
}

div.modal div.modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.modal button.modal-close.close-icon {
    float: right;
    color: white;
    background-color: rgba(210,210,210);
    border: 0;
    border-radius: 50%;
    text-align: center;
    padding: 0.4em 0.6em;
}

div.modal button.modal-close.close-icon:hover {
    background-color: rgba(190,190,190);
}

div.modal div.modal-actions button.modal-close {
    background: #fff;
    color: var(--color-5);
    border: none;
    padding: 0.5em 1em;
    border-radius: 0.4em;
}

.cursor {
    cursor: pointer;
}

#gifContainer,
#gifLoading {
    border: 0.13em solid var(--color-2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 50%;
    min-width: 16em;
    max-width: 30em;
    height: auto;
    overflow: hidden;
    border-radius: 1em;
}

.container-for-overlay {
    position: relative;
}

#gifLoading {
    position: absolute;
    height: calc(100% - 2 * 0.13em);
    margin: auto;
    left: 0;
    right: 0;
    background-color: var(--color-3);
}

#gifContainer img,
#gifLoading img {
    object-fit: contain;
    object-position: center;
    border: none;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* CSS Loader */
.lds-ring {
    display: inline-block;
    position: relative;
    top: 0.94em;
    left: 1.25em;
    width: 5em;
    height: 5em;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 2.25em;
    height: 2.25em;
    margin: 0.5em;
    border: 0.25em solid var(--color-1);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--color-1) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}  

button.gif-regenerate {
    height: auto;
    margin: 1.25em auto;
    display: block;
    padding: 0.31em 0.63em;
    border-radius: 0.63em;
    color: var(--color-3);
    background-color: var(--color-2);
    border-color: #1d5972;
}

.close {
    color: white;
    background-color: rgba(210,210,210);
}

.close:hover {
    background-color: rgba(190,190,190);
}

#projectTotal::before {
    content: "$";
}

.account-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 0.15em solid var(--color-1);
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 0.63em rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

button.inbetween, label.inbetween {
    position: relative;
}

button.inbetween.active-notification, label.inbetween.active-notification {
    animation: pulse 2s infinite;
}

button.inbetween.reject-notification::before, label.inbetween.reject-notification::before {
    display: block;
    position: absolute;
    top: 5.63em;
    left: 50%;
    transform: translateX(-50%);
    content: 'A previous block of this work has been rejected. It has since been open, to receive new work.';
    font-size: x-small;
    color: var(--color-3);
    font-family: 'Montserrat';
    width: 11.25em;
    line-height: 1.25em;
    background: rgba(0,0,0,0.3);
    padding: 0.5em;
    border-radius: 0.31em;
}

button.inbetween.active-notification::after, label.inbetween.active-notification::after {
    content: '';
    height: 0.65em;
    width: 0.65em;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 6.25em;
    background: rgb(218, 68, 68);
    border: solid 0.10em #fff;
}

p.notice {
    background-color: var(--color-2);
    padding: 1em 0.5em;
    border-radius: 0.63em;
    color: #fff;
}

.dropdown-list {
    border-radius: 1em;
    padding: 0.2em 0.5em;
    /* background-color: var(--color-2); */
    color: var(--color-2);
    font-weight: bold;
    border: 0.1em solid var(--color-2);
    appearance: none;
    text-align: center;
    outline-color: var(--color-2);
    display: flex;
    align-items: center;
    outline: none;
}

p.small {
    font-size: small;
}

p.theme-1 {
    color: var(--color-1);
}

p.italic {
    font-style: italic;
}

p.bold {
    font-weight: bold;
}

p.center {
    text-align: center;
}

/* --------------------------------- Navigation Bar --------------------------------- */


.footer-logo img {
    height: 2em;
    padding: .5rem;
}

.footer-buttons a {
    padding: .5rem;
    text-align: center;
    border: 0.15em solid var(--color-3);
    border-radius: 0.63em;
    min-width: 6.5rem;
    color: var(--color-5);
    text-decoration: none;
}

.hf-button:hover {
    background-color: var(--color-1);
    color: var(--color-3);
    border-color: var(--color-1);
    border-radius: 0.6em;
}

a.rev-button,
.header .nav-buttons-right .rev-button {
    background-color: var(--color-1);
    color: var(--color-3);
    border: 0.15em solid var(--color-1);
    font-weight: bold;
}

.header .rev-div :hover,
.rev-div :hover,
.header .nav-buttons-right .rev-div a:hover,
a.rev-button:hover {
    background-color: var(--color-3);
    color: var(--color-1);
    border-color: var(--color-1);
}


/* --------------------------------- Footer --------------------------------- */

.footer {
    /* display: flex;
    flex-direction: column;
    padding: 2em 5%;   
    border-top: solid 0.15em var(--color-4); */
    /* margin-top: 1.5rem; */
}

.footer ul {
    list-style-type: none;
    padding: 0;
}

/* Footer top */

.footer .footer-top {
    display: inline-flex;
    justify-content: space-between;
    padding: 0 0 1% 0;
    border-bottom: .08em solid var(--color-4);
}

.footer .footer-buttons {
    display: inline-flex;
    grid-gap: 1rem;
}

.footer .links {
    display: flex;
    flex-direction: column;
}

.footer .links h3 {
    text-align: center;
    padding: 0.5rem;
    margin-top: 0;
}

.footer .links a {
    text-align: start;
    padding: 0.25rem 0.5rem;
    color: rgb(150, 150, 150);
}

.footer .links a:hover {
    color: var(--color-5)
}

.footer .buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 0.5em;
}

.footer-top .logo .footer-logo a img {
    padding: 0.3rem 0rem;
}

/* Footer bottom */

.footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(150, 150, 150);
    padding: 1rem 0 0 0;
}

.footer .media-links {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 0.25rem;
    padding: 0;
}

.footer .media-links * {
    display: inline-flex;
    justify-content: space-between;
}

.social {
    width: 2.8rem;
    margin-left: .5rem;
}

/* --------------------------------- Home page --------------------------------- */

/* ----- project content ----- */

.content ul {
    list-style-type: none;
    width: 100%;
    padding-inline-start: 0;
    margin: 0;
}

.content li .row-content,
.content li .row-no-content {
    background-image: url("../images/background-middle.png");
    background-repeat: no-repeat;
    background-position: 10rem;
    background-size: 101rem;
    height: 25rem;
    padding: 0 5%;

    display: flex;
    align-items: center;
    grid-gap: 5%;
}

.content li .row-no-content {
    justify-content: center;
}

.content li .row-content .picture {
    flex: 1 1 7rem;
    max-width: 32rem;
    min-width: 16rem;
    position: relative;
}

/* .content li .row-content .picture .tags {
    position: absolute;
    top: 0.4em;
    left: 0;
    display: flex;
    flex-direction: column;
    grid-gap: 0.2em;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
} */

.tags {
    display: flex;
    justify-content: center;
    grid-gap: 1em;
    margin: 0.5em 0;
}

.tags p {
    background-color: var(--color-2);
    padding: 0.3em 1em;
    border-radius: 1em;
    margin: 0;
    color: var(--color-3);
}

.project .tags p {
    font-size: small;
}

.content li .row-content .tags p:nth-child(2n) {
    /* background-color: #7a57db; */
    background-color: var(--color-5);
}

/* .content li .row-content .picture .tags > * {
    width: 2.5em;
    height: 2.5em;
    background-color: var(--color-3);
    border: 0.2em solid var(--color-2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content li .row-content .picture .tags img {
    width: 2em;
    height: 2em;
    border-radius: 0.2em;
} */

.content li .row-content .picture a img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--color-3);
    box-shadow: 0 0 2em rgb(0, 0, 0, 0.25);
    border: 0.2em solid var(--color-1);
    border-radius: 1em;
}

.content li .row-content .picture a:hover > img {
    filter: brightness(100%);
    background-color: rgb(230, 230, 230);
    box-shadow: 0 0 2em rgb(0, 0, 0, 0.5);
}

.content li .row-content .details {
    flex: 1 1 20rem;
}

.content li .row-content .details .key-details {
    display: flex;
    grid-gap: 5%;
    justify-content: space-around;
    align-items: center;
    max-width: 50rem;
    margin: auto;
    padding: 2em, 0;
}

.content li .row-content h3 {
    background-color: var(--color-1);
    color: var(--color-3);

    /* border: 0.1em solid var(--color-1);
    background-color: white;
    color: black; */

    padding: 0.6em 0.8em 0.6em 0.8em;
    border-radius: 0.8em;
    font-size: x-large;
    text-align: center;
    margin: 0.5em;
}

/* .content li .row-content h3:hover {
    box-shadow: 0 0 0.5em rgb(0, 0, 0, 0.25);
} */

.content li .row-content a {
    text-decoration: none;
    display: flex;
    grid-gap: 1em;
}

.content li .row-content .details .key-details img {
    width: 3.2em;
    height: 3.2em;
}

.content li .row-content .money {
    border-radius: 3.2em;
    white-space: nowrap;
}

.content li .row-content .acct-name {
    background-color: rgba(255, 255, 255, 0);
    color: black;
    margin: 0 0 0 -4%;
}

.content li .row-content .description {
    text-align: center;
}

.content li .row-content .description p {
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.6em;
}

@media (max-width: 65em) {
    .content li .row-content .details .key-details {
        flex-direction: column;
    }
}

/* img.acct-pic {
    background-color: var(--color-3);
    border-radius: 50%;
    border: 0.15em solid var(--color-1);
    height: 4rem;
    width: 4rem;
    object-fit: cover;
    object-position: center;
} */

/* every second list element */

.content ul li:nth-child(2n) .row-content {
    flex-direction: row-reverse;
} 

.content li:nth-child(2n) .row-content {
    background-color: var(--color-1);
}

.content li:nth-child(2n) .row-content .picture img {
    border: 0.2em solid var(--color-1);
}

.content li:nth-child(2n) .row-content h3 {
    background-color: var(--color-3);
    color: black;

    /* border: 0.1em solid white;
    background-color: var(--color-1);
    color: white; */
}

.content li:nth-child(2n) .row-content .acct-name {
    background-color: rgba(255, 255, 255, 0);
    color: var(--color-3);
}

.content li:nth-child(2n) .row-content p {
    color: var(--color-3);
}

.content li:nth-child(2n) .row-content .acct-pic {
    border: 0.15em solid var(--color-3);
}

/* end */
/* .end {
    background-image: url("../images/background-end.png");
    background-repeat: no-repeat;
    background-position: 10rem top;
    background-size: 31rem;
    height: 7rem;
} */


/* --------------------------------- Account Page --------------------------------- */

.acct-page {
    padding: 1% 5%;
    background-image: url("../images/acct-background-design 3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.acct-page > * {
    padding: 1% 0%;
}

.acct-page a {
    text-decoration: none;
}

.acct-page .project-updates a {
    color: black;
}

.acct-page {
    display: flex;
    grid-gap: 10%;
}

/*
details section
*/

.acct-page .acct-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 30%;
    max-width: 18rem;
}

.acct-page .acct-details .account-image {
    flex: 0 0 8rem;
}

.acct-page .acct-details .account-image img {
    /*height: 80%;*/
    width: 8rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 0.15em solid var(--color-1);
    margin: 10% auto;
}

.acct-page .acct-details .acct-buttons {
    display: flex;
    flex-direction: column;
}

.acct-page .acct-details .acct-buttons div {
    position: relative;
}

.acct-page .acct-details .acct-buttons .report button:hover,
.acct-page .acct-details .acct-buttons .report form .close:hover {
    background-color: rgb(212, 68, 68);
}

.acct-page .acct-details .acct-buttons form button {
    border-radius: 2em;
    width: auto;
}

.acct-page .acct-details .acct-buttons form .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.06em 0.45em;
    border: 0;
    border-radius: 100%;
    text-align: center;
}

.acct-page .acct-details .acct-buttons form .close:hover,
.acct-page .acct-details .acct-buttons .report form .close:hover {
    background-color: var(--color-5);
}

.acct-page .acct-details .acct-buttons form {
    position: absolute;
    background-color: white;
    z-index: 1;
    top: 0.19em;
    border-radius: 0.88em;
    border: 0.13em solid var(--color-5);
    width: 100%;
    /* display: flex; */
    flex-direction: column;
    box-shadow: 0 0.31em 0.63em grey;

    display: none;
}

.acct-page .acct-details .acct-buttons form > * {
    margin: 0.63em;
}

.acct-page .acct-details .acct-buttons form h4 {
    text-align: center;
}

.acct-page .acct-details .acct-buttons form textarea {
    resize: none;
    height: 10em;
    padding: 0.4em;
}

.acct-page .acct-details .account-info {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-items: center;
}

.acct-page .acct-details .account-info h4 {
    color: rgb(150, 150, 150);
} 

.star-container .star-widget input {
    display: none;
    text-align: center;
}

.star-container .star-widget {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.star-container .star-widget {
    font-size: 1.1em;
    color: #444;
    padding: 0.06em;
    /* float: right; */
    transition: all 0.2s ease;
    -webkit-text-stroke-width: 0.13em;
    -webkit-text-stroke-color: #444;
    letter-spacing: 0.13em;
}

.star-container input:checked ~ label,
.star-container input:not(:checked) ~ label:hover,
.star-container input:not(:checked) ~ label:hover ~ label,
.star-container .star-widget .yellow-star {
    color: #fd4;
}

.acct-page .acct-details .reviews {
    width: 100%;
}

.acct-page .acct-details .reviews ul {
    list-style-type: none;
    width: 100%;
    padding-inline-start: 0;
    margin: 0;
}

.acct-page .acct-details .reviews ul li {
    margin: 1.25em 0;
    border: solid 0.13em var(--color-1);
    padding: 1em 1em 0 1em;
    border-radius: 0.31em;
    width: 100%;
}

.acct-page .acct-details .reviews ul li div.reviewer-details {
    display: flex;
    align-items: center;
}   

.acct-page .acct-details .reviews ul li img {
    margin-right: 0.5em;
    width: 2.81em;
    height: 2.81em;
}

.acct-page .acct-details .reviews ul li p {
    text-shadow: 0 0 0.13em white;
    margin: 1em 0;
}

.acct-page .acct-details .reviews ul li p.review-date {
    font-size: 0.88em;
    flex-grow: 1;
    text-align: right;
    color: #9e9e9e;
}

/* other details */
.acct-page .other-details {
    flex: 1 1 70%;
    display: flex;
    flex-direction: column;
}

/*
errors section
*/

a.complete-now {
    width: fit-content;
    padding: 0.5em;
    margin: 0.5em auto;
    background-color: var(--color-2);
    color: white;
    border-radius: 0.5em;
    border: 0.15em solid var(--color-2);
}

.complete-now:hover {
    background-color: var(--color-3);
    color: var(--color-2);
}

/*
project update section
*/

.acct-page .project-updates {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.acct-page .project-updates h2 {
    text-align: center;
    background: rgba(10, 207, 131, 60%);
    margin: 0;
    padding: 0.5em;
    border-radius: 0.31em 0.31em 0 0;
    /* border: solid 0.06em #bdbdbd; */
    border-bottom: none;
}

.acct-page .project-updates ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin: auto;
    overflow-y: scroll;
    height: 21.88em;
    border: solid 0.06em #bdbdbd;
    border-radius: 0 0 0.31em 0.31em;
    width: 100%;
    background: rgba(255, 255, 255, 60%);
}

.acct-page .project-updates ul::-webkit-scrollbar {
    background-color: rgb(0, 0, 0, 0);
    width: 0.38em;
    border-left: solid 0.06em #bdbdbd;
}

.acct-page .project-updates ul:hover::-webkit-scrollbar-thumb {
    background: var(--color-1);
    border-radius: 1em;
}

.acct-page .project-updates li {
    padding: 1em 1em 0.5em 1em;
    margin: 0.5em 1em;
    border-radius: 0.31em;
}

.acct-page .project-updates li:hover {
    background: rgba(200, 200, 200, 40%);;
}

.acct-page .project-updates li.indent p, .acct-page .project-updates li.indent h4 {
    margin: 0;
    margin-left: 2.38em;
}

.acct-page .project-updates li .notification-summary {
    display: flex;
    align-items: center;
}

.acct-page .project-updates li .notification-summary p {
    margin: 0;
    font-weight: 700;
}

.acct-page .project-updates li .notification-summary .notification-picture {
    position: relative;
    margin-right: 1em;
}

.acct-page .project-updates li .notification-summary .notification-picture img.project-profile-rounded {
    height: 3.5em;
    width: 3.5em;
    object-fit: cover;
    object-position: center;
    border: 0.19em solid var(--color-1);
    border-radius: 50%;
}

.acct-page .project-updates li .notification-summary .notification-picture label {
    position: absolute;
    height: 1.25em;
    width: 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    right: -0.5em;
    border: solid 0.19em #fff;
    padding: 0.13em;
}


.acct-page .project-updates li img,
.acct-page .project-updates li p,
.acct-page .project-updates li label {
    line-height: 1em;
}

/* .acct-page .project-updates li p {
    margin-left: 5em;
} */

.acct-page .project-updates li label {
    width: 1.88em;
    color: white;
    text-align: center;
    border-radius: 50%;
}

.acct-page .project-updates li .fa-check {
    background-color: var(--color-1);
}

.acct-page .project-updates li .fa-search {
    background-color: orange;
}

.acct-page .project-updates li .fa-minus {
    background-color: #ff0000;
}

.acct-page .project-updates li .fa-info {
    background-color: var(--color-2);
}

.acct-page .project-updates li .fa-clock {
    background-color: var(--color-4);
}

/*
financials section
*/

.acct-page .financials {
    padding: 0.63em 0 0.63em 0;
}

.financial-header {
    display: flex;
    align-items: center;
    margin-top: 3%;
    position: relative;
}

.financial-header > div {
    width: 100%;
}

.financial-header h2 {
    text-align: center;
    margin: 0.63em 30%;
    width: 100%;
}

.financial-content {
    display: flex;
}

.financial-content > div {
    width: 50%;
    margin: 1% 2%;
}

.f-animator > table, .f-producer > table {
    width: 100%;
    border: 0.06em dashed var(--color-4);
    border-radius: 0.31em;
    background-color: rgba(255, 255, 255, 75%);
    border-spacing: 0;
}

.f-animator th, .f-producer th {
    padding: 0.63em 5%;
    font-size: 1.13em;
    text-align: left;
    border-bottom: 0.06em dashed var(--color-4);
    background-color: rgba(10, 207, 131, 0.6);
}

.table-header {
    padding: 0.63em 5%;
    text-align: left;
    width: 80%;
}

.value {
    padding-right: 5%;
    text-align: right;
    width: 20%;
}

/*
my projects section
*/

.my-projects {
    padding-bottom: 2em;
}

.my-projects h2 {
    text-align: center;
    padding-bottom: 0.5em;
}

.my-projects .pp-content {
    width: 20em;
    height: 11.25em;
    margin: auto;
    padding-bottom: 3.13em;
}

.my-projects .mp-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, 16.69em);
    justify-content: space-between;
    grid-gap: 0.63em;
    width: 100%;
}

.my-projects .mp-content .mp-project {
    width: 16.69em;
    height: 9.38em;
    background-color: white;
    position: relative;
    border: 0.2em solid var(--color-1);
    box-shadow: 0 0 1em rgb(0, 0, 0, 0.2);
    border-radius: 1em;
    overflow: hidden;
}

.my-projects .mp-content .mp-project img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.my-projects .mp-content .mp-project h3 {
    margin: auto;
    position: absolute;
    bottom: 0.63em; left: 0; right: 0;
    font-size: medium;

    background-color: var(--color-1);
    color: var(--color-3);
    border-radius: 0.63em;
    width: max-content;
    padding: 0.31em 0.63em;
}

.my-projects .mp-content .mp-project:hover {
    box-shadow: 0 0 1em rgb(0, 0, 0, 0.4);
}

/*
following section
*/

.following h2 {
    text-align: center;
}

.following .following-producer {
    display: grid;
    grid-template-columns: repeat(auto-fill, 7.5em);
    justify-content: space-between;
    grid-gap: 0.63em;
    width: 100%;
}

/* .following .following-producer .producer-details {
    width: 7.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.31em;
    border: solid 0.2em var(--color-4);
    background-color: white;
} */

.following .following-producer .producer-details h3 {
    padding: 0.2em 0.5em;
}

.following .following-producer .producer-details:hover > h3 {
    color: var(--color-1);
}

.following .following-producer .producer-details img {
    width: 60%;
    margin: 1em 0 0 0;
}


/* --------------------------------- Project Page --------------------------------- */

/* 
-----  Details  -----
*/

.project,
.project .details,
.project .details .key-info,
.project .details .key-info > *,
.project .details .additional-info {
    display: flex;
}

.project,
.project .details {
    flex-direction: column;
}

.project .details .key-info {
    justify-content: space-between;
    align-items: center;
    grid-gap: 5%;
    /* margin: 0 10%; */
}

.project .details {
    padding: 0.63em 5% 0.63em 5%;
}

.project .details .key-info > * {
    flex: 0 1 auto;
    align-items: center;
}

.project .details .key-info .padding {
    flex: 1 0 0;
}

.project .details .key-info .project-pic {
    max-width: 20em;
    height: auto;
    justify-content: flex-start;
}

.project .details .key-info .project-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border: 0.2em solid var(--color-1);
    border-radius: 1em;
}

.project .details .key-info .important-details {
    padding: 0.63em 0.63em 0.63em 0.63em;
    width: 30%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.project .details .key-info .important-details * {
    margin: 0.31em 0 0.31em 0;
    text-align: center;
}

.project .details .key-info .important-details h3,
.project .content .scene-title .title-work h3 {
    color: var(--color-3);
    background-color: var(--color-1);
    padding: 0.31em 0.63em 0.31em 0.63em;
    border-radius: 1.88em;
}

.disclaimer-font {
    color: var(--color-4);
    font-size: x-small;
}

.project .details .key-info .important-details a {
    color: var(--color-2);
}

.project .details .key-info .important-details a:active {
    color: var(--color-1);
}

.project .details .key-info .account-info {
    justify-content: flex-end;
    grid-gap: 1.88em
}

.project .details .key-info .account-info > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    grid-gap: 0;
}

.project .details .key-info .account-info > * > * {
    margin: 0.31em 0 0.31em 0;
    text-align: center;
}

.project .details .key-info .account-info .account-details img {
    width: 8.13em;
    background: linear-gradient(90deg, #FFB800 70%, var(--color-3) 30%)
}

.project .details .key-info .account-info .account-image img {
    width: 4.38em;
}

.project .details .key-info .extra-info {
    flex-direction: column;
}

.project .details .key-info .extra-info .project-stats p {
    margin: 0 auto;
    text-align: center;
}

.project .details .additional-info {
    padding: 0.63em 0 0.63em 0;
    justify-content: space-between;
    align-items: center;
    grid-gap: 0.63em;
}

.project .details .additional-info .description {
    flex: 3.5 1 31.25em;
}

.project .details .additional-info .edit {
    display: flex;
    justify-content: center;
    flex: 0.5 1 3.13em;
}

.project .details .additional-info .edit a {
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    border-radius: 50%;
    color: white;
    background-color: lightgrey;
    font-size: x-large;
    border: 0;
    text-align: center;
}

.project .details .additional-info .reference {
    /* flex: 0.5 1 auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: auto 0 1em 0;
}

.project .details .additional-info .reference h3 {
    text-align: center;
    width: auto;
}

.project .details .additional-info .reference .ref-image {
    position: relative;
    text-align: center;
    width: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project .details .additional-info .reference .ref-image img {
    width: 100%;
}

.project .details .additional-info .reference .ref-image h2 {
    position: absolute;
    left: 40%;
    top: 5%;
    margin: auto;
    color: black;
}

/* 
-----  Frames  -----
*/

.scene-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene-actions p.scene-delete {
    background: #ccc;
    border-radius: 100%;
    color: #fff;
    margin-right: 0.5em;
    height: 2em;
    width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 1.5em;
}

.scene-actions p.scene-delete:hover {
    background: #c35252;
}

.project .content .scene .scene-title a:not(.icon-wrapper),
.project .content .scene .scene-title .icon-wrapper label {
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    aspect-ratio: 1 / 1;
    background-color: lightgrey;
    text-align: center;
    color: white;
    font-size: x-large;
    border-radius: 50%;
    border: 0.1em solid var(--color-3);
}

.project,
.project .content,
.project .content .scene,
.project .content .scene .scene-title,
.project .content .scene .scene-title .title-work {
    display: flex;
}

.project .content .scene .scene-title,
.project .content .scene .scene-title .title-work {
    align-items: center;
}

.project .content .scene .scene-title {
    padding-bottom: 0.2em;
}

.project {
    padding: 0.63em 5% 0.63em 5%;
}

.project .content,
.project .content .scene,
.project .content .scene .scene-title {
    width: 100%;
    flex-direction: column;
}

.project .content .scene .scene-title {
    justify-content: space-between;
    flex-direction: row;
    padding-bottom: 3em;
}

.project .content .scene .scene-title .title-work {
    grid-gap: 3em;
    min-width: max-content;
}

.project .content .scene .scene-title .scene-description {
    margin: 0 3em;
}

.content .scene .scene-contents {
    list-style-type: none;
    display: grid;
    justify-content: space-between;
    grid-gap: 2em;
    align-items: center;
    width: 100%;
    padding-inline-start: 0;
}

.content .work-scope-individual.work-type-inbetweens .scene-contents {
    grid-template-columns: repeat(auto-fill, 16em 5em);
}

.content .scene-contents {
    grid-template-columns: repeat(auto-fill, 16em);
}

.content .scene .scene-contents::after {
    content: "";
    flex: auto;
    width: 100%;
}

.content .scene .scene-contents .keyframe {
    border: 0.1em solid var(--color-4);
    border-radius: 0.5em;
}

.content .scene .scene-contents img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project .content .scene .inbetween {
    text-align: center;
    vertical-align: middle;
}

.project .content .scene .inbetween {
    background-color: var(--color-1);
    color: var(--color-3);
    font-weight: bold;
    border-radius: 50%;
    height: 2.5em;
    width: 2.5em;
    font-size: xx-large;
    line-height: 2.5em;
}

.project .content .scene button.inbetween {
    line-height: 1.5em;
}

.project .content .work-type-art .inbetween,
.project .content .work-type-colour .inbetween,
.project .content .work-type-art a.icon-wrapper,
.project .content .work-type-colour a.icon-wrapper {
    position: absolute;
    top: -0.75em;
    right: -0.75em;
    height: 2em;
    width: 2em;
    line-height: 2em;
}

.project .content .scene-contents,
.project .content .work-scope-individual .scene-contents div {
    position: relative;
}

.project .content .scene-contents button.scope-work-scene,
.project .content .scene-contents label.scope-work-scene,
.project .content .work-type-inbetweens.scope-work-scene .scene-contents a.icon-wrapper {
    position: absolute;
    top: -0.75em;
    left: -0.75em;
    height: 2em;
    width: 2em;
    line-height: 2em;
}

.project .content .scene-contents .work-type-inbetweens a.icon-wrapper {
    top: 0;
    left: 0;
}

.project .content .scene-contents a.icon-wrapper {
    top: 0;
    right: 0;
}

.project .content .work-scope-scene .scene-contents a.icon-wrapper {
    top: 0;
    left: 0;
}

.project .content .scene-contents button.scope-work-scene {
    border-color: var(--color-1);
    line-height: 1.8em;
}

.project .content button.scope-work-scene:hover ~ img[class="keyframe"],
.project .content label.scope-work-scene:hover ~ img[class="keyframe"],
.project .content .work-scope-scene a.icon-wrapper:hover ~ img[class="keyframe"],

.project .content .work-type-art button.scope-work-individual:hover + img[class="keyframe"],
.project .content .work-type-colour button.scope-work-individual:hover + img[class="keyframe"],

.project .content .work-type-art label.scope-work-individual:not(.fa-check):hover + img[class="keyframe"],
.project .content .work-type-colour label.scope-work-individual:not(.fa-check):hover + img[class="keyframe"],

.project .content .work-type-art .scope-work-individual a.icon-wrapper:hover + img[class="keyframe"],
.project .content .work-type-colour .scope-work-individual a.icon-wrapper:hover + img[class="keyframe"],

.project .content .work-type-art a.icon-wrapper[title="Download Accepted Images"]:hover + img[class="keyframe"],
.project .content .work-type-colour a.icon-wrapper[title="Download Accepted Images"]:hover + img[class="keyframe"] {
    box-shadow: 0 0 1em rgb(0,0,0, 0.4);
}

.project .content .scene label,
.project .content .scene button,
.project .content .scene .scene-title a:not(.icon-wrapper),
.project .content .scene .scene-title .icon-wrapper label,
.project .details .additional-info .edit .fa-edit {
    border: 0.1em solid var(--color-3);
}

.project .content .scene button.inbetween {
    border: 0.1em solid var(--color-1);
}

.project .content .scene button:hover {
    border: 0.1em solid #07a569;
}

.project .content .scene .fa-search,
.project .content .scene .fa-upload {
    background-color: orange;
    border-color: orange;
}

.project .content .scene .fa-search:hover,
.project .content .scene .fa-upload:hover {
    border: 0.1em solid darkorange;
}

.project .content .scene .fa-check,
.project .content .scene .fa-download {
    background-color: lightgrey;
    border-color: lightgrey;
}

/* .project .content .scene .fa-check:hover, */
.project .content .scene .scene-title a:not(.icon-wrapper):hover,
.project .content .scene .scene-title .icon-wrapper label:hover,
.project .details .additional-info .edit .fa-edit:hover,
.project .content .scene .fa-download:hover {
    border: 0.1em solid rgb(160, 160, 160);
}

.project .content .scene .fa-check:hover {
    cursor: auto;
}

.project .content .scene .fa-ellipsis-h {
    background-color: rgb(30, 160, 195);
    border-color: rgb(30, 160, 195);
}

.project .content .scene .fa-ellipsis-h:hover {
    border: 0.1em solid rgb(26, 132, 161);
}

.project .content .scene a {
    border-radius: 50%;
}

.project .details .additional-info .reference .ref-image:hover {
    filter: brightness(90%);
}

.project a {
    text-decoration: none;
}

.project .scene {
    /* border-top: 0.13em solid linear-gradient(to right, var(--color-1), var(--color-3)); */
    /* border: 1em solid; */
    border-width: 0.2em 0 0 0;
    border-style: solid;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(10, 207, 131, 0.5), rgba(0, 0, 0, 0)) 1;
    padding: 1.25em 0 2.5em 0;
}


/* --------------------------------- Post Project, Post Work, Review Work --------------------------------- */
/*
.post-body {
    padding: 0.63em 5% 0.63em 5%;
}

.post-body ul {
    list-style-type: none;
    padding-inline-start: 0;
}

.post-body .next-step a {
    text-decoration: none;
    padding: 0.63em;
    border-radius: 0.63em;
}

/* top section */
/*
.post-body .price-input,
.post-body .scene-input {
    display: flex;
    grid-gap: 1.25em;
    align-items: center;
}

.post-body .scene-input input[type="text"],
.post-body .project-name input[type="text"] {
    font-size: x-large;
    width: auto;
    padding: 0.32em 0.62em;
    border-color: var(--color-2);
    border-width: 0 0 0.2em 0;
    outline: none;
}

.post-body .scene-input input[type="text"]:placeholder-shown,
.post-body .scene-input input[type="text"]:hover,
.post-body .project-name input[type="text"]:placeholder-shown,
.post-body .project-name input[type="text"]:hover {
    border-color: var(--color-2);
    border-width: 0 0 0.2em 0;
}

.post-body .project-top {
    display: flex;
    grid-gap: 5em;
}

.post-body .project-top .project-left {
    flex: 1 1 calc(80% - 30em);
}

.post-body .project-top .project-pic {
    flex: 1 1 calc(20% + 30em);
}

.post-body .scene-input img {
    width: 2.5em;
    height: 2.5em;
}

.post-body .scene-input .scene-counter {
    font-weight: normal;
    width: 1em;
}

.post-body .project-pic {
    display: flex;
    flex-direction: column;
}

.post-body .project-pic img,
.post-body .animation img {
    margin: 1.25em 0 0 0;
    width: 30em;
    height: 16.88em;
    object-fit: cover;
    background-color: var(--color-3);
    border: 0.13em solid var(--color-2);
    border-radius: 1em;
}

.post-body .animation {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.post-body .animation button {
    height: auto;
    margin: 0 0 0 1.25em;
    padding: 0.31em 0.63em;
    border-radius: 0.63em;
    color: var(--color-3);
    background-color: var(--color-2);
    border-color: #1d5972;
}

.post-body .scene-keyframes {
    margin: 1em 0;
}

.post-body input[class="price"],
.post-body input[class="scene-price"] {
    width: 4em;
    text-align: end;
    border-width: 0 0 0.2em 0;
    border-color: var(--color-2);
    outline: none;
    height: 1.5em;
}

.post-body input[class="price"]::-webkit-outer-spin-button,
.post-body input[class="price"]::-webkit-inner-spin-button,
.post-body input[class="scene-price"]::-webkit-outer-spin-button,
.post-body input[class="scene-price"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.post-body .title-and-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* middle section */
/*
.post-body input[type="range"]:not(#storyboardRatio) {
    writing-mode: bt-lr;
}

.post-body .price-calc ul li.storyboard-ratio {
    width: 40em;
    display: flex;
    align-items: center;
}

.post-body .price-calc ul li.storyboard-ratio input {
    width: 5em;
}

.post-body .price-calc ul li.storyboard-ratio output {
    width: 1.5em;
}

.post-body .scene ul,
.post-body .reference ul,
#postWorkForm .scene-keyframes {
    display: grid;
    justify-content: space-between;
    column-gap: 0.31em;
    row-gap: 1em;
    width: 100%;
}

.post-body .all-scenes-step-2 .scene ul,
.post-body .reference ul,
.post-body #work-step-1 ul,
.post-body #review-work ul,
#postWorkForm .scene-keyframes {
    grid-template-columns: repeat(auto-fill, min(16em, max(30%, 11em)));
}

.post-body #work-step-1 ul,
#postWorkForm .scene-keyframes {
    grid-gap: 0.56em;
}

#postWorkForm ul li img,
#postWorkForm .scene-keyframes img {
    border: 0.13em solid var(--color-4);
    border-radius: 0.3em;
}

#postWorkSceneReview ul .nondraggable img,
#postWorkSceneReview ul img.nondraggable,
#postWorkForm ul .nondraggable img,
#postWorkForm ul img.nondraggable,
#postWorkForm .scene-keyframes img  {
    border: 0.13em solid var(--color-2)
}

.post-body #review-work ul li img {
    border: 0.1em solid var(--color-1);
    border-radius: 0.3em;
}

.post-body #review-work ul .keyframe img,
.post-body #review-work ul .reference img {
    border-color: var(--color-4);
}

.post-body #work-step-1 div.post-work-frames {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.post-body #work-step-1 div.post-work-frames ul {
    display: flex;
    width: fit-content;
    justify-content: flex-start;
    flex-flow: row wrap;
}

.post-body #review-work ul li .frame-number {
    width: 1.88em;
    height: 1.88em;
    border-radius: 50%;
    border: 0.1em solid var(--color-1);
    position: absolute;
    left: 0.63em;
    top: 0.63em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7);
}

.post-body #review-work ul li .frame-number p {
    color: var(--color-1);
    font-weight: 500;
}

.post-body #review-work ul li.reference .frame-number {
    border-color: var(--color-4);
}

.post-body #review-work ul li.reference .frame-number p {
    color: var(--color-4);
}

.post-body #review-work ul li p {
    text-align: center;
    color: var(--color-5);
}

.post-body .all-scenes-step-3 .scene ul {
    grid-template-columns: repeat(auto-fill, min(16em, max(45%, 11em)) 5em);
}

.post-body .all-scenes-step-3 .scene ul.no-inbetweens {
    grid-template-columns: repeat(auto-fill, min(16em, max(45%, 11em)));
}

.post-body .all-scenes-step-3 .scene ul.alt-inbetweens .inbetween {
    position: relative;
}

.post-body .all-scenes-step-3 .scene ul.alt-inbetweens .inbetween input {
    position: absolute;
    left: -1em
}

.post-body .all-scenes-step-3 .scene ul.alt-inbetweens .inbetween output {
    position: absolute;
    left: 1em;
}


.post-body .scene ul::after,
.post-body .reference ul::after {
    content: "";
    flex: auto;
    width: 100%;
}

.post-body .scene li,
.post-body .reference ul li,
.post-body .scene-keyframes img {
    position: relative;
    width: 100%;
    min-width: 11em;
    max-width: 16em;
    display: flex;
    align-items: center;
}

.post-body .scene li img,
.post-body .reference ul img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.post-body .scene li[class="keyframe"] img,
.post-body .reference ul img,
.all-scenes-step-2 li img {
    border: 0.06em solid var(--color-4);
    border-radius: 1em;
}

.post-body .scene li button,
.post-body .reference ul li button {
    border-radius: 50%;
    border: 0;
    text-align: center;
    padding: 0.38em 0.63em;
    position: absolute;
    right: 0.63em;
    top: 0.63em;
    visibility: hidden;
}

.post-body .scene li:hover > button,
.post-body .reference ul li:hover > button {
    visibility: visible;
}

.post-body .scene .inbetween {
    display: flex;
    align-items: center;
}

.post-body .scene .inbetween .slider {
    width: 20%;
}

.post-body .scene .inbetween output {
    width: 2em;
    height: 1.88em;
    
    text-align: center;
    
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--color-3);
    color: var(--color-2);
    border: 0.13em solid var(--color-2);
}

.post-body .scene .inbetween output[class="0"] {
    background-color: var(--color-4);
    color: var(--color-5);
    border: 0.13em solid var(--color-5);
}

#editProjectForm input[name="projectName"],
#post-step-1 input[name="projectName"] {
    margin: 1rem 0 0 0;
}

#post-step-1 > * {
    padding: 0 0 0.63em 0; 
}

#post-step-1 .project-pic {
    padding: auto;
}

#post-step-1 .post-step-1-padding {
    padding: 1em 0 0 1.25em; 
}

.post-radio br {
    display: block;
    margin-top: 0.5em;
    content: "";
}

.post-radio > * {
    vertical-align: middle;
}

.post-body .project-description textarea {
    border: 0.06em solid var(--color-4);
    padding: 0.63em 1.25em;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    wrap: hard;
    margin-top: 2.6em;
    height: 20.5em;
    resize: none;
    border-radius: 1em;
    outline-color: var(--color-2);
}

.scene-input label {
    background-color: #CCCCCC;
    color: white;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: x-large;
    cursor: pointer;
}

.scene-input label:hover {
    background-color: #999999;
}

.step-3-inbetween-recommendation {
    margin: 2em 0;
}

.step-3-inbetween-recommendation h2 {
    font-size: medium;
}

.step-3-inbetween-recommendation p {
    font-size: small;
}

.post-body .review-top {
    display: flex;
    flex-direction: row;
}

.post-body .review-top .review-left {
    width: 70%;
    padding: 0 3% 0 0;
}

.post-body .review-top .comments {
    width: 30%;
    min-width: 18em;
    padding: 0 0 0 3%;

    border-width: 0 0 0 0.2em;
    border-style: solid;
    border-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(10, 207, 131, 0.5), rgba(0, 0, 0, 0)) 1;
}



/* bottom section */
/*
.post-body .price-calc ul li {
    display: flex;
    justify-content: space-between;
    width: 21.88em;
}

.post-body .add-scene {
    display: flex;
    grid-gap: 1.25em;
    align-items: center;
}

.post-body .add-scene button {
    width: 1.8em;
    height: 1.8em;
    font-size: xx-large;
    color: var(--color-3);
    background-color: var(--color-2);
    border-color: #6f6e6d;
    border-radius: 50%;
}

.post-body .add-scene button:hover {
    border-color: #3b3b3a;
}

.post-body .add-scene p {
    color: var(--color-5);
}

.post-body .comments {
    display: flex;
    flex-direction: column;
}

.post-body .comments .previous-comments li {
    display: flex;
    grid-gap: 1.25em;
    align-items: center;
    margin: 0.31em 0;
}

.post-body .comments .previous-comments li img {
    width: 2.5em;
    height: 2.5em;
}

.post-body .comments .previous-comments li p {
    color: var(--color-5);
}

.post-body .comments .send-comment {
    display: flex;
    align-items: flex-end;
    flex-direction: column-reverse;
    margin-bottom: 1em;
}

.post-body .comments .send-button button {
    padding: 0.31em 0.63em;
    color: white;
    background-color: var(--color-2);
    border: 0.13em solid var(--color-2);
    border-radius: 0.63em;
    margin-left: 4.25em;
    font-size: medium;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

.post-body .comments .send-button button:hover {
    color: var(--color-2);
    background-color: white;
}

.post-body .comments .comment-area {
    width: calc(100% - 3em);
    margin-bottom: 0.5em;
}

.post-body .comments .comment-area textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    padding: 0.63em 1.25em;
    box-sizing: border-box;
    wrap: hard;
    min-height: 5em;
    border-radius: 1em;
    outline-color: var(--color-2);
    font-size: medium;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

/* next step button */
/*
.post-body .next-step {
    margin: 3.13em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-body .next-step .back-button {
    background: var(--color-3);
    color: var(--color-5);
    border: 0.13em solid var(--color-5);
    border-color: var(--color-5) #141414 #141414 var(--color-5);
}

.post-body .next-step .back-button:hover {
    background: var(--color-5);
    color: var(--color-3);
}

.post-body .next-step .red-div button,
.post-body .next-step .red-div a[class='red-button'] {
    background: var(--color-3);
    color: red;
    border: 0.13em solid red;
    border-color: red rgb(160,0,0) rgb(160,0,0) red;
}

.post-body .next-step .red-div button:hover,
.post-body .next-step .red-div a[class='red-button']:hover {
    background: red;
    color: var(--color-3);
}

.post-body .next-step a.rev-button {
    background: var(--color-2);
    border-color: var(--color-2);
}

.post-body .next-step a.rev-button:hover {
    background: var(--color-3);
    color: var(--color-2);
}

#post-step-1 .next-step .back-button {
    visibility: hidden;
}

.post-body .next-step #review-work-buttons {
    display: flex;
    grid-gap: 9.38em;
}

.post-body .next-step button,
.pop-up button {
    border-radius: 0.63em;
    color: white;
    font-weight: bold;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    width: 8.25em;
    padding: 0.63em;
    font-size: medium;
}

.post-body .next-step button {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.post-body .next-step button:hover {
    background-color: white;
    color: var(--color-1);
}

.next-step .upload-again {
    color: white;
    border: 0.2em solid var(--color-1);
}

.red-button {
    background: red;
    border-color: red;
}

.red-button:hover {
    background: white;
    color: red;
}

.green-button {
    background: var(--color-1);
    border-color: var(--color-1);
}

.green-button:hover {
    background: white;
    color: var(--color-1);
}

.grey-button {
    background: var(--color-5);
    border-color: var(--color-5);
}

.grey-button:hover {
    background: white;
    color: var(--color-5);
}

.buttons a {
    border-radius: 0.63em;
}

/* Pop-ups */
.pop-up {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(68, 68, 68, 0.5);
    z-index: 10000;
}

.pop-up .reveal-div {
    position: relative;
    margin: auto;
    background-color: white;
    max-width: 70%;
    border-radius: 1em;
    box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.5);
}

.pop-up .reveal-div > * {
    margin: 5% 10%;
    text-align: center;
}

.pop-up .reveal-div textarea {
    width: 90%;
    box-sizing: border-box;
    padding: 3%;
    resize: none;
    margin: 5%;
}

.pop-up .reveal-div .buttons {
    display: flex;
    justify-content: space-around;
    grid-gap: 1em;
}

.pop-up .reveal-div select[name="rejectJust"] {
    margin: 2% 34% 0 34%;
    padding: 0.2em;
    width: 32%;
    /* border-radius: 0.5em; */
    outline: none;
    border-width: 0 0 0.2em 0;
    border-color: var(--color-2);
}

.pop-up .reveal-div textarea[name="rejectDesc"] {
    border-radius: 0.5em;
    outline-color: var(--color-2);
}

.project-profile-display {
    width: 30em;
    height: 16.88em;
    border: solid 0.13em var(--color-2);
    background-position: center;
    background-size: cover;
}

/* If only the one next button then uncomment below */

/* .post-body .next-step .rev-div {
    float: right;
}

.post-body .next-step:after {
    clear: both;
    content: "";
    display: block;
    padding: 0 0 3.13em 0;
} */


/* --------------------------------- Register Page/Login --------------------------------- */

.form-div {
    margin: 4em auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: rgba(10, 207, 131, 0.2);
    background-image: url("../images/welcome\ home.png"); */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 10%;
    border-radius: 3em;
}

.form {
    margin: 3em 0 6em 0;
    padding: 1em;
    border: 0 solid;
    background-color: rgba(255, 255, 255);
    border-radius: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 31.25em;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
}

.form .prompt a {
    text-decoration: none;
    color: var(--color-2);
    font-weight: bold;
}

.form .prompt a:hover {
    text-decoration: underline;
}

.form > div {
    padding: 1.25em 0 0 0;
    width: 70%;
}

.form > * h4 {
    margin: 0 0 0.31em 0 ;
    width: 100%;
}

.form > * input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.25em 0.4em;
    /* border-radius: 0.63em; */
    border-color: var(--color-2);
    border-width: 0 0 0.2em 0;
    outline: none;
    /* font-family: 'Montserrat', Helvetica, Arial, sans-serif; */
}

.form .check {
    display: flex;
    align-items: center;
    padding: 0;
    grid-gap: 1em;
}

.form .check input {
    width: 10%;
    appearance: none;
    background-color: #fff;
    font: inherit;
    color: var(--color-2);
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--color-2);
    border-radius: 0.4em;
    display: grid;
    place-content: center;
    transition: background-color 120ms;
}

.form .check input::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--color-3);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
  
.form .check input:checked::before {
    transform: scale(1);
}

.form .check input:checked {
    transition: background-color 120ms;
    background-color: var(--color-2);
}

.form .check p {
    font-size: small;
    width: 90%;
}

.form .submit button {
    margin: 0.63em 0 1.25em 0;
    padding: 0.63em;
    float: right;
}

button[class="upload"] {
    padding: 0.13em;
}

button[class="upload"],
.form .submit button {
    width: 6.25em;
    border-radius: 0.63em;
    color: var(--color-3);
    background-color: var(--color-2);
    border-color: var(--color-2);
}

.form .submit button:hover {
    color: var(--color-2);
    background-color: var(--color-3);
}

input[type="file"]::-webkit-file-upload-button {
    display: none;
}

.post-step-1-padding.reference input[type="file"] {
    color: var(--color-3);
}

input[type="file"]::before {
    content: 'Choose file';
    display: inline-block;
    border: 0.1em solid var(--color-2);
    border-radius: 0.5em;
    padding: 0.34em 0.5em;
    cursor: pointer;
    font-weight: 700;
    margin: 0 1em 0 0;
    color: var(--color-2);
}

input[type="file"]:hover::before {
    border-color: var(--color-5);
    color: var(--color-5);
}

input[type="file"]:active::before {
    background-color: var(--color-2);
    color: white;
    border-color: var(--color-2);
}

.error-msg {
    font-size: 0.88em;
    color: #b32222;
    padding: 0.63em 0.94em;
    text-align: center;
    width: fit-content;
    max-width: 90%;
    background-color: #fcc2c2;
    border-radius:  0.63em;
    margin: 0.63em auto;
}

p.error-msg.left {
    margin: 0.63em auto 0.63em 0;
}

p.error-msg.right {
    margin: 0.63em 0 0.63em auto;
}

p.error-msg.scene-title-error {
    margin: 0.63em 0.5em;
}

.error-msg:empty {
    background-color: var(--color-3);
    display: none;
}

.form-div .form p {
    width: 85%;
    text-align: center;
}

.form-div .form div p {
    width: 100%;
}


/* --------------------------------- About Us --------------------------------- */




/* --------------------------------- FAQs / How it Works --------------------------------- */

.faq-title,
.hiw .titles {
    text-align: center;
}

.all-faq,
.hiw {
    margin: 0 5% 3em 5%;
}

.faq .question[data-toggle='plus']::before,
.hiw .description[data-toggle='plus']::after,
.faq .question[data-toggle='minus']::before,
.hiw .description[data-toggle='minus']::after {
    font-family: "Font Awesome 5 Free";
    width: 1em;
    font-weight: bold;
}

.faq .question[data-toggle='plus']::before,
.hiw .description[data-toggle='plus']::after {
    content: "\f055";
}

.faq .question[data-toggle='minus']::before,
.hiw .description[data-toggle='minus']::after {
    content: "\f056";
}

/* .faq .qa-section:not(:first-child) .qa-border,
.hiw .hiw-producer:not(:first-child) .hiw-border,
.hiw .hiw-artist:not(:first-child) .hiw-border {
    margin: 0 2em;
    height: 0;
    border-color: var(--color-2);
    border-width: 0.15em 0 0 0;
    border-style: solid;
} */

.faq .qa-section:not(:first-child) {
    border-width: 0.15em 0 0 0;
    border-style: solid;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-2), rgba(0, 0, 0, 0)) 1;
    /* border-image: linear-gradient(to right, var(--color-2), var(--color-2)) 1; */
}

/* .faq {
    display: grid;
    grid-template-columns: repeat(auto-fill, 40%);
    grid-gap: 20%;
} */

.faq .question,
.faq .answer,
.hiw .description,
.hiw .example {
    border: 0;
    background-color: var(--color-3);
}

.faq .answer,
.hiw .example {
    padding-top: 0;
    padding: 0 5% 1em 5%;
    display: none;
    flex-direction: column;
}

.faq .question,
.hiw .description {
    font-size: 1.2em;
    /* font-family: 'Montserrat', Helvetica, Arial, sans-serif; */
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 1em 0;
    grid-gap: 1em;
    align-items: center;
}

.faq .question:hover,
.hiw .description:hover {
    color: var(--color-2)
}

.additional-q {
    font-size: smaller;
    text-align: right;
    margin: 0 2em;
}

.hiw .titles {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.hiw .titles button {
    font-size: 2em;
    width: 6em;
    background-color: var(--color-3);
    border-width: 0 0 0.2em 0;
    border-style: solid;
    padding: 0.5em;
}

.hiw .titles button[data-toggle='on']:hover,
.hiw .titles button[data-toggle='off']:hover {
    border-color: var(--color-2);
}

.hiw .titles button[data-toggle='on'] {
    border-color: var(--color-1);
}

.hiw .titles button[data-toggle='off'] {
    border-color: var(--color-3);
}

.hiw-producer,
.hiw-artist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hiw-artist {
    display: none;
}

.hiw .hiw-step {
    width: 100%;
}

.hiw .hiw-step img {
    margin: 0 auto;
}

/* 
how it works 2
*/

.hiw2 {
    margin: 2em 5% 2em 5%;
}

.hiw2 .background-arrow {
    position: relative;
}

.hiw2 .background-arrow-pic {
    position: absolute;
    /* top: 50%; */
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.hiw2 .hiw2-part {
    width: 50%;
    text-align: center;
}

.hiw2 .hiw2-part2 {
    margin-left: auto;
}

.hiw2 .hiw2-part4 {
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------------- Contact Us --------------------------------- */

.contact-form {
    display: flex;
    flex-direction: column;
    margin: 0 15%;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
    margin: 0.5em 0;
    font-size: large;
    padding: 0.7em 1em;
    resize: none;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    border-radius: 0.5em;
    border: 0.15em solid var(--color-4);
    outline-color: var(--color-2);
}

.contact-form .contact-send {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.contact-form .contact-send button {
    width: 8em;
    font-size: medium;
    background-color: var(--color-2);
    border-color: var(--color-2);
    color: white;
}

.contact-form .additional-q {
    margin: 1em 0;
}


/* --------------------------------- Feedback Form --------------------------------- */



.feedback-form {
    --transition-time: 1.5s;

    position: fixed;
    background: white;
    padding: 0 1em;
    bottom: 2%;
    right: 2%;
    width: 15em;
    margin: 0;
    border-radius: 1em;
    box-shadow: 0 0 1em rgb(0, 0, 0, 0.2);
    transition: var(--transition-time);
}

.feedback-form:hover {
    padding: 2em;
    box-shadow: 0 0 1em rgb(0, 0, 0, 0.6);
    transition: var(--transition-time);
}

.feedback-form h1 {
    font-size: 1.2em;
    text-align: center;
    transition: var(--transition-time);
}

.feedback-form textarea {
    height: 0;
    padding: 0 1em;
    opacity: 0;
    margin: 0;
    border-width: 0;
    transition: var(--transition-time);
    font-size: 1em;
}

.feedback-form:hover > textarea {
    height: 15em;
    padding: 1em;
    opacity: 1;
    margin: 0.5em 0;
    border-width: 0.15em;
    transition: var(--transition-time);
}

.feedback-form .contact-send {
    height: 0;
    transition: var(--transition-time);
}

.feedback-form:hover > .contact-send {
    height: 3.875em;
    transition: 2s;
}

.feedback-form .contact-send button {
    height: 0;
    padding: 0 1em;
    border-width: 0;
    margin: 0;
    opacity: 0;
    transition: var(--transition-time);
}

.feedback-form:hover > .contact-send button {
    height: 3em;
    padding: 0.75em 1em;
    border-width: 0.15em;
    margin: 0.5em 0;
    opacity: 1;
    transition: var(--transition-time);
}

/* --------------------------------- Terms of Use --------------------------------- */

.tou {
    padding: 0 20%;
    background-image: url("../images/climbing bunny 1.png"), url("../images/climbing bunny 2.png"), url("../images/climbing bunny 3.png"), url("../images/climbing bunny 4.png");
    background-position: 0 0, 0 33%, 0 66%, 0 100%;
    background-repeat: no-repeat;
    /* line-height: 150%; */
    margin-bottom: 3em;
}


/* --------------------------------- 404 --------------------------------- */

.four04 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 1em;
}


/* --------------------------------- test --------------------------------- */

.test {
    margin: 2% 5%;
}

.test .heading:hover {
    cursor: pointer;
}

.test .pass {
    color: rgb(14, 179, 14);
}

.test .fail {
    color: red;
}

.test .function {
    margin: 0 5%;
}

.test .results {
    display: flex;
    margin: 0 5%;
}