:root {
    --brand-primary: #33344a;
    --brand-primary-light: #5c5e8f;
    --brand-primary-lighter: #8889b2;
    --brand-text: #fffffd;
    --brand-text-dark: #33344a;
    --brand-accent: #d87f53;
    --brand-accent-light: #fbab83;
    --brand-background-dark: var(--brand-primary);
    --brand-background-light: #fffffd;

    font-size: calc(15px + 0.390625vw);

    scroll-behavior: smooth;
    overflow-x: hidden;
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}


.flex-row {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.text-accent {
    color: var(--brand-accent)
}

.text-accent-light {
    color: var(--brand-accent-light)
}

.text-dark {
    color: var(--brand-text-dark)
}

.text-align-right {
    text-align: right;
}

.flex-justify-centre {
    justify-content: center;
}

.flex-align-centre {
    align-items: center;
}

.centre-items {
    display: grid;
    place-items: center;
}

.page404 {
    a {
        color: var(--brand-accent);
        cursor: pointer;
    }

    a:visited {
        color: var(--brand-accent)
    }
}

body {
    width: 100vw;
    height: 100dvh;

    padding: 0px;
    margin: 0px;

    background-color: var(--brand-background-dark);
    color: var(--brand-text);

    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}



main {

    display: flex;
    flex-direction: column;
    justify-content: center;

    section {
        padding-inline: clamp(1em, 10vw, 10em);
        padding-bottom: 5em;
    }
}

#section-opening {
    justify-content: space-evenly;
    text-wrap: pretty;
    font-size: clamp(1em, calc(0.8em + 2vw), 6em);
    padding-top: 4em;
    padding-bottom: 4em;
    gap: 5em;

    * {
        display: flex;
        align-items: center;
        flex-grow: 50%;
    }
}

#section-about {

    display: flex;
    gap: clamp(1em, 5vw, 5em);
    align-items: center;
    justify-content: center;

    font-size: 1.3em;


    * {
        flex-basis: 50%;
    }

    img {
        width: 30%;
        aspect-ratio: 1/1;
        object-fit: cover;
        object-position: top;
        border-radius: 1em;
        box-shadow: -5em 10em 1em rgb(0, 0, 0, 0.5);
    }


}

#section-portfolio {
    background-color: var(--brand-background-light);
    border-top: var(--brand-accent) 0.5em solid;
    border-bottom: var(--brand-accent) 0.5em solid;
    display: flex;
    gap: 0.8em;
    justify-content: center;
    flex-wrap: wrap;

    padding-top: 5em;
    padding-inline: 2em;

    .portfolio-card {
        background-color: var(--brand-background-light);
        border: var(--brand-accent) 0.4em solid;
        border-radius: 0.5em;
        width: clamp(15em, 29%, 30em);
        color: var(--brand-primary-light);
        padding: 1em;
        padding-bottom: 0em;
        font-size: 1rem;
        text-decoration: none;


        display: flex;
        flex-direction: column;
        justify-content: space-between;

        transition: box-shadow 0.5s;

        :last-child {
            justify-self: flex-end;
        }

        h1 {
            font-size: 1.5rem;
            line-height: .5em;
            text-decoration: underline;
        }

        h2 {
            font-size: 1rem;
            color: var(--brand-primary-lighter);
            text-decoration: none;
        }

        img {
            width: auto;
            aspect-ratio: initial;
            border-radius: 0.5em;
        }

        a {
            color: unset;
            text-align: unset;
            text-decoration: none;

            :visited {
                color: unset;
                text-align: unset;
            }

            :any-link {
                text-decoration: none;
            }
        }
    }

    .portfolio-card:nth-child(even) {
        border-color: var(--brand-primary-light);

        h1 {
            color: var(--brand-accent)
        }
    }

    .portfolio-descriptive-card {
        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        cursor: unset;

        padding-bottom: 1em;

        h1 {
            text-decoration: none;
        }


    }
}

.portfolio-card:hover {
    box-shadow: 0.2em 0.2em 10px rgb(0, 0, 0, 0.5);
    cursor: pointer;
}

#skills-heading {
    text-align: center;
    padding-bottom: 1em;
}

#skills-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    gap: 2em;
    justify-content: center;
    text-align: center;
    font-size: 2em;
    font-style: italic;
    transition: color 1s;
    padding-inline-start: 0px;

    :hover {
        color: var(--brand-accent);
        transition: color 0.2s ease;
    }
}

#section-contact {
    text-align: center;
    padding-top: 1em;

    font-size: 1.2em;


    h1 {
        font-size: 2.5rem
    }

}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4em;
    background-color: var(--brand-background-light);
    color: var(--brand-primary-light);
    font-family: Arial, Helvetica, sans-serif;
    border-top: var(--brand-accent) 0.2em solid;

    .material-symbols-rounded {
        transform: translateY(0.2em)
    }

    a {
        color: var(--brand-accent);
        cursor: pointer;
    }

    a:visited {
        color: var(--brand-accent)
    }
}

@media screen and (max-width: 600px) {
    #section-opening {
        flex-direction: column;
        gap: 0px;
    }

    #section-about {
        flex-direction: column;
    }

    #skills-list {
        display: block;
        line-height: 1.3em;
    }

}

.project-hubmenu {
    padding-top: 4em;
}

.project-title {
    padding-top: 4em;
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    h1 {
        font-size: 3em
    }


    h2 {
        color: var(--brand-accent);
        font-size: 2em;
    }

    img {
        width: max(60%, 30em);
        border-radius: 0.3em;
        box-shadow: 0.4em 0.4em 10px rgb(0, 0, 0, 0.5);
    }
}

.returnLink {

    .material-symbols-rounded {
        padding-inline-end: .5em;
        position: relative;
        top: 0.22em;
    }

    a {
        display: block;

        transition-duration: 0.5s;

        color: unset;

        :visited {
            color: unset;
        }
    }

    a:hover {
        transform: translateX(-10px);
        transition: transform 0.5s ease;
    }
}

.project-description {
    border-top: var(--brand-accent) 0.5em solid;
    border-bottom: var(--brand-accent) 0.5em solid;
    background-color: var(--brand-background-light);
    color: var(--brand-text-dark);
    padding-top: 1em;
    padding-bottom: 2em;
    text-align: justify;
}

.project-images {
    display: flex;
    gap: 1em;
    padding-top: 3em;
    flex-wrap: wrap;

    transition-duration: 0.5s;

    justify-content: center;
    padding-inline: 1em;

    img {
        object-fit: cover;
        max-height: 20em;
        border-radius: 0.2em;
        max-width: 90%;
    }

    img:hover {
        box-shadow: 0.2em 0.2em 10px rgb(0, 0, 0, 0.5);
        transition-duration: 0.3s;
    }
}

#section-examples {
    padding-top: 1em;
    background-color: var(--brand-background-dark);
    padding-top: 3em;
    display: flex;
    flex-direction: column;

    #section-example-prompt,
    #section-example-prompt-mob {
        text-align: center;
        width: 100%;
        margin-bottom: 1em;
        font-style: italic;
    }

    #section-example-prompt-mob {
        display: none;
    }
        
    .example-header-wrapper {
        position: absolute;
        height: 100%;
        left: -1.5em;
        top: .5em;
        font-size: 80%;
        
        /* @supports (writing-mode: sideways-lr) { */
            h2 {
                /* writing-mode: sideways-lr; */
                position: sticky;
                top: 1em;
                margin-bottom: 4em;
                margin-top: 2em;
                text-wrap: nowrap;
                writing-mode: vertical-lr;
                transform: rotate(180deg); /* optional depending on desired direction */
            }
        /* } */
        
    }

    .example-set {
        display: flex;
        gap: 2em;
        flex-wrap: wrap;
        position: relative;
        padding-inline: clamp(1em, 10vw, 10em);
        padding-bottom: 3em;
        padding-top: 2em;

        border-bottom: 2px solid var(--brand-background-light);

        transition-duration: 0.5s;

        justify-content: center;
        padding-inline: 1em;

        :nth-child(0) {
            padding-top: 0em;
        }

        figure {
            display: flex;
            position: relative;
            max-width: 45%;
            margin: 0px;
        }

        figure {
            figcaption {
                position: absolute;
                width: fit-content;
                font-size: 0.8em;
                left: 5px;
                bottom: 5px;
                opacity: 0;
                transition-duration: .5s;
                cursor: default;
            }

            img {
                display: block;
                width: 100%;
                object-fit: cover;
                /* max-height: em; */
                border-radius: 0.2em;
                box-shadow: 0.2em 0.2em 10px rgb(0, 0, 0, 0.5);
                transition-duration: 0.3s;
                /* background-color: black; */
            }
        }

        figure:hover>img, figure:focus>img {
            box-shadow: -0em 0.4em 10px rgb(0, 0, 0, 0.5);
            transition-duration: 0.3s;
            opacity: 0.2;
        }

        figure:hover>figcaption, figure:focus>figcaption {
            opacity: 1;
            transition-duration: .5s;
        }

        figcaption {
            padding: .5em;
        }
    }
}


#scrollText {
    position: relative;
    animation: bgTextScroll 5s linear 0s infinite;
}

@keyframes bgTextScroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-20%);
    }
}


@media screen and (max-width: 600px) {
    #section-about {
        img {
            width: 100%;
        }
    }

    .project-title {
        flex-direction: column;

        align-items: unset;

        img {
            width: 100%;
        }

        h1 {
            font-size: 2em
        }

        h2,
        h3 {
            font-size: 1em;
        }

    }

    .project-images {
        padding-inline: 5vw;
        gap: 2em;

        img {
            max-height: unset;
            max-width: 90%;
        }
    }

    /* .example-images {
            padding-inline: 5vw;
            gap: 2em;

            img {
                max-height: unset;
                max-width: 90%;
            }
        } */

    #section-examples {
        .example-set {
            gap: 1em;
            transition-duration: 0.5s;
            justify-content: center;
            padding-inline: 1em;

            .example-header-wrapper {
                display: unset;
                font-size: 60%;
                left: -2em;
                top: .5em;
            }

            figure {
                display: flex;
                position: relative;
                max-width: 100%;
                margin: 0px;
            }

        }

        #section-example-prompt {
            display: none;
        }

        #section-example-prompt-mob {
            display: block;
        }
    }
}