/* For phones, portrait orientation */
@media (max-width: 599px) and (orientation: portrait) {
    body {
        /* grid-template-rows: 0.75fr 6.5fr 0.75fr; */
        /* grid-template-columns: 0.095fr 1.6fr 1.7fr 1.6fr 0.095fr; */

        .debug #phones-portrait {
            display: flex;
            background-color: aqua;
        }

        & > header,
        & > footer {
            & > nav {
                padding: 0 0.5em;

                & > ul > li {
                    font-size: clamp(1rem, 5cqw, 1.5rem);

                    & > a[href="#resume"] > span {
                        &:first-child {
                            padding-right: 0;
                            border-right: none;
                        }

                        &:last-child {
                            display: none;
                        }
                    }
                }
            }
        }

        & div.sidebar {
            z-index: 100;

            & svg.side-arrow {
                display: block;
                top: 47.5cqh;
                width: 2rem;
                opacity: 0;
                transition: opacity 0.5s ease;
                pointer-events: none;

                &.icon-tabler-circle-chevron-left {
                    left: 1cqw;
                }

                &.icon-tabler-circle-chevron-right {
                    right: 1cqw;
                }

                &.visible {
                    opacity: 1;
                    transition: opacity 0.5s ease;
                    pointer-events: all;
                }
            }
        }

        & > main {
            & > section {
                width: 100%;
            }

            & > #home {
                padding-left: clamp(0.25em, 2cqw, 3em);
                padding-right: clamp(0.25em, 2cqw, 3em);

                & #name {
                    padding-top: 20px;
                    -webkit-text-stroke: 0.5px var(--dark-background);
                }

                & #titles {
                    margin-top: 2.5px;

                    & h3 {
                        flex-direction: column;

                        &:last-of-type {
                            align-items: flex-end;
                        }

                        &:first-of-type div {
                            justify-content: flex-start;

                            & span {
                                margin-right: 0.15em;
                            }
                        }

                        &:last-of-type div {
                            justify-content: flex-end;

                            & span {
                                margin-left: 0.15em;
                            }
                        }
                    }

                    & .delimiter {
                        display: none;
                    }
                }
            }

            & > #about {
                container-type: size;
                container-name: about;
                flex: 1 1 auto;
                width: 100%;
                height: 100%;
                min-height: 100%;
                padding: calc((2cqw + 1cqh) / 2) calc((2cqw + 1cqh) / 2);

                & > header {
                    position: sticky;
                    top: 0;
                    z-index: 10;

                    & h1 {
                        flex-direction: column;
                        justify-content: space-between;
                        position: relative;
                        z-index: 10;
                        font-size: calc((9cqw + 7cqh) / 2);
                        line-height: 1.2;

                        font-variation-settings: "wght" 300;

                        & div {
                            width: 100%;

                            &:first-of-type span:last-of-type {
                                display: none;
                            }
                        }
                    }

                    & h2 {
                        color: #f8e3bb;
                        font-family: "Praise";
                        font-size: clamp(1rem, 5cqh, 3.25rem);
                        font-size: calc((8cqw + 5cqh) / 2);
                        text-align: center;
                    }
                }

                & > main {
                    display: flex;
                    flex-direction: row;
                    overflow-y: hidden;
                    scroll-snap-type: x mandatory;
                    scroll-behavior: smooth;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                    overscroll-behavior: auto;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    & .value-panel {
                        flex: 0 0 100%;
                        scroll-snap-align: start;

                        & h3 {
                            display: flex;
                            font-size: clamp(1.25rem, 8cqh, 3.25rem);
                            text-align: center !important;
                            line-height: 1.25;

                            & > svg {
                                display: inline;

                                & > text {
                                    position: relative;
                                    z-index: 100;
                                    opacity: 0;
                                    stroke: none;
                                    transition: opacity 0.6s ease;
                                }

                                &:hover text {
                                    opacity: 1;
                                }

                                & > path {
                                    vector-effect: non-scaling-stroke;
                                }

                                &.go-to-purpose {
                                    fill: var(--purpose-color);
                                    stroke: var(--purpose-accent);

                                    & > text {
                                        fill: var(--purpose-color);
                                        font-family: "Nothing You Could Do";
                                    }
                                }

                                &.go-to-curiosity {
                                    fill: var(--curiosity-color);
                                    stroke: var(--curiosity-accent);

                                    & > text {
                                        fill: var(--curiosity-color);
                                        font-family: Schoolbell;
                                    }
                                }

                                &.go-to-creativity {
                                    fill: var(--creativity-color);
                                    stroke: var(--creativity-accent);

                                    & > text {
                                        fill: var(--creativity-color);
                                        font-family: "Fredericka the Great";
                                    }
                                }

                                &.go-to-empathy {
                                    fill: var(--empathy-color);
                                    stroke: var(--empathy-accent);

                                    & > text {
                                        fill: var(--empathy-color);
                                        font-family: "Clicker Script";
                                    }
                                }
                            }
                        }

                        & h3,
                        & p {
                            flex-shrink: 0;
                        }

                        & p {
                            margin-top: 0;
                            margin-bottom: 0.5rem;
                            font-size: calc((6cqw + 3cqh) / 2);
                            line-height: 1.625;
                            text-align: left;
                            text-align-last: auto !important;
                        }

                        & img {
                            width: calc((35cqw + 25cqh) / 2);
                            margin: 0;
                            object-fit: contain;
                        }
                    }

                    & #purpose img {
                        width: calc((45cqw + 30cqh) / 2);
                        height: auto;
                    }

                    & #creativity {
                        & h3 {
                            font-weight: bold;
                        }

                        @media (max-height: 500px) {
                            & img {
                                margin-top: calc((-6cqw + -4cqh) / 2);
                            }
                        }
                    }

                    & #empathy {
                        & h3 {
                            font-size: clamp(1.25rem, 10cqh, 3.25rem);
                        }

                        & img {
                            height: 25cqh;
                        }
                    }
                }
            }

            & > #projects {
                display: revert;
                width: 90%;

                & > main {
                    container-type: size;
                    container-name: projects-main;
                    display: flex;
                    position: relative;
                    height: 100%;
                    width: 100%;
                    overflow-x: auto;
                    overflow-y: hidden;
                    scroll-snap-type: x mandatory;
                    scroll-behavior: smooth;
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    & > svg {
                        &:first-of-type {
                            left: 1cqw;
                        }

                        &:last-of-type {
                            right: 1cqw;
                        }
                    }

                    & > .project-card {
                        flex: 0 0 100%;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        row-gap: 1.5em;
                        width: 110%;
                        scroll-snap-align: start;

                        &:nth-child(odd) {
                            flex-direction: column;
                        }

                        &:nth-child(even) {
                            flex-direction: column;
                        }

                        &:nth-child(3),
                        &:nth-child(4) {
                            border-top: none;
                        }

                        &.project-card-clone {
                            display: flex;
                            flex: 0 0 auto;
                        }

                        & h2 {
                            justify-content: center;
                            align-items: revert;
                            z-index: 100;
                            height: revert;
                            margin-top: clamp(1em, 5cqb, 2em);

                            &::before,
                            &::after {
                                width: 3px;
                                height: 100%;
                                transform: scaleY(0);
                            }

                            &::before {
                                right: 0;
                                transform-origin: top;
                                transition-delay: 0s;
                            }

                            &::after {
                                transform-origin: bottom;
                                transition-delay: 0.4s;
                            }

                            &:hover::before {
                                transform: scaleY(1);
                                transition-delay: 0.4s;
                            }

                            &:hover::after {
                                transform: scaleY(1);
                                transition-delay: 0s;
                            }

                            & a {
                                display: inline-block;
                                width: revert;
                                padding: 2cqh 0 4cqh;
                                font-size: clamp(1.75rem, 10cqh, 3rem);
                                letter-spacing: 5cqw;
                                writing-mode: revert;
                                filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, 1));
                                transform: revert;
                                transition: padding-left 0.2s ease 0.4s, padding-right 0.2s ease;

                                &::before,
                                &::after {
                                    top: auto;
                                    bottom: 0;
                                    height: 2px;
                                    width: 100%;
                                    transform-origin: right;
                                    transform: scaleX(1);
                                }

                                &::before {
                                    top: 0;
                                    bottom: auto;
                                    transform: scaleX(0);
                                    transform-origin: left;
                                }

                                &:hover {
                                    padding-right: 1.75cqw;
                                    padding-bottom: 4cqh;
                                    padding-left: 3.5cqw;
                                    transition-delay: 0s;

                                    &::before {
                                        transform: scaleX(1);
                                    }
                                }
                            }
                        }

                        &:nth-child(odd) h2 a {
                            transform: revert;
                        }

                        &:nth-child(4) {
                            border-top: none;
                        }

                        &:nth-child(5) {
                            border-top: none;
                        }

                        & > .figure-card {
                            container-type: size;
                            container-name: figure-card;
                            position: absolute;
                            top: 0;
                            overflow-x: visible;
                            width: 90%;
                            height: 100%;

                            & figure {
                                position: absolute;
                                top: 0;

                                &::after {
                                    width: 20cqw;
                                    height: 20cqw;
                                }

                                & > * {
                                    width: 105%;
                                    height: auto;
                                }

                                & img {
                                    z-index: -999;
                                    height: auto;
                                }

                                & figcaption {
                                    align-items: flex-start;
                                    aspect-ratio: 16/9;
                                    padding: 0.5rem;
                                    overflow-y: auto;
                                    font-size: calc((4.96cqw + 4cqh) / 2);
                                    line-height: 1.4;
                                    text-align: left;
                                }
                            }

                            & figure > *:hover,
                            &.flipped figure > * {
                                border-width: calc((1.625cqw + 1.25cqh) / 2);
                            }
                        }
                    }
                }

                & > #carousel-progress {
                    display: flex;
                }
            }

            & > #resume {
                flex-direction: column;

                & > header {
                    flex-direction: column;
                    height: revert;

                    & > nav {
                        border-top: 1.35px solid var(--dark-background);
                        border-bottom: 0px none transparent;

                        & > ul {
                            flex-direction: row;

                            & li {
                                display: flex;
                                justify-content: center;
                                border: 0 none transparent;
                                transform: none;

                                & ~ li {
                                    border-left: 1.35px solid var(--dark-background);
                                }

                                & .tab-label {
                                    display: none;
                                }

                                & .tab-icon {
                                    display: revert;
                                    padding: clamp(0.25em, 0.35em, 0.5em) 0;

                                    & img {
                                        display: block;
                                        height: 1.5em;
                                        width: auto;
                                    }
                                }

                                &.selected-tab {
                                    border: 0 none transparent;
                                    border-bottom: 0 none transparent;

                                    &:not(#resume-tabs li:first-child) {
                                        border-left: 1.35px solid var(--dark-background);
                                    }
                                }

                                &:not(#resume-tabs li.selected-tab) {
                                    border-bottom: 1.35px solid var(--dark-background);
                                }

                                &#summary-tab {
                                    border: 0 none transparent;
                                }

                                &#professional-experience-tab {
                                    border-top: 0 none transparent;
                                }

                                & span {
                                    display: flex;
                                    justify-content: center;
                                }
                            }
                        }
                    }

                    & > h1 {
                        width: 100%;
                        height: 2em;
                        font-size: clamp(1em, 1.125em, 1.25em);
                        word-spacing: normal;
                        writing-mode: revert;
                        transform: none;
                        border-top: 0px none transparent;

                        &:has(span) {
                            flex-direction: row;
                            justify-content: space-between;
                            animation: scroll-text 10s linear infinite;

                            & > span {
                                margin-right: 1em;
                            }
                        }

                        &:nth-of-type(3) {
                            border-bottom: 2px solid var(--creativity-color);

                            &::after {
                                content: "Relevant Experience";
                                margin-left: 1em;
                                white-space: nowrap;
                            }
                        }

                        &:nth-of-type(4) {
                            border-bottom: 2px solid var(--empathy-color);

                            &::after {
                                content: "Professional Experience";
                                margin-left: 1em;
                                white-space: nowrap;
                            }
                        }
                    }
                }

                & > main {
                    & .resume-section {
                        &#summary {
                            flex-direction: column;
                            font-size: 0.9em;

                            & p {
                                width: 100%;
                                padding: 0.5em;
                                font-size: calc((6cqw + 4cqh) / 2);
                                line-height: 1.3;
                            }

                            & .web-technology-logos {
                                flex-direction: row;
                                overflow-x: hidden;
                                margin: 0 0;

                                & .logos-list {
                                    flex-direction: row;
                                    animation: logos-ticker-horizontal 15s linear infinite;

                                    & > li {
                                        & img {
                                            width: auto;
                                            height: calc((15cqw + 10cqh) / 2);
                                            padding: 0.5em 1.5em;

                                            &.featured {
                                                transform: scale(1.35);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &#education {
                            padding: 0.25em;
                            font-size: 1.25em;
                            font-size: calc((7.56cqw + 4.5cqh) / 2);

                            & > ul {
                                height: 100%;
                                justify-content: flex-start;
                                row-gap: calc((3.36cqw + 2cqh) / 2);

                                & > li.academics {
                                    flex-direction: column;

                                    &:has(img[src*="tu_logo"]) {
                                        & > details[open] {
                                            background-image: linear-gradient(rgba(65, 47, 48, 0.85), rgba(65, 47, 48, 0.85)), url("/images/resume/college_logos/tu_logo.png");
                                        }
                                    }

                                    &:has(img[src*="hcc_logo"]) {
                                        & > details[open] {
                                            background-image: linear-gradient(rgba(65, 47, 48, 0.85), rgba(65, 47, 48, 0.85)), url("/images/resume/college_logos/hcc_logo.png");
                                        }
                                    }

                                    & > details {
                                        background-repeat: no-repeat;
                                        background-size: contain;
                                        background-position: center;

                                        &:not([open]) > summary {
                                            pointer-events: all;
                                            flex-direction: row;
                                            justify-content: flex-start;
                                            align-items: flex-start;
                                            border-bottom: none;

                                            &:hover {
                                                color: var(--curiosity-color);
                                            }

                                            &::before {
                                                content: "\25B6\FE0E";
                                                margin-right: 0.5em;
                                                font-size: 0.75em;
                                            }

                                            & .college-name {
                                                white-space: normal;
                                            }

                                            & .college-location,
                                            & .graduation {
                                                display: none;
                                            }
                                        }

                                        &[open] {
                                            & > summary {
                                                flex-direction: column;
                                                flex-wrap: wrap;
                                                justify-content: flex-start;
                                                align-items: flex-start;
                                                line-height: 1.15em;

                                                & > .college {
                                                    flex-direction: column;
                                                    align-items: flex-start;

                                                    & > .college-name {
                                                        color: var(--curiosity-color);
                                                        white-space: normal;
                                                    }
                                                }

                                                & > .graduation {
                                                    font-style: italic;
                                                    line-height: 1.25em;
                                                }
                                            }
                                        }

                                        & > summary .college-name {
                                            white-space: normal;
                                        }

                                        & > ul.education-details {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: space-between;

                                            & li.academic-credential {
                                                font-size: 1.15em;
                                            }

                                            & li.major {
                                                font-size: 1.05em;
                                                text-align: right;
                                            }

                                            & li.gpa,
                                            & li.honors {
                                                justify-content: flex-start;
                                                font-size: 1em;
                                                text-align: left;
                                            }

                                            & li.membership {
                                                text-align: left;

                                                & > span {
                                                    font-size: 1em;
                                                    white-space: normal;
                                                }
                                            }
                                        }
                                    }

                                    & .college-logo {
                                        display: none;
                                    }
                                }
                            }
                        }

                        &#relevant-experience {
                            width: 100%;
                            padding: 0.15em;

                            & > ul {
                                display: flex;
                                flex-direction: column;
                                flex-wrap: nowrap;
                                align-items: flex-start;
                                justify-content: space-evenly;
                                width: 100%;
                                padding-top: 0.25em;
                                font-size: clamp(0.75rem, 7.5cqmin, 2rem);

                                & > li {
                                    height: max-content;
                                    margin-bottom: clamp(0.1em, 0.25em, 0.5em);

                                    & > details {
                                        &:not([open]) > summary {
                                            &::before {
                                                content: "\25B6\FE0E";
                                                margin-right: 0.5em;
                                                font-size: 0.75em;
                                            }
                                        }

                                        &[open] {
                                            & > summary {
                                                flex-direction: column;
                                                color: var(--creativity-color);
                                                font-size: 1.4em;

                                                & > span:last-of-type {
                                                    padding-top: 0.4em;
                                                }
                                            }
                                        }

                                        & > .project-details {
                                            & > .web-technologies-used {
                                                display: none;
                                            }

                                            & p {
                                                max-height: 40cqh;
                                                overflow-y: auto;
                                                padding-left: 0;
                                                border-left: none;

                                                & > img {
                                                    display: none;
                                                    /* width: clamp(1.75em, 4em, 6em); */
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &#professional-experience {
                            overflow: hidden;
                            padding: 0.5em 0.15em 0.15em;
                            font-size: calc((6.72cqw + 4cqh) / 2);

                            & > ul {
                                flex-wrap: nowrap;

                                & > li.job {
                                    margin-bottom: 0.35em;

                                    & > details {
                                        width: 100cqw;

                                        & > summary {
                                            align-items: flex-end;

                                            & > .job-title {
                                                font-size: 1.25em;
                                            }

                                            & > .employment-dates {
                                                padding-bottom: 0;
                                                white-space: nowrap;

                                                & > .month {
                                                    display: none;
                                                }
                                                & > abbr {
                                                    display: inline;
                                                }
                                            }
                                        }
                                        & > ul.job-details {
                                            height: 100%;
                                            padding-bottom: calc((5.04cqw + 3cqh) / 2);
                                            border-bottom: 2px solid var(--empathy-color);

                                            & > li {
                                                &.employer {
                                                    font-size: 1.35em;
                                                    border-bottom: calc((0.42cqw + 0.25cqh) / 2) solid var(--empathy-color);

                                                    & > .employer-name {
                                                        flex: 2 1 0;
                                                    }
                                                    & > .employer-location {
                                                        flex: 1 1 0;
                                                        font-size: 0.85em;
                                                        text-align: right;
                                                    }
                                                }

                                                &.job-duties {
                                                    align-items: flex-start;
                                                    overflow-y: auto;
                                                    max-height: 40cqh;

                                                    & > ul {
                                                        column-count: 1;

                                                        & > li {
                                                            font-size: 1.15em;
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        &[open] > summary {
                                            /* flex-wrap: wrap; */
                                            border-bottom: calc((0.84cqw + 0.5cqh) / 2) solid var(--empathy-color);

                                            & > .job-title {
                                                font-size: 1.25em;
                                            }

                                            & > .employment-dates {
                                                font-size: calc((4.62cqw + 2.75cqh) / 2);
                                                font-weight: 400;
                                                font-variation-settings: "wght", 200;
                                            }
                                        }

                                        &[name][open] {
                                            border-bottom: 0 none transparent;
                                        }

                                        &[name]:not([open]) {
                                            & > summary > span.job-title::before {
                                                font-size: 0.75em;
                                            }
                                        }
                                    }

                                    & > img {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            #email {
                grid-template-columns: 1fr;
                width: 100%;

                & form {
                    grid-column: 1;
                    width: 100%;
                    padding: 0;

                    & h2 {
                        grid-column: 1;
                        margin: clamp(0.75rem, 1cqh, 1rem) 0;
                        font-size: clamp(1.5rem, 3cqw, 6rem);
                        white-space: nowrap;
                    }

                    & fieldset {
                        justify-content: flex-start;
                        align-items: center;
                        width: 100%;
                        height: 75%;

                        & .form-field {
                            & label {
                                width: 90%;
                                margin-bottom: clamp(0.85rem, 2.75cqh, 2rem);
                                font-size: clamp(0.85rem, 5cqw, 1.5rem);
                                font-weight: 500;
                                font-variation-settings: "wght" 500;                                

                                /* ???? There is no <span> inside a label */
                                & span {
                                    display: none;
                                }
                            }

                            &:has(textarea) label {
                                margin-bottom: clamp(0.25rem, 1.75cqh, 0.75rem);
                            }

                            & input,
                            & textarea {
                                font-size: clamp(0.85rem, 2.5cqw, 1rem);
                            }
                        }                        

                        & > span {
                            width: 50%;

                            & button {
                                width: 100%;
                                margin-top: clamp(0.25rem, 2cqh, 1rem);
                                font-size: clamp(1rem, 2cqw, 1.5rem);
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-135%);
    }
}