.about-me-container {
    margin: 0 var(--size-2xl) var(--size-base) var(--size-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--size-2xl);
    
    & h1{
        letter-spacing: -5%;
        font-size: 2em;
    }
    & p{
        font-size: var(--size-xs);
    }
}

.about-me-info{
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);

    & button{
        width: fit-content;
    }
}

.about-me-info-text{
    display: flex;
    flex-direction: column;
    gap: var(--size-xxs);

    & img:nth-child(2){
        width: 10vw;
        align-self: center;
        margin: var(--size-2xl) 0;
    }
}

.about-me-photo{
    display: none;
}

.about-me-hidden{
    display: none;
}

/* Skills and Education */
.skills-and-education{
    margin: 0 var(--size-2xl) var(--size-base) var(--size-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--size-xl);

    & h3{
        font-size: var(--size-xl);
        color: var(--color-secondary);
        -webkit-text-stroke: 0.5px var(--color-secondary-border);
    }
}

.skills-and-education-info{
    display: flex;
    flex-direction: column;
    gap: var(--size-xl);
}

.experience-info{
    display: flex;
    flex-direction: column;
    gap: var(--size-xl);

        & li{
            font-size: var(--size-xs);
            list-style: disc;
            padding: 0;
            margin-left: 10px;
        }

        & li:hover{
                border: 1px solid transparent;
                cursor: default;
            }
}

.logos {
    display: flex;
    flex-wrap: wrap;
    gap: -var(--size-xl);
    justify-content: center;

    & img{
        width: 60px;
        height: 60px;
        object-fit: contain;
    }
}

.soft-skills{
    display: flex;
    flex-direction: column;
    gap: var(--size-xl);

    & ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--size-base);
    }

    & li{
        font-size: var(--size-xs);
        padding: var(--size-xxs);
        color: var(--colour-primary);
        border: 1px solid var(--colour-primary-border);
    }
}

/* Outside of Design */
.outside-of-design{
    margin: 0 var(--size-2xl) 0 var(--size-2xl);

    display: flex;
    flex-direction: column;
    gap: var(--size-4xl);
}


.outside-of-design-images{
    position: relative;
    height: 250px;

    /* margin-bottom: 200px; */
}

.outside-of-design-images img{
    position: absolute;
    width: 100%;
    height: max-content;
    object-fit: cover;

    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timeline: view();
    animation-range: cover 5% 50%;

    &:nth-child(1){
        top: 50%;
        left: 30%;
        transform: translate(-50%, -50%);
        scale: 0;
        width: 50%;
        z-index: 1;
        
        animation-name: move-item;
    }

    &:nth-child(2){
        top: 50%;
        left: 35%;
        transform: translate(-50%, -50%);

        scale: 0.5;
        width: 50%;
        z-index: 2;

        animation-name: move-item-2;
    }

    &:nth-child(3){
        top: 50%;
        right: 50%;
        transform: translate(0%, -50%);
        scale: 0;
        width: 35%;
        z-index: 1;
        
        animation-name: move-item-3;
    }

    &:nth-child(4){
        bottom: 35%;
        scale: 0;
        right: 45%;
        width: 40%;
        z-index: 1;
        transform: translate(0%, -50%);

        /* scale: 0; */
        animation-name: move-item-4;
    }
}

@keyframes move-item{
    80%{
        scale: 1.1;
    }

	100%{
        top: 0;
        left: 0;
        scale: 1;

        transform: translate(0, 0);
	}
}

@keyframes move-item-2{
    80%{
        scale: 1.1;
    }

	100%{
        scale: 1;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
	}
}

@keyframes move-item-3{
    80%{
        scale: 1.1;
        z-index: 0;
    }

	100%{
        scale: 1;
        top: 5%;
        right: 0;
        width: 35%;
        transform: translate(0%, 0%);

        top: 10;
        right: 0;
        z-index: 3;
	}
}

@keyframes move-item-4{
    80%{
        scale: 1.1;
        z-index: 1;
    }
    
    100%{
        scale: 1;
        z-index: 4;

        bottom: 0;
        right: 0%;
        transform: translate(0%, 0%);
    }
}

.skills-img-container{
    position: relative;
    height: 250px;
    margin-bottom: -4em;

    & img{
        position: absolute;
        width: 100%;
        height: max-content;
        object-fit: cover;

        animation-duration: 0.6s;
        animation-fill-mode: forwards;
        animation-timeline: view();
        animation-range: cover 5% 50%;

            &:nth-child(1){
                top: 45%;
                left: 30%;
                transform: translate(-50%, -50%);
                scale: 0;
                width: 60%;
                z-index: 1;
                
                animation-name: move-item-5;
            }

            &:nth-child(2){
                top: 50%;
                left: 35%;
                transform: translate(-50%, -50%);

                scale: 0.5;
                width: 50%;
                z-index: 3;

                animation-name: move-item-6;
            }

            &:nth-child(3){
                top: 40%;
                right: 40%;
                transform: translate(0%, -50%);
                scale: 0;
                width: 45%;
                z-index: 1;
                
                animation-name: move-item-7;
            }
    }
}

@keyframes move-item-5{
    80%{
        scale: 1.1;
        z-index: 1;
    }
    
    100%{
        scale: 1;

        top: 0;
        left: 0;
        transform: translate(0%, 0%);
    }
}

@keyframes move-item-6{
    80%{
        scale: 1.1;
        z-index: 1;
    }
    
    100%{
        scale: 1;

        top: 50%;
        left: 35%;
        transform: translate(-50%, -50%);
    }
}

@keyframes move-item-7{
    80%{
        scale: 1.1;
        z-index: 1;
    }
    
    100%{
        scale: 1;

        top: 10%;
        right: 0;
        transform: translate(0%, 0%);
    }
}


@media (min-width: 768px) {
    .about-me p, .about-me li{
        font-size: var(--size-xs);
    }

    .about-me h1{
        font-size: var(--size-6xl);
    }
    .about-me h2{
        font-size: var(--size-4xl);
    }

    .about-me h3{
            font-size: var(--size-2xl);
    }

    .about-me-container{
        margin: var(--size-4xl) var(--size-5xl) var(--size-4xl) var(--size-5xl);
    }

    .skills-and-education,
    .outside-of-design{
        margin: var(--size-5xl);
    }

    .outside-of-design{
        margin-bottom: var(--size-9xl);
    }
    .outside-of-design-images{
        margin: 0 var(--size-8xl);
    }

    .about-me-container{
        flex-direction: row;
        gap: var(--size-9xl);
    }

    .about-me-info{
        gap: var(--size-base);
        max-width: 40%;
    }

    .about-me-hide{
        display: none;
    }
    
    .about-me-hidden{
        display: block;
    }

    .logos{
        justify-content: flex-end;

        & img {
            width: 90px;
            height: 90px;
        }
    }

    .about-me-photo {
        display: block;
        margin: auto;
        position: relative;
        /* height: 500px; */
        width: 100%;
        aspect-ratio: 4/3;

        & img:nth-child(2) {
            width: 50%;
            height: max-content;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        & img:nth-child(1) {
            width: 60%;
            height: max-content;
            object-fit: cover;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        & img:nth-child(3) {
            width: 15%;
            position: absolute;
            top: 45%;
            left: 30%;
            z-index: 4;
        }
    }

    .skills-and-education{
        flex-direction: row;
        gap: var(--size-2xl);
        text-align: right;
        align-items: center;

        & ul {
            align-items: end;
            justify-content: flex-end;
        }
    }

    /* .skills-img-container{
        width: 60vw;
        height: 400px;
    } */

    .outside-of-design-images,
    .skills-img-container {
        height: 400px;
        width: 100%;
    }

    .outside-of-design-images img{
        max-width: 45%;
    }
}

@media (min-width: 768px) {
    @keyframes move-item-5 {
        100% { 
            scale: 1; 
            top: 0; 
            left: 0; 
            transform: translate(0%, 0%); 
            width: 60%; 
        }
    }
    @keyframes move-item-6 {
        100% { 
            scale: 1; 
            top: 75%; 
            left: 40%; 
            transform: translate(-50%, -50%); 
            width: 60%; 
        }
    }
    @keyframes move-item-7 {
        100% { 
            scale: 1; 
            top: 10%; 
            right: 0; 
            transform: translate(0%, 0%); 
            width: 45%; 
        }
    }
}

@media (min-width: 1024px) {
    .about-me p, .about-me li{
        font-size: var(--size-base);
    }

    .about-me h1{
        font-size: var(--size-6xl);
    }

    .about-me h2{
        font-size: var(--size-5xl);
    }

    .about-me-container{
        margin: var(--size-4xl) var(--size-9xl) var(--size-4xl) var(--size-9xl);
    }

    .skills-and-education,
    .outside-of-design{
        margin: var(--size-9xl) ;
    }

    .skills-and-education{
        gap: var(--size-9xl);
    }

    .outside-of-design{
        flex-direction: row-reverse;
        align-items: center;
        margin-bottom: 12em;
    }

    .outside-of-design-images {
        width: 100%;
        margin: 0 var(--size-2xl);
    }

    .outside-of-design div{
        order: -1;
    }
}