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{
    display: flex;
    align-items: center;
}
section.start, section.about_preview, section.contact{
    position: relative;
    margin-bottom: 15svh;
    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: 105svh;

        img.astronaut_picture{
            position: absolute;
                top: -25px;
                left: 25%;
            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: 105svh;
        width: 100svw;
        margin-bottom: 15svh;

    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;
            top: 50%;
            transform: translateY(-50%);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;

        > 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 h2{
    text-align: center;
}
section.contact  div.contact_content{
    position: relative;
    min-height: 50svh;

    form, div.other_contact{
        width: 40svw;
        padding-inline: 5svw;
    }
    form{
        position: relative;
        *{
            width: 100%;

        }
        > div{
            margin-bottom: 1rem;
        }
        label{
            margin-left: 1rem;
            font-size: 14px;
        }
        input, textarea{
            border-radius: 16px;
            width: calc(100% - 2rem);
            padding: 0.5rem 1rem;
            border: 0;
            box-shadow: inset 5px 5px 22px -8px #000000;
        }
    }
    form textarea{
        resize: none;
    }
    span.wall{
        position: relative;
            height: 50svh;
            width: 1px;
        background-color: white;
    }
    span.wall::before{
        content: "or";
        position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 1rem 0;
        font-weight: bold;
        background-color: var(--text-dark-color);
    }
    div.other_contact ul{
        justify-content: center;

        li {
            font-size: 3rem;
        }
    }
}

@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;
        }
    }
    section.contact div.contact_content{
        flex-direction: column;
        > * {
            margin-block: 2rem;
        }
        form{
            width: 90svw;
            padding-inline: 5svw;
        }
        span.wall{
            height: 1px;
            width: 90svw;
        }
        span.wall::before{
            padding: 0 1rem;
        }
        div.other_contact ul li{
            padding-inline: 1rem;
        }
    }
}