/*body {
    background-color: red;
}*/

/* Initialisation de notre projet */

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

/* Déclaration des variables */
html {
    --var-bg-color: #7743e9;
    --var-secondary-color: #6e51cf;
    --var-text-color: #fff;
    --var-text-color-dark: #333;
    --var-bg-light: #f0f4ff;
    --var-bg-dark: #d3c9f3;
}

body {
    background-color: var(--var-bg-light);
    color: var(--var-text-color-dark);
}

header {
    height: 10rem;
    background-color: white;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

body header a {
    font-size: 2rem;
    font-weight: 900;
}

header nav ul{
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1rem;
}

nav ul li a {
    text-decoration: none;
    color: var(--var-text-color-dark);
    font-size: 500;
}

av ul li a:hover {
    color: var(-var-secondary-color);
}

header button {
    background-color: var(--var-secondary-color);
    color: var(--var-text-color);
    border: none;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

header button:hover {
    background-color: #54d219;
    color: var(--var-text-color-dark);
    border: 1px solid var(--var-secondary-color);
}


/* Mise en forme de la section main */
main {
    padding: 2rem;
}

main li {
    margin-left: 2rem;
}

.frac{
    display:inline-block;
    margin-left:.1em;margin-right:.1em;
    vertical-align:-64%;
    text-align:center;
  }
  .frac > .num, .frac > .den{
    display:inline-block;
    padding:0 .1em;
  }
  .frac > .fracbar {display:block;
    height:0;margin:0;border:0;
    border-bottom:.1em solid;
    overflow:hidden;
  }
  .den{vertical-align:top;}
  
/* Mise en forme footer */

footer {
    width: 100%;
    height: 100px;
    background-color: #ccb6fa;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--var-text-color-dark);
}