@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root {
    --background: #141414;

    --foreground-light: #3c3c3c;
    --foreground-light-transparent: #3c3c3c80;
    --foreground: #2b2b2b;
    --foreground-transparent: #2b2b2b80;
    --foreground-dark: #1a1a1a;

    --border-light: #696969;
    --border: #373737;
    --border-dark: #1c1c1c;

    --text-primary: #ffffff;
    --text-secondary: #cccccc;

    --primary-light: #adff2f;
    --primary: #7ACA00;
    --primary-dark: #3D6500;
}

.light-theme {
    --background: #ffffff;
    --text-primary: #141414;
    --primary: #7ACA00;
    --primary: #7ACA00;
    --primary-dark: #3D6500;
}

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

body {
    background-color: var(--background);
    font-family: "Cairo", sans-serif;
    transition: background 0.5s ease;
}

/* Supprimer le style par défaut de certains éléments */
a, li, button {
    all: unset;
}

a, button {
    cursor: pointer;
}

/* - - - - - - - - - - - - - - - - - - - - */

header {
    position: fixed;
    z-index: 10;
    width: 100%;

    display: flex;
    justify-content: center;
    padding: 0 20px;
    
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

section {
    width: 100%;
    max-width: 1100px;
    margin: 200px 0;

}



.button {
    color: white;
    background-color: var(--primary);
    border-radius: 0.4rem;
    padding: 0.4rem 1.4rem;
    font-size: 20px;
    font-weight: 600;
}

.button:hover {
    background-color: var(--primary-dark);
    transition: background 0.3s ease;
}