/* Portfolio-specific adjustments layered on top of Forty by HTML5 UP. */

:root {
    --portfolio-accent: #e62828;
    --portfolio-bg: #242943;
    --portfolio-muted: rgba(244, 244, 255, 0.72);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--portfolio-bg);
    color: #ffffff;
}

a {
    text-decoration: none;
}

#header {
    min-width: 0;
}

#header nav {
    background: transparent;
    border: 0;
}

#header .logo {
    min-width: 0;
    white-space: nowrap;
}

#header .logo span {
    color: var(--portfolio-accent);
}

#header nav a {
    color: var(--portfolio-accent);
}

#banner {
    background-position: center 35%;
}

#banner:after {
    background: linear-gradient(90deg, rgba(36, 41, 67, 0.96), rgba(36, 41, 67, 0.82));
}

#banner .content {
    gap: 1.5em;
}

#banner .content p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 52rem;
}

#banner .content .actions {
    flex-shrink: 0;
}

.button.primary,
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary {
    background-color: var(--portfolio-accent);
}

.button.primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover {
    background-color: #ff3d3d;
}

.tiles article {
    isolation: isolate;
}

.tiles article:after {
    background: linear-gradient(135deg, rgba(8, 11, 28, 0.46), rgba(8, 11, 28, 0.08));
}

.tiles article header.major p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 28rem;
}

.tiles article h3 {
    margin-bottom: 0.35em;
}

.about-intro {
    align-items: center;
    display: grid;
    gap: 2.5em;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
}

.about-intro p {
    color: var(--portfolio-muted);
    max-width: 48rem;
}

.about-photo {
    aspect-ratio: 1;
    border: solid 1px rgba(255, 255, 255, 0.18);
    display: block;
    overflow: hidden;
}

.about-photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.portfolio-project-banner .content p {
    max-width: 46rem;
}

.portfolio-project-image {
    background: rgba(255, 255, 255, 0.04);
    padding: 1rem;
}

.portfolio-project-image img {
    max-height: 28rem;
    object-fit: contain;
}

.portfolio-gallery {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 2em;
}

.portfolio-gallery .image {
    background: rgba(255, 255, 255, 0.04);
    display: block;
    margin: 0;
}

.portfolio-gallery img {
    aspect-ratio: 16 / 9;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.resume-frame {
    border: 0;
    display: block;
    height: 90vh;
    min-height: 42rem;
    width: 100%;
}

#footer .copyright a {
    color: inherit;
}

#menu {
    overflow-x: hidden;
}

#menu .inner {
    overflow-x: hidden;
    width: min(24rem, calc(100vw - 3rem));
}

#menu .links .menu-group {
    padding: 0;
}

#menu .links .menu-group details {
    border-top: solid 1px rgba(212, 212, 255, 0.1);
}

#menu .links .menu-group summary {
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.25em;
    line-height: 4em;
    list-style: none;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

#menu .links .menu-group summary::-webkit-details-marker {
    display: none;
}

#menu .links .menu-group summary::marker {
    content: "";
}

#menu .links .menu-group summary::after {
    color: var(--portfolio-accent);
    content: "+";
    display: inline-block;
    margin-left: 0.75em;
}

#menu .links .menu-group details[open] summary::after {
    content: "-";
}

#menu .links .menu-group ul {
    list-style: none;
    margin: -0.5em 0 1em;
    padding: 0;
}

#menu .links .menu-group ul li {
    border: 0;
    padding: 0;
}

#menu .links .menu-group ul a {
    border: 0;
    color: rgba(255, 255, 255, 0.74);
    display: block;
    font-size: 0.72em;
    letter-spacing: 0.18em;
    line-height: 2.8em;
    text-transform: uppercase;
}

@media screen and (max-width: 736px) {
    #banner .content {
        gap: 0;
    }

    .about-intro {
        grid-template-columns: 1fr;
    }

    .about-photo {
        max-width: 14rem;
    }

    .portfolio-gallery {
        grid-template-columns: 1fr;
    }

    .resume-frame {
        min-height: 34rem;
    }
}

@media screen and (max-width: 480px) {
    #header .logo {
        font-size: 0.72em;
        letter-spacing: 0.18em;
    }

    #menu .inner {
        width: calc(100vw - 2rem);
    }
}