img.background_section{
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: blur(30px);
}
div.text_container{
    height: max-content;
    p{
        padding-block: 1rem;
    }
}
section.start, section.about_preview{
    position: relative;
    margin-bottom: 15svh;
    display: flex;
        align-items: center;
    h1{
        font-weight: normal;
        width: 50svw;
        margin-left: 5svw;
        text-align: justify;
    }
    h1 span{
        font-weight: bold;
        color: var(--text-accent-color);
    }
}
section.start{
    height: 100svh;
    width: 100svw;
    padding: 0;
    color: var(--text-light-color);
    overflow: hidden;
}
section.about_preview{
    position: relative;
        width: 96svw;
        padding-inline: 2svw;
    display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10svw;
    background-color: var(--text-dark-color);

    > *{
        flex: 1;
    }
    div.astronaut_container{
        position: relative;
        height: 40svh;

        img.astronaut_picture{
            position: absolute;
                top: -25px;
                left: 50%;
            height: 35svh;
            filter: drop-shadow(0 0 5px white);
            transform-origin: 50% 50%; /* Définit le centre du cercle comme pivot */
            animation: float_vertical 10s infinite ease-in-out; /* Animation circulaire */
        }
    }
}
section.portfolio_preview{
    position: relative;
        height: fit-content;
        width: 100svw;

    div.text_container{
        z-index: 1000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    div.projects_container {
        flex: 2;
        position: relative;
            height: fit-content;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;

        > div{
            position: relative;
            height: 70svh;
            background-color: white;
            overflow: hidden;
            img{
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: all 250ms;
            }
        }
        > div:hover img{
            transform: scale(1.1);
        }
        > div::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: var(--text-dark-color);
            opacity: 0.8;
        }
        div:first-child { grid-area: 1 / 1 / 2 / 2; }
        div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
        div:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
    }
}
section.contact{
    textarea{
        resize: none;
    }
}

@media screen and (max-width: 768px) {
    section.start{
        margin-bottom: 6svh;
        h1{
            font-size: 1.5rem;
            width: 80svw;
        }
    }
    section.about_preview{
        flex-direction: column;
        div.astronaut_container{
            position: relative;
            min-height: 25svh;
            width: 100%;

            img.astronaut_picture{
                height: 20svh;
                left: 25%;

            }
        }
        .text_container{
            width: 90svw;
            margin-inline: 5svw;
        }
    }
}