/* ---------- Header ----------

.header
{
    position: fixed;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);

    color: var(--main-text-color-light);
    background-color: var(--main-color);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    height: 10vh;
    min-height: 4rem;
    max-height: 8rem;
    padding: 0 2rem;
    border-radius: 10rem;
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.15);
    overflow: hidden;

    display: flex;
    align-items: center;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.nav__progress-indicator
{
    position: absolute;
    bottom: 0;
    left: -13%;
    height: 0.4rem;
    width: 2.4rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: var(--main-color-light-light);
    transition: width 0.1s ease-out;
    z-index: 0;
}

.nav__box
{
    width: 65vw;
    position: relative;
}

.nav__list
{
    width: 100%;
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-around;
}

.nav__item
{
    font-size: 2.2rem;
}

.nav__item a:link,
.nav__item a:visited
{
    color: var(--main-text-color-light);
}

.nav__item a:hover,
.nav__item a:active
{
    color: var(--main-color-light-light);
} */

.mail__bubble__box
{
    position: fixed;
    top: 5vh;
    left: calc(5vw - 1rem);
    width: 6rem;
    height: 6rem;
    background-color: var(--main-color);
    border-radius: 50%;
    z-index: 101;
    box-shadow: 0 0 0 3px #f5f5f5, 0 2px 8px 2px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mail__bubble__icon
{
    width: 60%;
    height: 60%;
    color: var(--main-text-color-light);
}

/* ---------- Hero ---------- */

.hero__section
{
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
}

.hero__title__box
{
    margin-top: 5vh;
    position: relative;
}


.hero__title
{
    font-size: 5.6rem;
    color: var(--main-text-color);
}

.hero__content__box
{
    padding: var(--section-margin) 14vw;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__description__box
{
    position: relative;
    justify-self: center;
    transform: translateX(-4rem);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero__description__title
{
    font-size: 3.8rem;
    margin-bottom: 4rem;
}

.hero__card
{
    padding: 4.4rem 6.4rem;
    background: color-mix(in srgb, var(--secondary-color-light-light) 50%, transparent);
    border-radius: 8rem;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}


.hero__image__box
{
    /* 4:5 aspect ration */
    /* height: 35rem; */
    width: 28rem;
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    border-radius: 6rem;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.14);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__card__title
{
    padding-top: 0.4rem;
    font-size: 2.4rem;
}

.hero__card__text
{
    font-size: 2rem;
}

/* ---------- Skills ---------- */

.skills__section
{
    background: color-mix(in srgb, var(--main-color-light-light) 50%, transparent);
    padding: var(--section-margin) 0;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.skills__image__box
{
    /* aspect ratio: 3:4 */
    height: 66rem;
    width: 88rem;
    position: relative;
    overflow: hidden;
    border-bottom-right-radius: 6rem;
    border-top-right-radius: 6rem;
    align-self: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.skills__text__box
{
    height: 100%;
    padding: 0 8rem;
    border-bottom-left-radius: 6rem;
    border-top-left-radius: 6rem;

    display: flex;
    flex-direction: column;
    gap: 3.2vw;
    align-items: flex-start;
    justify-content: center;
}

.skills__list
{
    padding: 2vw 3.8vw;
    background-color: #f8f8f8;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
    border-radius: 2rem;
    position: relative;
    z-index: 11;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 1.8vw 3.2vw;
}


.skills__item
{
    position: relative;
    opacity: 1;
}

.skills__item::marker
{
    content: "•  ";
}

/* ---------- Conclusion ---------- */

.conclusion__section
{
    padding: var(--section-margin) 0;
}

.conclusion__box
{
    height: 100%;
    width: 100%;
    padding: 4rem;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.conclusion__title
{
    font-size: 4.2rem;
    margin-bottom: 4rem;
}

.conclusion__image__box
{
    height: 26rem;
    width: 97%;
    position: relative;
    overflow: hidden;
    border-radius: 6rem;
    justify-self: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ---------- Contact ---------- */

.contact__section
{
    background: color-mix(in srgb, var(--main-color-light-light) 50%, transparent);
    padding: var(--section-margin) 0;
    min-height: 90vh;
}

.contact__box
{
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}

.contact__title
{
    font-size: 4.2rem;
}

.contact__form__box
{
    position: relative;
}



.contact__form
{
    width: 50vw;
    padding: 3rem 2rem;
    background: white;
    border-radius: 2rem;
    background-color: #f8f8f8;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact__form__item
{
    font-size: 1.8rem;
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--main-color-light);
    border-radius: 1rem;
    background: #fff;
    color: var(--main-text-color);
    transition: border-color 0.2s;
}

.contact__form__item:focus
{
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 2px var(--main-color-light);
}

.contact__form textarea.contact__form__item
{
    min-height: 8rem;
}

.contact__form__message
{
    min-height: 16rem;
    max-height: 44vh;
}

.contact__form__send
{
    font-size: 1.8rem;
    padding: 1.2rem 0;
    background: var(--main-color);
    color: var(--main-text-color-light);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background 0.2s, color 0.2s;
}

.contact__form__send:hover,
.contact__form__send:focus
{
    background: var(--main-color-dark);
    color: var(--main-color-light-light);
}

/* ---------- Footer ---------- */

.footer
{
    height: 4vh;
    background-color: var(--main-color);

    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__text
{
    color: var(--main-text-color-light);
    padding-left: 2rem;
    font-size: 1.2rem;
}

/* ---------- Lines ---------- */

/* purple */

.purple__line.--start
{
    bottom: 2rem;
    left: 50%;
}

.purple__line.--skills__image
{
    top: 50%;
    right: 30%;
}

.purple__line.--conclusion__title
{
    top: 0;
    right: 33vw;
}

.purple__line.--conclusion__image
{
    top: 50%;
    right: 10%;
}

/* .purple__line.--contact__form
{
    top: -6rem;
    right: -24rem;
} */

.purple__line.--end
{
    top: 50%;
    right: -10%;
}

/* orange */

.orange__line.--start
{
    top: 50%;
    right: -10%;
}

.orange__line.--skills__list
{
    top: 0;
    right: -12%;
}

.orange__line.--skills__image
{
    bottom: 20%;
    right: 50%
}

.orange__line.--conclusion__image
{
    top: 50%;
    left: 10%;
}


/* .orange__line.--contact__form
{
    top: -6rem;
    left: -24rem;
} */

.orange__line.--end
{
    top: 50%;
    left: -13%;
}