/* importer police d'écriture */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* normalisation en plus */
*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

/* palette de couleur */
:root {
    --gradiant: linear-gradient(90deg, rgba(35, 35, 164, 1) 0%, rgba(0, 146, 255, 1) 50%, rgba(8, 0, 142, 1) 100%);
}

/* mise en page */
html {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    font-family: 'Anton', sans-serif;
    /* Ajustement de la taille des polices à la racine du document */
    font-size: clamp(14px, 0.5rem + 0.5vw, 24px);
    cursor: url(../image/curseur.png) 0 0 , pointer;
}

main {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    background-image: url(../image/mobile.jpg);
    max-width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    overflow: hidden;
}


footer {
    min-height: 15vh;
    width: 100vw;
    border-top: 3px solid;
    border-image: linear-gradient(to right, #3172d3, #0093ea, #00b3f5, #00d0f7, #17ebf4) 1 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
}

h1 {
    background-image: var(--gradiant);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 1px 0 0 #000000;
}

section {
    width: 100vw;
    height: 85vh;

    font-size: 2rem;
    text-align: center;

    /*Conteneur flex colonne*/
    display: flex;
    flex-direction: column;
    align-items: center;

}





header {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #3172d3, #0093ea, #00b3f5, #00d0f7, #17ebf4) 1;
}

/* Style pour les écrans plus larges (fond) */

 @media screen and ( min-width: 576px){
    body{
        background-image: url(../image/tablette.jpg);
       }    
 }
 @media screen and ( min-width: 992px){
    body{
        background-image: url(../image/ordi.jpg);
       }    
 }