/* for tablets in portrait orientation */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
    .debug #tablets-portrait {
        display: flex;
        color: white;
        background-color: purple;
    }

    body {
        > header,
        > footer {
            & > nav > ul > li {
                font-size: 1.5em;
            }
        }
    }

    #home {
        padding-left: clamp(1em, 3.5cqw, 3em);
        padding-right: clamp(1em, 3.5cqw, 3em);

        & #titles h3 {
            flex-direction: column;

            &:last-of-type {
                align-items: flex-end;
                row-gap: clamp(0.5em, 1.5cqh, 1em);
            }

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

            &:first-of-type div span {
                margin-right: clamp(0.25em, 1.5cqw, 1em);
            }

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

            &:last-of-type div span {
                margin-right: clamp(0.25em, 1.5cqw, 2em);
            }
        }

        & #titles .delimiter {
            display: none;
        }
    }

    #about {
        width: 100%;
        padding: 1em;

        & > header {
            & h1 {
                flex-direction: column;
                justify-content: space-between;
                font-size: clamp(3.5rem, 6.5vw, 10rem);
                line-height: 1.25;

                & div {
                    width: 100%;
                }

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

            & h2 {
                margin: 1rem 0;
                color: #f8e3bb;
                font-family: "Praise";
                font-size: clamp(3rem, 4vw, 7rem);
                text-align: center;
            }
        }

        & > main {
            & .value-panel {
                min-width: 0;

                & h3 {
                    font-size: clamp(2.125rem, 3.9375vw, 6.25rem);
                    line-height: clamp(2.5rem, 4.375vw, 7rem);
                }

                & p {
                    margin-top: 1rem;
                    margin-bottom: 2rem;
                    font-size: clamp(1.125rem, 1.05vw, 1.625rem);
                    line-height: 1.5;
                    hyphens: auto;
                }

                & img {
                    width: 90%;
                }
            }

            & #curiosity h3 {
                font-size: clamp(2.5rem, 5vw, 7.5rem);
            }

            & #creativity {
                & h3 {
                    font-size: clamp(2.0675rem, 3.85vw, 6.125rem);
                }

                & img {
                    width: 90%;
                }
            }

            & #empathy h3 {
                font-size: clamp(2.75rem, 5vw, 7.5rem);
            }
        }
    }

    #projects {
        display: revert;
        width: 100%;
        min-height: revert;

        & > main {
            container-type: size;
            container-name: projects-main;
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: relative;

            & > .project-card {
                width: 90%;

                &:not(.project-card-clone) {
                    display: revert;
                    position: absolute;
                    height: 100%;
                }

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

                /* To override default style */
                &:nth-child(even) {
                    flex-direction: column;
                }

                &:not(.active) h2,
                &:not(.active) .figure-card figure figcaption {
                    opacity: 0;
                }

                & h2 {
                    width: max-content;
                    margin: 0 auto;
                    margin-top: 1.25rem;
                    margin-bottom: 5rem;
                    text-align: center;

                    &::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: 1.25cqh 0 1cqh;
                        font-variation-settings: "wght" 300;
                        font-size: clamp(3rem, 7.38cqh, 5rem);
                        letter-spacing: 3cqw;
                        writing-mode: revert;
                        transition: padding-left 0.2s ease 0.4s, padding-right 0.2s ease;

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

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

                        &:hover {
                            padding-top: 1.25cqh;
                            padding-right: 1.25cqw;
                            padding-left: 2cqw;
                            transition-delay: 0s;

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

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

                & .figure-card {
                    position: revert;
                    width: revert;
                    height: 80%;
                    aspect-ratio: revert;
                    perspective: revert;

                    & figure {
                        display: revert;
                        width: revert;
                        height: 100%;
                        transform: none;
                        transition: none;
                        transform-style: unset;

                        &::after {
                            display: none;
                        }

                        & > * {
                            position: static;
                            width: revert;
                            height: revert;
                            -webkit-backface-visibility: revert;
                            backface-visibility: revert;
                            transition: border-width 0.3s ease;
                        }

                        & img {
                            z-index: 0;
                            width: 80%;
                            height: auto;
                            transition: top 0.5s ease, left 0.5s ease, z-index 0.5s ease;
                        }

                        & figcaption {
                            display: block;
                            position: relative;
                            z-index: auto;
                            width: 100%;
                            height: auto;
                            margin-top: 12cqh;
                            color: var(--curiosity-color);
                            font-size: clamp(1rem, 2.25cqh, 2rem);
                            line-height: clamp(2cqh, 3.5cqh, 5cqh);
                            background-color: revert;
                            interpolate-size: allow-keywords;
                            transform: none;
                            transition: opacity 1s ease, height 5s ease;
                        }
                    }

                    &.flipped figure {
                        transform: none;
                    }
                }
            }
        }

        #project-1 {
            & a {
                z-index: 10;
            }

            & img {
                position: relative;
                top: 9.44cqh;
                left: 17.86cqw;
                z-index: 10;
            }
        }
        #project-2 {
            & a {
                z-index: 8;
            }

            & img {
                position: relative;
                top: 5cqh;
                left: 11.9cqw;
                z-index: 8;
            }
        }
        #project-3 {
            & a {
                z-index: 6;
            }

            & img {
                position: relative;
                top: 0.57cqh;
                left: 5.95cqw;
                z-index: 6;
            }
        }
        #project-4 {
            & a {
                z-index: 4;
            }

            & img {
                position: relative;
                top: -3.86cqh;
                left: 0cqw;
                z-index: 4;
            }
        }
    }

    #resume {
        flex-direction: column;

        & > header {
            flex-direction: column;
            height: revert;
            font-size: calc((3.99cqw + 3cqh) / 2);

            & > nav {
                & > ul {
                    flex-direction: row;

                    & li {
                        padding: 0.125em 0;
                        font-size: clamp(0.35em, 0.5em, 0.85em);
                        writing-mode: revert;
                        border-width: 2px;
                        transform: none;

                        &.selected-tab {
                            border-bottom: none;
                        }

                        &:first-child {
                            border-left: none;
                        }

                        &:last-child {
                            border-right: none;
                        }

                        &#summary-tab {
                            border-bottom-width: 2px;

                            &.selected-tab {
                                border-bottom: none;
                            }
                        }

                        &#professional-experience-tab {
                            border-top-width: 2px;
                        }

                        & .tab-icon {
                            transform: none;

                            & > img {
                                width: 20%;
                            }
                        }
                    }
                }
            }

            & > h1 {
                width: revert;
                height: 2em;
                font-size: clamp(0.5em, 0.85em, 1.5em);
                white-space: nowrap;
                writing-mode: revert;
                border: none;
                transform: none;

                &:has(span) {
                    flex-direction: row;

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

                &.display-professional-experience {
                    letter-spacing: 0.35em;
                }
            }
        }

        & > main {
            & .resume-section {
                &#summary {
                    flex-direction: column;
                    font-size: clamp(1.5rem, 3.5cqw, 3rem);

                    & p {
                        width: 100%;
                        padding: 1em;
                        line-height: clamp(1.5em, 2em, 2.5em);
                    }

                    & .web-technology-logos {
                        flex-direction: row;
                        padding: 2.25em 0;

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

                            & > li {
                                & img {
                                    height: 2.75em;
                                    padding: 0 1.4em;

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

                &#education {
                    padding-top: 0.75em;
                    /* font-size: clamp(2rem, 6cqw, 2.5rem); */
                    font-size: 4cqw;

                    & > ul {
                        font-size: clamp(0.35em, 0.6em, 0.85em);

                        & > li.academics {
                            margin-bottom: clamp(1em, 3em, 5em);

                            & > details {
                                & > summary {
                                    white-space: nowrap;

                                    & > .college {
                                        & > .college-name {
                                            margin-right: 0.5em;
                                            font-size: clamp(1em, 1.125em, 1.25em);
                                            font-size: 1.25em;
                                        }

                                        & > .college-location {
                                            font-size: clamp(0.45em, 0.85em, 1em);
                                            font-weight: 300;
                                        }
                                    }

                                    & > .graduation {
                                        font-size: clamp(0.25em, 1em, 1.25em);
                                        font-weight: 500;
                                    }
                                }

                                & > ul.education-details {
                                    & > li {
                                        margin-top: clamp(0.2em, 0.35em, 0.5em);

                                        &.academic-credential {
                                            grid-column: 1 / 3;
                                            display: flex;
                                            justify-content: space-between;
                                            font-size: clamp(1em, 1.175em, 1.5em);
                                            font-size: 1.25em;
                                        }

                                        &.major {
                                            margin-top: 0.1em;
                                            font-size: clamp(1em, 1.25em, 1.5em);
                                        }

                                        &.gpa {
                                            grid-row: 1;
                                            grid-column: 3;
                                            font-size: clamp(1em, 1.25em, 1.5em);
                                        }

                                        &.honors {
                                            grid-column: 2 / 4;
                                            font-size: clamp(1em, 1.125em, 1.5em);
                                            text-align: right;
                                        }

                                        &.membership {
                                            grid-column: 2 / 4;
                                            font-size: clamp(1em, 1.125em, 1.5em);
                                            text-align: right;
                                        }

                                        &.college-logo {
                                            width: 200%;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                &#relevant-experience {
                    & > ul {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        justify-content: space-between;
                        align-items: flex-start;
                        width: 100%;
                        font-size: calc((3.99cqw + 3cqh) / 2);

                        & > li {
                            width: 100%;
                            margin-bottom: clamp(0.5em, 0.75em, 1em);

                            & details {
                                & summary {
                                    font-size: clamp(0.75em, 1em, 1.25em);

                                    & span {
                                        font-weight: 400;
                                    }
                                }

                                & .project-details {
                                    height: fit-content;

                                    & ul.web-technologies-used {
                                        display: grid;
                                        grid-template-rows: repeat(2, 1fr);
                                        grid-template-columns: repeat(2, 1fr);

                                        & li img {
                                            height: 1.5em;
                                        }
                                    }

                                    & p {
                                        height: max-content;
                                        overflow-y: auto;
                                        font-size: clamp(0.75em, 0.8em, 1.15em);

                                        & > img {
                                            display: none;
                                        }
                                    }
                                }

                                &:not([open]) > summary {
                                    justify-content: flex-start;

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

                                    &::after {
                                        content: "";
                                        width: 10cqh;
                                        height: 10cqh;
                                        margin-top: -3cqh;
                                        margin-left: 1em;
                                        background-size: contain;
                                        background-repeat: no-repeat;
                                    }

                                    &.liberty::after {
                                        background-image: url("/images/resume/projects/statue_of_liberty.png");
                                    }

                                    &.calendar::after {
                                        background-image: url("/images/resume/projects/calendar.png");
                                    }
                                    &.flight::after {
                                        background-image: url("/images/resume/projects/airplane.png");
                                    }

                                    &.wordpress::after {
                                        background-image: url("/images/resume/projects/wordpress_plugin.png");
                                    }
                                    &.pirate::after {
                                        background-image: url("/images/resume/projects/pirate_ship_and_map.png");
                                    }
                                }
                            }
                        }
                    }
                }

                &#professional-experience {
                    container-type: size;
                    font-size: calc((2.99cqw + 2.25cqh) / 2);

                    & > ul {
                        flex-wrap: nowrap;
                        justify-content: space-between;

                        & > li.job {
                            flex: 0 0 auto;
                            width: 100%;
                            height: fit-content;
                            max-height: 25cqh;
                            overflow-y: auto;
                            margin-bottom: 0;

                            &:has(details[open]) {
                                padding-bottom: clamp(0.25em, 0.4em, 0.65em);
                            }

                            &:has(details[name]:not([open])) > img {
                                visibility: visible;
                            }

                            & > details {
                                width: 100cqw;
                                height: 100%;
                                overflow: auto;

                                & > summary {
                                    position: sticky;
                                    top: 0;
                                    z-index: 100;
                                    margin-top: -5px;
                                    /* color: var(--empathy-color); */
                                    font-size: clamp(0.75em, 1em, 1.25em);
                                    white-space: nowrap;
                                    background-color: var(--dark-background);
                                    box-shadow: 0px 5px 0px 0px var(--dark-background);

                                    & > span.employment-dates {
                                        display: flex;
                                        align-items: flex-end;
                                        /* color: var(--empathy-color); */
                                        font-size: clamp(0.65em, 0.8em, 0.95em);
                                        font-weight: 200;
                                        font-variation-settings: "wght" 200;
                                    }
                                }

                                & > ul.job-details {
                                    position: relative;
                                    height: revert;
                                    overflow-y: visible;
                                    font-size: clamp(0.25em, 0.5em, 0.9em);
                                    background-color: var(--dark-background);

                                    & > li {
                                        &.employer {
                                            position: sticky;
                                            top: 1.75em;
                                            z-index: 100;
                                            height: 1.75em;
                                            font-size: clamp(1.25em, 1.5em, 1.65em);
                                            background-color: var(--dark-background);
                                            border-bottom: 1px solid var(--empathy-color);

                                            & span.employer-name {
                                                flex-direction: row;

                                                & span.parent-company::before {
                                                    content: ", ";
                                                }
                                            }
                                        }

                                        &.job-duties {
                                            flex: 1 1 auto;
                                            min-height: 0;
                                            align-items: flex-start;
                                            height: 100%;
                                            overflow-y: auto;

                                            & > ul {
                                                display: flex;
                                                flex-direction: column;
                                                height: 100%;
                                                column-count: 1;

                                                & > li {
                                                    font-size: clamp(1rem, 1.25em, 1.5em);
                                                    line-height: clamp(1.3, 1.65, 1.9);
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            & > img {
                                display: none;
                                align-self: flex-start;
                                object-fit: contain;
                                width: 20%;
                                max-width: 100%;
                                height: auto;
                            }
                        }
                    }
                }
            }
        }
    }

    #email {
        width: 100%;

        & form {
            width: 100%;

            & h2 {
                margin-bottom: clamp(2rem, 18cqh, 6rem);
                white-space: nowrap;
            }

            & fieldset {
                width: 90%;

                & .form-field {
                    & label {
                        width: 100%;                        
                    }

                    & textarea {
                        height: 20cqh;
                    }
                }

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

                    & > button {
                        margin-top: 1.25em;
                    }
                }
            }
        }
    }
}