@import url('style_class_list.css');
@import url('style_header.css');
@import url('style_form.css');
@import url('style_array.css');

/*fonts*/

@font-face {
    font-family: 'Bahnschrift';
    src: url('./fonts/bahnschrift.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'RobotoSlab';
    src: url('./fonts/RobotoSlab.ttf') format('truetype');
    font-display: swap;
}

/*index*/

html {
    font-size: 16px;
    scroll-behavior: smooth !important;; 
    -webkit-scroll-behavior: smooth !important;
    scroll-padding-top: 7rem;

}

/*reset des tailles*/
/* *, ::after, ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} */

main {
    background-color: #353535;
    width: 85vw;
    margin: 6.5rem auto 6.5rem;
    padding: 10px;

}


footer {
    background-color: darkgreen;
}

h1 {
    color: white;
    font-size: 2rem;
    font-family: 'Bahnschrift';
}

h2 {
    color: white;
    font-size: 1.4rem;
    font-family: 'Bahnschrift';
}

h3 {
    color: white;
    font-size: 1.2rem;
    font-family: 'Bahnschrift';
}

p {
    color: rgb(246, 171, 75);
    font-size: 1rem;
    font-family: 'RobotoSlab';
    letter-spacing: 1px;
}

body {
    margin: 0;
    background-color: rgb(0, 0, 0);
    cursor: default;
}

section {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 50px;
}

#preface {
    display: flex;
    gap: 2vw;
}

#preface img {
    filter: contrast(120%) opacity(80%) sepia(100%);
}



/*Ecran tel / Phone screen */
@media only screen and (max-width: 810px) {

    html {
        scroll-padding-top: 3.5rem;
    }

    main {
        background-color: #353535;
        width: 90vw;
        margin: 3rem auto 3rem;
    }

    #preface {
        flex-direction: column;
    }
}

/*tablette*/
@media only screen and (min-width: 810px) and (max-width: 1367px) {

    html {
        scroll-padding-top: 5rem;
    }

    main {
        margin: 5rem auto 5rem;
    }
}



/* @media screen and (prefers-reduced-motion: reduce) { 
   html { scroll-behavior: 'smooth'
   }
} */