@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';


:root {
    --background1: #060f1b;
    --background2: #1e2329;
    --background-light: #fff9ec;
    --font1: #f0e6d2;
    --bleu1: #b5f3f8;
    --bleu2: #0dcbe6;
    --bleu3: #0eb6b2;
    --bleu4: #03688a;

    --diamond1: #E1FCFC;
    --diamond2: #94FDFF;
    --diamond3: #3FD9D9;
    --diamond4: #2AA19D;
    --diamond-radient: to bottom,
        var(--diamond4)0%,
        var(--diamond3)25%,
        var(--diamond2)40%,
        var(--diamond1)50%,
        var(--diamond2)60%,
        var(--diamond3)70%,
        var(--diamond4)100%;

    --gold1: #FCECAF;
    --gold2: #E1C66D;
    --gold3: #B78218;
    --gold4: #67380E;
    --gold-radient: to bottom,
        var(--gold4)0%,
        var(--gold3)25%,
        var(--gold2)40%,
        var(--gold1)50%,
        var(--gold2)60%,
        var(--gold3)70%,
        var(--gold4)100%;


    --silver1: #FCFCFC;
    --silver2: #C2C2C2;
    --silver3: #919191;
    --silver4: #373737;
    --silver-radient: to bottom,
        var(--silver4)0%,
        var(--silver3)25%,
        var(--silver2)40%,
        var(--silver1)50%,
        var(--silver2)60%,
        var(--silver3)70%,
        var(--silver4)100%;

    --copper1: #FDF9E2;
    --copper2: #FEB894;
    --copper3: #D96340;
    --copper4: #A03E29;
    --copper-radient: to bottom,
        var(--copper4)0%,
        var(--copper3)25%,
        var(--copper2)40%,
        var(--copper1)50%,
        var(--copper2)60%,
        var(--copper3)70%,
        var(--copper4)100%;

    --iron1: #919191;
    --iron2: #8A8888;
    --iron3: #696969;
    --iron4: #2B2B2B;
    --iron-radient: to bottom,
        var(--iron4)0%,
        var(--iron3)25%,
        var(--iron2)40%,
        var(--iron1)50%,
        var(--iron2)60%,
        var(--iron3)70%,
        var(--iron4)100%;

    /* hauteurs des sections lorsque l'écran est entre 1025px et 1367px*/
    /* --medium-banner-height: 500px;  */

    /* Padding sections  */
    --padding: 0 20px;

    /* hauteurs des sections lorsque l'écran dépasse  1367px*/
    --nav-height: 64px;
    --banner-height: 410px;
    --about-height: 540px;
    --skill-height: 1032px;
    --portofolio-height: 2050px;
    --contact-height: 823px;
    --footer-height: 400px;
    --page-height: calc(var(--banner-height) + var(--about-height) + var(--skill-height) + var(--portofolio-height) + var(--contact-height) + var(--footer-height));
}

/* 🌱 Base : styles mobiles en priorité */

img,
video {
    max-width: none !important;
}

body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background1);
    margin: 0;
}

body {
    font-family: sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: var(--background1);
}

p,
table,
h1,
h2,
h3,
h4,
h5,
button,
span, 
a {
    color: var(--font1);
}

/* Logo/Heading serif ressemblant à Beaufort */
h1 {
    font-family: "Cinzel", serif;
    font-size: 2.4rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

h2 {
    font-family: "Cinzel", serif;
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.text-diamond {
    background-image: linear-gradient(var(--diamond-radient));
    color: transparent;
    background-clip: text;
}

.text-gold {
    background-image: linear-gradient(var(--gold-radient));
    color: transparent;
    background-clip: text;
}

.text-silver {
    background-image: linear-gradient(var(--silver-radient));
    color: transparent;
    background-clip: text;
}

.text-copper {
    background-image: linear-gradient(var(--copper-radient));
    color: transparent;
    background-clip: text;
}

.text-iron {
    background-image: linear-gradient(var(--iron-radient));
    color: transparent;
    background-clip: text;
}

body {
    font-family: "Montserrat", sans-serif;
}


/* Texte métalique avec une lègère ombre, nécessite le fichier shadow-metal-text.js afin de dublique le texte pour l'ombre
        - au niveau du Html il faut ajouter la classe métal-title + la classe métalique text-shadow-XXX en changeant les XXX par le choix du métal 
*/
.metal-title::before {
    color: transparent;
    background-clip: text;
    position: absolute;
    right: -1px;
    top: 2px;
}

.metal-title[data-prefix]::before {
    content: attr(data-prefix);
}

.text-shadow-diamond {
    color: var(--diamond2);
    position: relative;
}

.text-shadow-diamond::before {
    background-image: linear-gradient(var(--diamond-radient));
}

.text-shadow-gold {
    color: var(--gold2);
    position: relative;
}

.text-shadow-gold::before {
    background-image: linear-gradient(var(--gold-radient));
}

.text-shadow-silver {
    color: var(--silver2);
    position: relative;
}

.text-shadow-silver::before {
    background-image: linear-gradient(var(--silver-radient));
}

.text-shadow-copper {
    color: var(--copper2);
    position: relative;
}

.text-shadow-copper::before {
    background-image: linear-gradient(var(--copper-radient));
}

main {
    padding: 0px;
    margin: 0px;
    width: 100%;
    /* position: relative; */
}

section {
    margin-top: 40px;
}

/* 📱 Mobile large (481px et plus) */
@media (min-width: 481px) {
    body {
        font-size: 17px;
        /* Un peu plus grand sur écrans plus larges */
    }
}

/* 📲 Tablettes (768px et plus) */
@media (min-width: 768px) {
    :root {
        --skill-height: 720px;
    }

    main {
        max-width: 700px;
        margin: auto;
    }

    header {
        text-align: left;
        padding: 1rem 2rem;
    }
}

/* 💻 Ordinateurs portables (1025px et plus) */
@media (min-width: 1025px) {
    :root {
        /* --background1: #f4430d; */

        /* hauteurs des sections lorsque l'écran dépasse  1367px*/
        --nav-height: 64px;
        --banner-height: 500px;
        --about-height: 440px;
        --skill-height: 654px;
        --contact-height: 790px;
        --footer-height: 250px;
        --page-height: calc(var(--banner-height) + var(--about-height) + var(--skill-height) + var(--portofolio-height) + var(--contact-height) + var(--footer-height));
    }

    h1 {
        font-size: 2.4rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    main {
        max-width: 1025px;
    }

    section {
        margin-top: 60px;
    }

    .nav-title-margin {
        margin-top: var(--nav-height);
    }
}

/* 🖥 Grands écrans (1367px et plus) */
@media (min-width: 1367px) {

    :root {
        /* --background1: #f40dd5; */

        /* hauteurs des sections lorsque l'écran dépasse  1367px*/
        --nav-height: 64px;
        --banner-height: 600px;
        --skill-height: 630px;
        --portofolio-height: 770px;
        --page-height: calc(var(--banner-height) + var(--about-height) + var(--skill-height) + var(--portofolio-height) + var(--contact-height) + var(--footer-height));
    }

    main {
        min-width: 1300px;
        max-width: 1300px;
    }

}

/* 🖥📺 Ultra-large (1920px et plus) — optionnel */
@media (min-width: 1920px) {
    :root {
        --skill-height: 635px;
    }

    main {
        max-width: 1600px;
    }
}