/* WIDTH */
@media screen and (max-width: 1500px) {
    #page-wrapper {
        .foliage-2 {
            min-height: unset;
        }
    }
}

@media screen and (max-width: 1250px) {
    #page-wrapper {
        .foliage-2 {
            height: 100vh;
            width: auto;
            left: -15vw;
    
            &.intro-animation {
                animation: foliage-2 5s forwards 15s;
                animation-fill-mode: backwards, forwards;
            }
        }
    }
}

@media screen and (max-width: 1050px) {
    #page-wrapper {
        #about {
            .about-wrapper {
                display: block;
                overflow: auto;
                .about-content-container {
                    flex-direction: column;

                    .about-content {
                        margin-top: 50px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 968px) {
    #page-wrapper {
        .foliage-1 {
            max-width: 100vw;
        }
        .foliage-2 {
            left: -30vw;
        }
    }
}

@media screen and (max-width: 768px) {
    #page-wrapper {
        .foliage-1 {
            right: -5vw;
        }
        .foliage-2 {
            left: -45vw;
        }

        #portfolio {
            .portfolio-content {
                gap: 15px;
                .portfolio-items-container {
                    .portfolio-item-wrapper {
                        .portfolio-item {
                            padding: 10px;
                            width: 100px;
                            height: 100px;
                            &:not(:last-child) {
                                margin-bottom: 10px;
                            }
                            .portfolio-item-title {
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 680px) {
    #page-wrapper {
        #about {
            overflow-y: auto;
            .about-title {
                top: 5px;
                left: 50%;
                transform: rotate(0deg) translateX(-50%);
                font-size: 15vw;
            }

            .about-menu {
                top: 0;
                right: -140px;
                bottom: unset;
                left: unset;
                transform: unset;
                width: fit-content;
                height: 100%;
                z-index: 100;
                background: var(--about-text-color);
                padding: 5px;
                border-left: 2px solid var(--about-bg-color);
                transition: all 0.35s ease-in-out;

                &.closed {
                    .about-menu-button {
                        &:hover {
                            .menu-icon {
                                &:not(:first-child) {
                                    &:not(:last-child) {
                                        transform: translateX(-5px);
                                    }
                                }
                            }
                        }
                    }
                }

                &.open {
                    right: 0px;

                    .about-menu-button {
                        .menu-icon {
                            &:not(:first-child) {
                                &:not(:last-child) {
                                    height: 0;
                                    display: none;
                                }
                            }
                            &:first-child {
                                transform: translateY(2px) rotate(45deg);
                            }
                            &:last-child {
                                transform: translateY(-2px) rotate(-45deg);
                            }
                        }
                    }
                }

                .about-menu-button {
                    display: block;
                }

                > ul {
                    gap: 15px;
                    width: 100%;
                    height: 100%;
                    justify-content: center;

                    > li {
                        &:not(:last-child) {
                            margin-bottom: unset;
                        }
                        .menu-button,
                        .resume-button,
                        .contact-button {
                            .menu-icon {
                                border: 4px solid var(--about-bg-color);
                                
                                > svg {
                                    transition: all 0.35s ease-in-out;
                                    fill: var(--about-bg-color);
                                }
                            }
                            .menu-text {
                                color: var(--about-bg-color);
                            }
                            &:hover,
                            &:focus {
                                transform: scale(1.1);
                                .menu-icon {
                                    background: var(--about-bg-color);
                                    > svg {
                                        fill: var(--about-text-color);
                                    }
                                }
                            }
                        }
                    }
                }

                .about-wrapper {
                    overflow: hidden;
                    .about-content-container {
                        margin: 0 50px;
                        overflow: auto;
                        max-height: calc(100vh - 265px);

                        .about-content {
                            margin-top: unset;
                            .about-text {
                                font-size: 18px
                            }
                        }
                        .about-image-wrapper {
                            padding-bottom: 25px;
                        }
                    }
                }
            }

            .about-wrapper {
                height: unset;
                .about-content-container {
                    margin: 15px 50px 15px 15px;
                    max-height: unset;
                    height: 100%;
                    .about-content {
                        margin-top: unset;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 640px) {
    #page-wrapper {
        .head,
        .lazer-eyes {
            left: calc(50% - 190px);
            width: 250px;
        }

        .head-hand-top,
        .head-hand-bottom {
            max-height: 398px;
            left: calc(50% - 175px);
        }
        
        .menu-screen {
            left: unset;
            right: 15px;
            transform: translate(0, -50%);
            width: 200px;
            height: 350px;
        }

        .screen-hand-top,
        .screen-hand-bottom {
            max-height: 450px;
            top: calc(100% + 250px);
            left: unset;
            right: -200px;
            transform: translate(0, -50%);
        }

        .home-menu {
            .menu-button,
            .contact-button,
            .resume-button,
            .home-menu-title {
                font-size: 20px;
            }
        }

        .header-container {
            left: calc(50% + 115px);
            .opening-header {
                .typing {
                    font-size: 38px;
                }
            }
        }
    }
}

@media screen and (max-width: 528px) {
    #page-wrapper {
        .header-container {
            left: 50%;
            .opening-header {
                .typing {
                    font-size: clamp(12px, 11vw, 55px);
                }
            }
        }

        .head,
        .lazer-eyes {
            &.intro-animation {
                animation: headDown 10s forwards 14s, headShake 1.5s forwards 23s;
                animation-fill-mode: backwards, forwards;
            }
        }

        .head-hand-top,
        .head-hand-bottom {
            &.intro-animation {
                animation: handDown 10s forwards 14s, handShake 1.5s forwards 23s, handUp 10s forwards 26s;
            }
        }

        .foliage-2 {
            width: 100%;
            height: auto;
            top: 0;
        }

        #portfolio {
            padding: 10px;
            width: calc(100vw - 20px);
            height: calc(100vh - 20px);

            .portfolio-content {
                flex-direction: column;
                height: calc(100% - 70px);

                .portfolio-items-container {
                    margin-bottom: 55px;

                    .portfolio-item-wrapper {
                        display: flex;
                        flex-direction: row;
                        white-space: nowrap;
                        overflow-x: scroll;
                        overflow-y: hidden;
                        width: 100%;
                        min-width: unset;
                        height: 100%;
                        padding-bottom: 5px;
                        padding-right: unset;

                        .portfolio-item {
                            flex: 0 0 auto;
                            &:not(:last-child) {
                                margin-bottom: unset;
                                margin-right: 10px;
                            }

                            &:not(:first-child) {
                                &:hover,
                                &:focus {
                                    transform: unset;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 410px) {
    #page-wrapper {
        #about {
            .about-wrapper {
                .about-content-container {
                    .about-content {
                        width: 100%;
                        .about-text {
                            font-size: 18px;
                        }
                    }
                    .about-image-wrapper {
                        width: 100%;
                        .about-image-container {
                            min-width: unset;
                            .about-image {
                                min-width: unset;
                                width: 100%;
                                height: auto;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 400px) {
    #page-wrapper {
        #portfolio {
            .portfolio-title {
                font-size: 30px;
            }
            .portfolio-menu {
                .portfolio-menu-button {
                    margin: 25px 25px 15px 25px;
                }
            }
            .portfolio-content {
                height: calc(100% - 50px);
            }
        }
    }
}

@media screen and (max-width: 320px) {
    #page-wrapper {
        #about {
            .about-wrapper {
                .about-content-container {
                    .about-content {
                        .about-text {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 300px) {
    #page-wrapper {
        #about {
            .about-wrapper {
                .about-content-container {
                    .about-content {
                        .about-text {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 275px) {
    #page-wrapper {
        #portfolio {
            .portfolio-title {
                font-size: 20px;
            }
            .portfolio-menu {
                .portfolio-menu-button {
                    margin: 20px 25px 15px 25px;
                }
            }
            .portfolio-content {
                height: calc(100% - 40px);
            }
        }
    }
}

@media screen and (max-width: 210px) {
    #page-wrapper {
        #portfolio {
            .portfolio-title {
                width: 100%;
                text-align: center;
                margin-top: 15px;
            }
            .portfolio-menu {
                .portfolio-menu-button {
                    margin: 0px 25px 15px 25px;
                }
            }
            .portfolio-content {
                height: calc(100% - 55px);
            }
        }
    }
}

/* HEIGHT */

@media screen and (max-height: 550px) {
    #page-wrapper {
        #portfolio {
            position: relative;
            .portfolio-content {
                position: unset;
                .portfolio-items-container {
                    position: absolute;
                    z-index: 2;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    transition: all 0.5s ease-in-out;

                    bottom: -150px;

                    &.active {
                        bottom: 0;
                        .portfolio-item-menu-btn {
                            .pimb-icon {
                                &:first-of-type {
                                    transform: translate(calc(-50% + 4px), calc(-50% + 5px)) rotate(-45deg);
                                }
                                &:nth-of-type(2) {
                                    transform: translate(calc(-50% - 4px), calc(-50% + 5px)) rotate(45deg);
                                }
                            }
                        }
                    }

                    .portfolio-item-menu-btn {
                        display: block;
                        position: absolute;
                        left: 0;
                        top: -35px;
                        width: 35px;
                        height: 35px;
                        background: #ffffff;
                        border: unset;

                        .pimb-icon {
                            display: block;
                            background: #125F82;
                            position: absolute;
                            border-radius: 5px;
                            top: 50%;
                            left: 50%;
                            transition: all 0.5s ease-in-out;

                            &:not(:last-of-type) {
                                width: 15px;
                                height: 3px;
                            }

                            &:first-of-type {
                                transform: translate(calc(-50% + 4px), calc(-50% - 5px)) rotate(45deg);
                            }

                            &:nth-of-type(2) {
                                transform: translate(calc(-50% - 4px), calc(-50% - 5px)) rotate(-45deg);
                            }

                            &:last-of-type {
                                transform: translate(-50%, -50%);
                                width: 3px;
                                height: 20px;
                            }
                        }
                    }
                    .portfolio-item-wrapper {
                        padding: 10px;
                        height: fit-content;
                        width: 100%;
                        background: #ffffff;

                        display: flex;
                        flex-direction: row;
                        white-space: nowrap;
                        overflow-x: scroll;
                        overflow-y: visible;
                        width: 100%;
                        min-width: unset;
                        padding-right: unset;

                        .portfolio-item {
                            flex: 0 0 auto;
                            padding: 10px;
                            width: 100px;
                            height: 100px;
                            &:not(:last-child) {
                                margin-bottom: unset;
                                margin-right: 10px;
                            }
                            .portfolio-item-title {
                                font-size: 20px;
                            }

                            &:not(:first-child) {
                                &:hover,
                                &:focus {
                                    transform: unset;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}