/* =========================== Container =========================== */

/* --- title --- */

#about {
    margin:                     4vw auto 4vw auto;
    font-size:                  6vw;
    font-weight:                800;
    color:                      var(--white-color);
    opacity:                    0.3;
    text-transform:             uppercase;
}

/* --- aboutme --- */

.about-container {
    display:                    flex;
    flex-direction:             row;
    align-items:                flex-start;

    height:                     100%;
    margin:                     0 10vw 5rem;
    text-transform:             uppercase;
}

.about-what {
    display:                    flex;
    flex-direction:             column;
    background-color:           var(--blue-color-light);
    width:                      100%;

    opacity:                    0;
    text-decoration:            none;  
    color:                      var(--white-color);

    animation:                  fade-in-left linear forwards;
    animation-timeline:         view();
    animation-range-start:      cover;
    animation-range-end:        30%;
}

.about-this {
    display:                    flex;
    flex-direction:             column;
    align-items:                flex-end;
    width:                      100%;
    background-color:           var(--blue-color-lighten);
    opacity:                    0;

    animation:                  fade-in-right linear forwards;
    animation-timeline:         view();
    animation-range-start:      cover;
    animation-range-end:        30%;
    }

.about-what, .about-this {
    padding:                    1rem;
    font-size:                  2rem;
    font-weight:                600;
    transition:                 .4s;
}

/* --- skills --- */

.s-title-f {
    position:                   absolute;
    top:                        180vh;
    align-self:                 center;
    font-size:                  6vw;
    font-weight:                800;
    color:                      var(--white-color);
    opacity:                    0.3;
    text-transform:             uppercase;

    animation:                  Skills-title-fade linear forwards;
    animation-timeline:         view();
    animation-range-start:      cover;
    animation-range-end:        contain 50vh;
}

.skills-container {    
    display:                    grid;
    grid-template-columns:      repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap:                        1rem;
    margin:                     0 10vw;    
}

.skills {
    width:                      100%;
    height:                     200px;
    background-color:           var(--blue-color-lighten);
    opacity:                    0;

    animation:                  skills-fade-top linear forwards;
    animation-timeline:         view();
    animation-range-start:      cover;
    animation-range-end:        contain 10vh;

    display:                    flex;
    flex-direction:             column;
    align-items:                center;
    justify-content:            center;
    font-size:                  1.5rem;
    font-weight:                600;
    transition:                 .4s;
}

.skill-dark {
    background-color:           var(--blue-color-light);
}

#skill-1 {animation-range-end:  contain 5vh;}
#skill-2 {animation-range-end:  contain 15vh;}
#skill-3 {animation-range-end:  contain 25vh;}
#skill-4 {animation-range-end:  contain 35vh;}

.skill-software {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}

/* ========================== TEXTS ========================== */

.what {
    text-decoration:            none;
    color:                      var(--white-color);
    opacity:                    0.2;
}

.this {
    list-style:                 none;
    color:                      var(--sig-blue-darken);
    opacity:                    0;
}

.what, .this {
    transition:                 .4s;
    padding:                    0.5vw;
}

/* --- skills --- */

.skills i {
    font-size:                  2rem;
    font-weight:                400;
}

.skills span {
    margin:                     0.5rem 0 ;
}

.skills a {
    font-size:                  1rem;
    opacity:                    0.5;
}

/* ======================= ANIMATION ======================= */

@keyframes fade-in-left {
    from {opacity: 0; transform: translateX(-100px);}
    to {opacity: 1; transform: translateX(0px);}
}
@keyframes fade-in-right {
    from {opacity: 0; transform: translateX(100px);}
    to {opacity: 1; transform: translateX(0px);}
}
@keyframes skills-fade-top {
    from {opacity: 0; transform: translateY(200px);}
    to {opacity: 1; transform: translateY(0px);}
}
@keyframes Skills-title-fade {
    to {opacity: 0;}
}

/* ===================== HOVER ====================== */

.about-container:hover .this{
    opacity:                    1;
}
.about-container:hover .about-this {background-color:var(--blue-color-light);}
.about-container:hover .about-what {background-color:var(--blue-color-lighten);}

.what:hover {
    opacity:                    0.8;
}

.skills:hover {
    cursor:                     pointer;
    background-color:           var(--sig-blue-darken);
}

/* ======================== PHONE ======================== */
@media screen and (max-width: 1114px) {
    #about {
        font-size:              12vw;
    }
    .about-container {
        margin:                 50px 10vw;
        flex-direction:         column;
    }
    .about-what, .about-this {
        font-size:              30px;
        text-wrap:              nowrap;
    }
}