/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --header-bg: url('images/Général/IMG_4881.jpeg');
    --accent-color: #e27e97;
    --link-color: #c3385b;
    --bg-color: #fdb3cc;
    --bg-color2: #c2f9ff;
    --text-color: #4e1b3e;
    --favorite-color: #ffe3eb;
    /* you can change the stripe colors easily from here */
    --stripe-color: #ffc4d8;
    --stripe-color2: #feb5d0;
    scroll-behavior: smooth;


}



/* you can get hex codes from sites like this:
   https://palettes.shecodes.io/    
   i just looked up "css color templates" to find that link! */

/* this applies to all the content */
* {
    color: var(--text-color);
    /* change the font here, it's set up to all use the same one */
    font-family: monospace;
    border-radius: 1em;
}

/* this is for when you select text on the page */
::selection {
    background: var(--accent-color);
    color: var(--bg-color);
}

body {
    background-color: var(--bg-color2);
    margin: 0;
    font-size: 1.3em;
}



/* i think having better line spacing helps text to be more readable, but you can remove it if you want */
p {
    line-height: 1.5em;
}

small {
    display: flex;
    justify-content: right;
    font-size: 0.6em;
}

header {

    background-color: var(--accent-color);
    /* you can add the image url in :root (at the top) if you want */
    background: var(--header-bg);
    background-size: 100%;
    background-position: center;
    /* change the minimum height if you want it to take up more/less space */
    min-height: 200px;
    /* can also limit the size of the header if you don't want to fill up the top. i recommend at least 800px tho! */
    /*max-width: 980px;*/
    margin: 0 auto;
    border-top: 4px solid var(--text-color);
    border-bottom: 4px solid;
    border-bottom-color: #c3385b;
    /* i have a default border-radius set, but i didn't want rounded corners on this element */
    border-radius: 0;
    display: flex;
    align-items: center;
}

/* this is your site title displayed at the top of the page */
header>h1 {
    margin: 20px auto;
    border-radius: .3em;
    max-width: 100%;
    padding: 12px 15%;
    font-size: 2.5em;
    /* you can change the text-align to center or right if you want it placed differently */
    text-align: center;
    background-color: var(--bg-color);
    border: 2px solid var(--text-color);
    text-shadow: var(--bg-color2) 1px 1px 3px;


}


/*enlève le soulignement des liens titres*/
body>h2 {
    text-decoration: none;
}


nav {

    padding: 1em;
    margin: 1em;
    font-weight: bold;
    font-size: 14px;
}

nav>ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
    /* this line takes away the dot in front of the list items */
    list-style-type: none;
    /* list items have default padding but we don't need it for these */
    padding-left: 0;
    /* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly;
}

nav li {
    display: flex;
    text-align: center;
    justify-content: center;
}

nav li>a {
    display: flex;
    background-color: var(--favorite-color);
    box-shadow: var(--accent-color) 4px 4px;
    /* padding: .5em 3em; /*
    /* this takes away the link underline */
    text-decoration: none;
    justify-content: center;
    align-content: space-evenly;
    margin: 10px;
    max-width: 175px;
    flex: 1;

}

nav li>a:hover {
    box-shadow: var(--text-color) 4px 4px;
}

a {

    text-decoration: none;
    color: var(--link-color);
    border-radius: .3em;
    text-shadow: var(--bg-color) 1px 1px 3px;
    font-weight: bold;
    transition: background-color 400ms ease-out;

}

h2>a {
    color: var(--text-color);

}




a:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

/* you can change this to anything you want :) */
ul {

    list-style-type: "❤︎ ";
}

.sidebarsticky {
    position: sticky;
    top: 4%;

}

#rsicones {
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 3rem;
    


}

#rsicones a {
    display: flex;
    justify-content: center;
    align-items: center;

    color: none;
    border-radius: 0.3em;
    transition: 150ms;

}

#rsicones a:hover {
    background-color: #feb5d0;
    color: none;

}

.todownload {
    display: flex;
    justify-content: center;
    gap: 10%;

}

#supportMeSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

#supportMeSection a {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#supportMeSection a:hover {

    background-color: #e27e9700;
    color: none;
    text-decoration: none;
    border-radius: none;
    text-shadow: #4e1b3e00 1px 1px 3px;
    font-weight: none;
    transition: background-color 400ms ease-out;

}

#buttonKofi,
#buttonReview {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;




}


#buttonKofi p,
#buttonReview p {
    font-size: small;
}




#buttonKofi img {

    min-width: 50%;
    max-width: 50%;
    height: auto;
    padding-bottom: 5%;
    padding-top: 5%;
}

#buttonReview img {

    min-width: 50%;
    max-width: 50%;
    height: auto;
}


.divider {
    display: flex;
    justify-content: center;



}

.divider img {
    min-width: 70%;
    max-width: 70%;


}

#sidebar {
    /* made the stripe bg with a generator:
    https://stripesgenerator.com/
     */

    background-image: linear-gradient(45deg, var(--stripe-color) 25%, var(--stripe-color2) 25%, var(--stripe-color2) 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, var(--stripe-color2) 75%, var(--stripe-color2) 100%);
    background-size: 65.05px 65.05px;
    min-width: 250px;
    max-width: 250px;
    max-height: 600px;
    margin: 1em;
    padding: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
}

#avatar {
    margin: .5em auto;
    box-shadow: var(--accent-color) 4px 4px;
    /* image size is 160px so i made its container a little bigger to fit the borders */
    max-width: 200px;
    max-height: 200px;
    border-radius: 1.5em;
}

#avatar img {
    display: flex;
    justify-content: center;
    background: var(--lighter-color);
    max-width: 200px;
    height: auto;
    border: 2px solid var(--text-color);
    border-radius: 1.5em;
}



#content {
    display: flex;
    max-width: 960px;
    margin: auto;
    padding-top: 1%;
}

main {
    background-color: var(--favorite-color);
    padding: 1em 2em;
    margin: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
    text-shadow: var(--bg-color2) 1px 1px 3px;

    * {
        box-sizing: border-box;
    }

}

main>h1,
main>h2,
main>h3 {
    background-color: var(--bg-color);
    border-radius: .4em;
    padding: .2em .5em;
    text-shadow: var(--bg-color2) 1px 1px 3px;
    max-width: 100%;
}

/* a class for centering text and images */
.center {

    text-align: center;
    align-items: center;
}

.bold {
    font-weight: bolder;
}

footer {
    background-color: var(--bg-color);
    text-shadow: var(--bg-color2) 1px 1px 3px;
    text-align: center;
    font-size: small;
    padding: 1em;
    margin: 1em auto;
    max-width: 960px;
}

.map {
    min-width: 100%;
    min-height: 300px;
}

/*anchor links pour naviguer dans la page proprement*/

#contactinfo,
#formulaire,
#accueil,
#tattooPics,
#flashDispo,
#tattooCicatrisé,
#illustration,
#TatouageClientexs,
#TatouageGénéral,
#Collègues,
#CréationSite,
#SitesCute {
    scroll-margin-top: 150px;
}


.galerieAccueil {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;


}

.galerieAccueil img {
    display: flex;
    justify-content: space-evenly;
    margin: 5px;
    width: 100%;
    max-width: 120px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* pour la galerie */

.gallery {

    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;



}

.gallery img {

    width: 100%;
    max-width: 120px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* pour la lightbox */

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d6;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
}

.lightbox .close,
.lightbox .prev,
.lightbox .next {
    position: absolute;
    font-size: 50px;
    color: #000000;
    cursor: pointer;
    background-color: rgba(245, 245, 245, 0.811);
    padding: 0px 15px;
    border: none;
    font-weight: bold;
}

.lightbox .close {
    top: 20px;
    right: 20px;

}

.lightbox .prev {

    left: 20px;
    top: 50%;
    transform: translate(50%);
}

.lightbox .next {

    right: 20px;
    top: 50%;
    transform: translate(-50%);
}


.mobileonly {
    display: none;
}






/* these are the mobile styles! */

@media only screen and (max-width: 800px) {
    #content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .computeronly {
        display: none;
    }


    header {
        background-image: none;
        background: linear-gradient(#c2f9ff, #c2f9ffed, #c2f9ff00);

        border: none;
        border-bottom-left-radius: 5%;
        border-bottom-right-radius: 5%;
        position: sticky;
        top: 0;
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }





    .sticky {
        position: sticky;
        top: 19%;
        min-width: 100%;
        max-width: 100%;

    }

    #button-menu {
        display: flex;
        background-color: #c2f9ffb3;
        justify-content: center;
        align-self: center;
        align-items: center;
        width: 6em;
        height: 2em;
        padding: 5px 10px;
        margin-bottom: 1em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;

        font-weight: bolder;


    }

    #navbarre {
        display: flex;



    }

    #navigation {
        display: none;
    }

    nav {
        /* this stuff makes it wrap around on mobile */
        display: flex;
        top: 0;
        left: 0;

        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        font-weight: bold;
        font-size: 1rem;
        background-image: linear-gradient(45deg, var(--stripe-color) 25%, var(--stripe-color2) 25%, var(--stripe-color2) 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, var(--stripe-color2) 75%, var(--stripe-color2) 100%);
        background-size: 65.05px 65.05px;
        margin: 1.5em;
        padding: 0em 3.5em 0.5em 3.5em;
        margin-bottom: 1.5em;
        border: 2px solid var(--text-color);
        box-shadow: var(--accent-color) 4px 4px;


    }

    nav>h1 {
        font-size: 2rem;

    }


    nav>ul {
        display: flex;
        min-width: 50%;
        max-width: 50%;
        margin: auto;
        line-height: 3rem;
        /* this line takes away the dot in front of the list items */
        list-style-type: none;
        /* list items have default padding but we don't need it for these */
        padding-left: 0;
        /* and this spaces out the buttons so they're not touching */
        justify-content: space-evenly;
    }



    nav li>a {
        display: flex;
        flex: 1;
        background-color: var(--favorite-color);
        box-shadow: var(--accent-color) 4px 4px;
        padding: 5px 30%;
        text-decoration: wavy;
        justify-content: center;
        align-content: space-evenly;
        margin: 10px;
        min-width: 100%;
        max-width: 100%
    }


    nav li>a:hover {
        box-shadow: var(--text-color) 4px 4px;
    }

    a {

        color: var(--link-color);
        border-radius: .3em;
        text-shadow: var(--bg-color) 1px 1px 2px;
        font-weight: bold;
        transition: background-color 400ms ease-out;

    }

    a:visited {
        color: var(--text-color);
    }

    a:hover {
        background-color: var(--accent-color);
        color: var(--text-color);
        padding: 2px;
    }


    main {
        display: block;
        max-width: 90%;


    }

    main>h1 {
        font-size: 1.7em;
        margin: .2em;
    }


    main>h2 {
        font-size: 1.2em;
    }


    footer {
        margin: 1em;
    }



    #sidebar {
        display: none;

    }


    .map {
        min-width: 70%;
        max-width: 80%;
        min-height: 100%;
    }



    #iconemobile {
        display: flex;
        justify-content: center;
        
    }



    #rsicones {
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    


}


    /*anchor links pour naviguer dans la page proprement*/

    #contactinfo {
        scroll-margin-top: 170px;
    }

    #formulaire {
        scroll-margin-top: 170px;
    }

    #accueil {
        scroll-margin-top: 170px;
    }

    #flashDispo {
        scroll-margin-top: 170px;
    }


    .mobileonly {
        display: flex;
    }



    /*galerie media only*/

    .galerieAccueil img {
        display: flex;
        justify-content: center;

        width: 100%;
        max-width: 100px;
        height: auto;

    }


    .gallery img {
        max-width: 80px;
    }

    .lightbox img {
        max-width: 80%;
        height: auto;
    }


    .lightbox {
        width: 100%;
        height: 100%;
    }




    .lightbox .close,
    .lightbox .prev,
    .lightbox .next {
        position: absolute;
        font-size: 50px;
        color: #000000;
        cursor: pointer;
        background-color: rgba(245, 245, 245, 0.811);

        border: none;
        font-weight: bold;
    }

    .lightbox .close {
        padding: 0px 15px;
        top: 15%;
        right: 5%;

    }

    .lightbox .prev {
        padding: 0px 15px;
        left: 5%;
        top: 80%;
        transform: translate(50%);
    }

    .lightbox .next {
        padding: 0px 15px;
        right: 5%;
        top: 80%;
        transform: translate(-50%);
    }


}