@import url('https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
    font-family: Handmade_Alphabet;
    src: url("../fonts/Handmade Alphabet.otf");
}

:root {
    --dark-neon-pink: #201424;
    --neon-dark-pink: #2D232B;
    --lighter-neon-dark-pink: #432f3f;

    --midnight-violet: #3D2645;
    --royal-plum: #832161;
    --light-pink: #F2BFCB;
    --ghost-white: rgb(240 239 244 / 0.24);

    --orange: #F48C13;
    --light-orange: #FFDAA2;

    --text: #fff;
    --background: var(--neon-dark-pink);

    --margin: clamp(20px, 10vw, 15vw);
}

* {
    margin: 0;
    padding: 0;
}

h1, h2 {
    font-family: Handmade_Alphabet, sans-serif;
    color: var(--text);
}

h3, a, p, input, label, textarea, li {
    font-family: Krub, sans-serif;
    color: var(--text);
}

h1 {
    font-size: 8rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.3rem;
}

a {
    text-decoration: none;
}

html {
    background-color: var(--background);
    scroll-behavior: smooth;
}

.icon {
    height: 2rem;
}

.tag {
    display: inline-block;
    border: 2px solid var(--text);
    border-radius: 50px;
    padding: 10px;
    text-align: center;
}

#to-the-top {
    position: fixed;
    width: 40px;
    height: 40px;
    right: calc(var(--margin) / 2);
    bottom: calc(var(--margin) / 1.5);
    color: var(--text);
    border-radius: 50px;
    border: 2px solid var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    padding: 1rem;
    background-color: var(--ghost-white);
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - var(--margin) * 2);
    display: flex;
    justify-content: space-between;
    padding-left: var(--margin);
    align-items: center;
    padding-top: 40px;

    #logo {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .burger {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 110;

        .bar {
            width: 100%;
            height: 3px;
            background-color: var(--text);
            border-radius: 5px;
            transition: all 0.3s ease;
        }
    }

    nav {
        display: flex;
        gap: 20px;
    }
}

#mentions-legales {
    padding: 200px var(--margin) 20px var(--margin);
    background: linear-gradient(var(--dark-neon-pink), var(--midnight-violet));
    min-height: calc(100vh - 300px);

    h2 {
        margin-top: 20px;
    }

    li {
        margin: 10px 50px;
    }
}

#hero {
    display: flex;
    background: linear-gradient(var(--dark-neon-pink), var(--midnight-violet));
    padding: 200px var(--margin) 0 var(--margin);

    #chibi {
        width: clamp(280px, 35vw, 480px);
    }

    div#hello {
        margin-left: var(--margin);

        .hero-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 8px;
            align-items: center;
        }

        .socials {
            display: flex;
            justify-content: center;
            gap: 30px;

            img {
                height: 3.5rem;
            }
        }

        #download-cv {
            background-color: #fff;
            color: var(--midnight-violet);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }
    }
}

.transition {
    max-width: 100%;
    height: auto;
    display: block;
}

#aPropos {
    padding: 50px var(--margin);

    h1 {
        display: inline-flex;
    }

    div {
        display: flex;

        #infos {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 30px;

            div {
                flex-direction: column;
            }

            #about {
                grid-row: span 2 / span 2;
            }

            #softSkills {
                grid-column-start: 2;
            }

            .block {
                background-color: var(--lighter-neon-dark-pink);
                padding: 20px;
                border-radius: 15px;
                flex-grow: 1;

                .inline {
                    flex-direction: row;
                    justify-content: space-between;

                    &:first-child {
                        padding-bottom: 20px;
                    }
                }
            }

            #redirect {
                flex-direction: row;
                justify-content: space-around;
                padding-top: 10px;

                a {
                    text-decoration: underline;
                }
            }
        }

        .photo {
            border-radius: 0 0 100px 0;
            margin-left: 100px;
            width: 400px;
            height: 400px;
        }
    }
}

#projets {
    padding: 50px var(--margin);
    background-color: var(--midnight-violet);

    #zest {
        display: flex;
        justify-content: space-around;

        #title-decoration {
            position: relative;

            h1 {
                z-index: 2;
            }

            .decoration {
                position: absolute;

                &#yellowStar {
                    left: -100px;
                    margin-top: 30px;
                }

                &#pinkPolygon {
                    left: -30px;
                }

                &#altPinkPolygon {
                    left: 175px;
                    margin-top: 75px;
                }
            }
        }

        div:first-child {
            display: flex;
            flex-direction: column;
            width: 500px;
            margin-left: 50px;
        }

        a {
            align-self: center;
            text-decoration: underline;
            margin: 150px 0 30px 0;
        }

        .infoProject {
            position: absolute;
            right: var(--margin);
        }

        #screenshot {
            margin: 0 0 50px 0;
        }
    }

    .tags {
        display: inline-block;
        align-self: center;

        & * {
            margin: 0 10px;
        }
    }

    #skills {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 20px;

        #scroller {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            padding: 20px 0;
            justify-content: safe center;

            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;

            &::-webkit-scrollbar {
                height: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--royal-plum);
                border-radius: 10px;
            }

            img {
                width: 50px;
                height: 50px;
                background-color: var(--royal-plum);
                padding: 12px;
                margin: 0 15px;
                border-radius: 10px;
                flex-shrink: 0;
            }
        }
    }
}

#contact {
    display: flex;
    justify-content: space-between;
    padding: 50px var(--margin);


    form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        width: 40%;

        input, textarea {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid var(--ghost-white);
            padding: 2px 0 0 10px;

            &:not(textarea) {
                height: 2rem;
            }
        }

        div {
            display: flex;
            flex-direction: column;
            margin: 20px 0;
        }

        .wide {
            grid-column: span 2 / span 2;
        }

        .privacy-text {
            font-size: 0.85rem;
            color: var(--light-pink); /* Utilise une couleur un peu plus douce que le blanc pur */
            opacity: 0.8;
            line-height: 1.4;
        }

        button {
            font-family: Krub, sans-serif;
            font-size: 16px;
            background-color: #fff;
            padding: 10px;
            border: none;
            border-radius: 20px;
            color: var(--midnight-violet);
        }
    }
}


footer {
    display: flex;
    justify-content: center;
    padding: 50px 0;
    background-color: var(--midnight-violet);
}

/* Tablettes / Petits PC */
@media (max-width: 1200px) {
    h1 {
        font-size: 5rem;
    }

    #hero {
        padding-top: 160px;
        align-items: center;
    }

    #aPropos .photo {
        width: 300px;
        height: 300px;
        margin-left: 40px;
    }

    #projets #zest div:first-child {
        width: 40%;
    }

    #contact form {
        width: 55%;
    }
}

/* --- Tablettes Verticales */
@media (max-width: 1024px) {
    header {
        padding-top: 20px;
    }

    #hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 140px;
    }

    #hero div#hello {
        margin-left: 0;
        margin-top: 30px;
    }

    #hero .hero-grid {
        justify-content: center;
    }

    .apropos-content {
        flex-direction: column-reverse;
        align-items: center;
        gap: 40px;
    }

    #aPropos .photo {
        margin-left: 0;
        border-radius: 50% 50% 50% 50%;
    }

    #projets #zest {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #projets #zest div:first-child {
        width: 100%;
        margin-left: 0;
        margin-bottom: 40px;
    }

    #projets #zest .decoration {
        display: none;
    }

    #projets #zest a {
        margin: 30px 0;
    }

    #projets #zest .infoProject {
        position: static;
        margin-bottom: 10px;
    }

    #screenshot {
        max-width: 100%;
        height: auto;
    }

    /* Section Contact */
    #contact {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
}

/* mobile */
@media (max-width: 768px) {
    :root {
        --margin: 20px;
    }

    h1 {
        font-size: 3.5rem;
    }

    header {
        .burger {
            display: flex;
        }

        nav {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100vh;
            background-color: var(--dark-neon-pink);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 40px;
            transition: right 0.4s ease;
            z-index: 105;

            &.active {
                right: 0;
            }

            a {
                font-size: 1.8rem;
            }
        }
    }


    #hero div#hello .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    #aPropos {
        padding: 50px var(--margin);
        text-align: center;

        h1 {
            display: flex;
            align-items: center;

            img {
                width: 90px;
            }
        }

        div {
            .photo {
                margin: 0;
                width: 80vw;
                height: 80vw;
                border-radius: 0;
            }

            #infos {
                display: flex;
                flex-direction: column;
            }
        }

        .apropos-content {
            flex-direction: column-reverse;
            align-items: center;
            justify-content: center;
            gap: 30px;
            width: 100%;
        }

        #redirect {
            flex-direction: column;
            gap: 10px;
        }
    }

    #contact {
        form {
            width: 80vw;
            grid-template-columns: 1fr;
            align-self: center;

            .wide {
                grid-column: span 1;
            }
        }
    }

    #to-the-top {
        display: none;
    }

    .burger.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .burger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .burger.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}