@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Graduate&family=Irish+Grover&display=swap');

:root {
    --yellow: #FCC309;
    --orange: #F2921D;
    --red: #F24F13;
    --blue: #8082A6;
    --purple: #46334f;
}

.graduate-regular {
    font-family: "Graduate", serif;
    font-weight: 400;
    font-style: normal;
}

.irish-grover-regular {
    font-family: "Irish Grover", system-ui;
    font-weight: 400;
    font-style: normal;
}

/* Le code de BASE*/
body {
    background-color: var(--blue);
    overflow-x: hidden;
}

p,
a {
    font-family: "Irish Grover", sans-serif;
    font-size: 24px;
}

p.big {
    font-size: 32px;
}

a {
    text-decoration: none;
    transition: filter 0.2s;
}

a:hover {
    filter: brightness(80%);
}

h1,h2,h3,h4,h5,h6{
    font-family: "Graduate", sans-serif;
}

h1 {
    font-size: 128px;
    font-weight: 300;
}

h2{
    font-size: 32px;
    font-weight: 300px;
}

.button {
    width: max-content;
    height: max-content;
    display: block;

    position: relative;

    p {
        /* Centre sur le parent */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: max-content;
    }
}

.red {
    color: var(--red);
}

.yellow {
    color: var(--yellow);
}


/* General */
.socials {
    display: flex;

    width: max-content;
    height: max-content;
    gap: 1em;

    a {
        img {
            width: 50px;
        }
    }

}

.verti {
    flex-direction: column;
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;

    .line {
        height: 72px;
    }
}

.hori {
    flex-direction: row;
    left: 64px;
    top: 50%;
    width: max-content;

    .line {
        width: 72px;
    }
}

/* Color screens */
#yellow {
    background-color: var(--yellow);
}

#purple {
    background-color: var(--purple);
}

#orange {
    background-color: var(--orange);
}

/* header */
header {
    padding: 64px;
    position: relative;
    height: 100vh;
    border-radius: 0rem 0rem 100vw 100vw;
    background-color: #46334f;
    padding-bottom: 10vw;
    overflow: hidden;

    nav {
        display: flex;
        align-items: center;
        gap: 1.5em;
        margin-left: auto;
        width: max-content;

        a {
            z-index: 1;
        }
    }

    #name {
        /* Centrer le contenu */
        display: flex;
        flex-direction: column;
        align-items: center;

        /* Centrer sur l'écran */
        position: absolute;
        left: 50%;
        top: calc(50%);
        transform: translate(-50%, -50%);
        width: max-content;

        z-index: 1;

        /* Couleurs */
        h1 {
            color: var(--red);
            margin: -24px;
            font-size: 64px;
        }

        p {
            color: var(--yellow);
        }
    }

}

.backgroundImage {
    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
}

/* Circles */
@keyframes rotating1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotating2 {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}


.rotating1 {
    animation: rotating1 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.rotating2 {
    animation: rotating2 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* À propos */
h1 {
    text-align: center;
    margin-bottom: 0.7em;
    margin-left: auto;
    margin-right: auto;
    color: var(--purple);
    z-index: 1;
}

div#aPropos {
    display: flex;
    flex-direction: column;
    align-content: center;
    position: relative;
    border-radius: 0rem 0rem 100vw 100vw;
    padding-bottom: 300px;
    background-color: var(--yellow);

    div {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        section{
            aside{
                a{
                    p{
                        width: 100%;
                        text-align: center;
                        margin: 0px;
                    }
                }
            }
        }
    }
}
.aPropos {
    display: flex;
    max-width: 1200px;
    margin-left: 40px;
    align-items: center;
    margin-top: -5em;

    aside {
        width: 50%;
        margin-left: 200px;
        margin-right: 10px;
        z-index: 1;

        :first-child {
            margin-bottom: 20px;
        }

        img {
            margin-left: auto;
            margin-right: auto;
        }
    }

    p {
        z-index: 1;
        width: 50%;
        margin-right: 200px;
        margin-left: 20px;
        color: var(--purple);
    }
}

.background {
    position: absolute;
    left: 50%;
    top: calc(50%);
    transform: translate(-50%, -50%);
    width: max-content;
}

/* Projects */
div#mesProjets {
    background-color: var(--orange);
    border-radius: 0rem 0rem 100vw 100vw;
    padding-bottom: 200px;

    h1 {
        margin-bottom: 0.3em;
    }

    section {

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2em;

    }
}

.projet {
    width: 70%;
    aspect-ratio: 16/10;

    border: solid 8px var(--yellow);
    border-radius: 100px;

    position: relative;

    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        transition: filter 0.2s;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        opacity: 0%;
        transition: opacity 0.2s;

        color: var(--yellow);
        filter: brightness(120%), saturate(120%);
        z-index: 2;
        font-size: 2.5em;
    }
}

.projet:hover {
    img{
        filter: brightness(30%);
    }
    p {
        opacity: 100%;
        text-align: center;
    }
}

footer {
    background-color: var(--purple);
    height: 200px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: center;
    align-items: center;

    .left {
        p {
            text-align: right;
            color: var(--red);
        }

        margin-right: 2em;
    }

    .middle {
        justify-self: center;
    }

    .right {
        justify-self: start;
        margin-left: 2em;
    }
}