@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

:root {
    --color-primary: #0077B6;
    --color-secondary: #FF4A1C;
    --color-primary2: #00B4D8;
    --color-white: #FFF;
    --color-black: #01021C;
    --color-darkgrey: #757575;
    --color-grey: #c7c7c7;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body {
    font-family: "Manrope", arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 21px;
    line-height: 1.65;
    color: var(--color-black);
    background-color: var(--color-white);
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-weight: 800;
    line-height: 1;
}

h1 {
    font-size: 2rem;
}

.wrap {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    &.wrap-XL {
        max-width: 1400px;
    }

    &.wrap-L {
        max-width: 1200px;
    }

    &.wrap-M {
        max-width: 800px;
    }

    &.wrap-S {
        max-width: 400px;
    }
    @media screen and (max-width: 1440px) {
        &.wrap-XL {
            max-width: 90%;
        }

        &.wrap-L {
            max-width: 90%;
        }

        &.wrap-M {
            max-width: 90%;
        }

        &.wrap-S {
            max-width: 90%;
        }
    }
}

.mt8 {
    margin-top: 8px;
}

.mt16 {
    margin-top: 16px;
}

.mt24 {
    margin-top: 24px;
}

.mt32 {
    margin-top: 32px;
}

.mt40 {
    margin-top: 40px;
}

.mt60 {
    margin-top: 60px;
}

.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb32 {
    margin-bottom: 32px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb60 {
    margin-bottom: 60px;
}


.mr8 {
    margin-right: 8px;
}

.mr16 {
    margin-right: 16px;
}

.mr24 {
    margin-right: 24px;
}

.mr32 {
    margin-right: 32px;
}

.mr40 {
    margin-right: 40px;
}


.ml8 {
    margin-left: 8px;
}

.ml16 {
    margin-left: 16px;
}

.ml24 {
    margin-left: 24px;
}

.ml32 {
    margin-left: 32px;
}

.ml40 {
    margin-left: 40px;
}


.flex {
    display: flex;
}

.alignCenter {
    align-items: center;
}

.justifyCenter {
    justify-content: center;
}

.flexRow {
    flex-direction: row;
}

.flexCol {
    flex-direction: column;
}

.flexColRev {
    flex-direction: column-reverse;
}

.flexRowRev {
    flex-direction: row-reverse;
}

.flexWrap {
    flex-wrap: wrap;
}

.flexWrapRev {
    flex-wrap: wrap-reverse;
}

.flexWrapRev {
    flex-wrap: wrap-reverse;
}

.gap8 {
    gap: 8px;
}

.gap16 {
    gap: 16px;
}

.gap24 {
    gap: 24px;
}

.gap32 {
    gap: 32px;
}

.gap40 {
    gap: 40px;
}

.gap60 {
    gap: 60px;
}


a {
    cursor: pointer;
    text-decoration: none;
}



button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--color-primary);
    color: #1E2522;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    min-width: 200px;
    outline: none;
    border: none;
}







/* =====
    SCROLLBAR
  ===== */

/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #f1f1f1;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
}

/* =====
    END SCROLLBAR
  ===== */



main {
    background-color: var(--color-black);
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: var(--color-white);
    text-align: center;

    h1 {
        font-size: clamp(2rem, 10vw, 8rem);
        text-transform: uppercase;
        margin-bottom: 40px;
    }

    canvas {
        max-width: 100%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    .content {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
}


.mainNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 0;
    background-color: var(--color-black);
    z-index: 1000;
    color: var(--color-white);

    .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
    }

    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        line-height: 1;
        font-size: 18px;

        li {
            a {
                display: block;
                cursor: pointer;
                position: relative;

                &:not(.cta) {
                    color: var(--color-white);
                    transition: color 0.3s ease;

                    &:after {
                        content: "";
                        height: 1px;
                        width: 100%;
                        background-color: var(--color-white);
                        position: absolute;
                        bottom: -8px;
                        left: 0;
                        transform: scaleX(0);
                        transform-origin: right;
                        transition: transform 0.3s ease;
                    }

                    &:hover {
                        &:after {
                            transform: scaleX(1);
                            transform-origin: left;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            li {
                &:not(:last-of-type) {
                    display: none;
                }
            }
        }
    }

    .logo {
        height: 40px;
        display: block;
    }
}




.cta {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 20px 30px;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: .2;
    border: 2px solid var(--color-secondary);

    &:hover {
        background-color: transparent;
        color: var(--color-secondary);
    }
}

.explain {
    width: 100%;
    padding: 180px 0;
    ol {
        width: 100%;
        li {
            position: relative;
            width: 100%;
            cursor: pointer;
            h2 {
                margin-bottom: 24px;
                font-size: clamp(2rem, 10vw, 6rem);
                &:before {
                    display: inline-block;
                    font-size: clamp(1rem, 3vw, 2rem);
                    color: var(--color-grey);
                    margin-right: 24px;
                    vertical-align: middle;
                }
                @media screen and (max-width: 1024px) {
                    font-size: clamp(2rem, 5vw, 4rem);
                    
                }
            }
            p {
                max-height: 0;
                overflow: hidden;
                max-width: 1024px;
                margin-right: auto;
                padding-left: 60px;
                transition: max-height 0.2s ease-in-out;
            }

            img {
                opacity: 0;
                transform: scale(0.9) rotate(0) translateY(-50%);
                border-radius: 20px;
                position: absolute;
                top: 50%;
                right: 0%;
                max-width: 400px;
                z-index: 2;
                @media screen and (max-width: 1024px) {
                    display: none;
                    
                }
            }

            &:not(:last-of-type) {
                padding-bottom: 60px;
                margin-bottom: 60px;
                border-bottom: 2px solid var(--color-grey);
            }

            &:first-child h2 {
                &:before {
                    content: "01";
                }
            }

            &:nth-child(2) h2 {
                &:before {
                    content: "02";
                }
            }

            &:nth-child(3) h2 {
                &:before {
                    content: "03";
                }
            }
            &:not(.active):hover {
                img {
                    opacity: 1;
                    transform: scale(1) rotate(10deg) translateY(-50%);
                    transition: all 0.2s ease-in-out;
                }
            }
            &.active {
                z-index: 3;
                p {
                    max-height: 1000px;
                }
            }
        }
    }
}


.donation {
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .wrap {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        h2 {
            font-size: clamp(2rem, 10vw, 5rem);
            max-width: 850px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 40px;
        }

        p {
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 40px;
        }
    }

    @media screen and (max-width: 1024px) {
        padding: 50px 0;
        height: auto;
        .wrap h2 {
            font-size: clamp(1.5rem, 7vw, 4rem);
        }

        .wrap p {
            font-size: clamp(1rem, 3vw, 1.5rem);
        }
        
    }
}


.memoire {
    background: var(--color-black) url("../img/memory.jpg") no-repeat top center;
    background-attachment: fixed;
    background-size: cover;
    color: var(--color-white);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    @media screen and (max-width: 1024px) {
        background: var(--color-black) url("../img/memory-mobile.jpg") no-repeat top center;
        background-size: contain;
        background-attachment: scroll;
        align-items: flex-end;
        padding-bottom: 20px;
    }

    .wrap {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        
        @media screen and (max-width: 1024px) {
            align-items: flex-start;
        }

        blockquote {
            font-size: clamp(1.5rem, 5vw, 2.5rem);
            font-weight: 800;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            max-width: 1100px;
            i {
                font-size: 3rem;
                &:first-of-type {
                    margin-right: 16px;
                }
                &:last-of-type {
                    margin-left: 16px;
                }
            }

            @media screen and (max-width: 1024px) {
                font-size: clamp(1rem, 5vw, 2rem);
                text-align: left;
                i {
                    display: none;
                }
            }
        }

        p {
            font-size: clamp(1rem, 3vw, 1.5rem);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            @media screen and (max-width: 1024px) {
                text-align: left;
            }
        }
    }
}



footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 40px 0;
    text-align: center;

    .wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    @media screen and (max-width: 1024px) {
        .wrap {
            p {
                font-size: 14px;
            }
        }
    }
}