/*

#3c1414  Black
#f4e3cd  White
#733228  Dark
#c0533c  Bright

*/

@font-face {
    font-family: 'Lexendeca-Bold' ;
    src: url(fonts/LexendDeca-Bold.ttf);
}

@font-face {
    font-family: 'Lexendeca-Light' ;
    src: url(fonts/LexendDeca-Light.ttf);
}

@font-face {
    font-family: 'Lexendeca-Medium' ;
    src: url(fonts/LexendDeca-Medium.ttf);
}

@font-face {
    font-family: 'Lexendeca' ;
    src: url(fonts/LexendDeca-Regular.ttf);
}

@font-face {
    font-family: 'Uncut' ;
    src: url(fonts/UncutSans-Bold.otf);
}

body {
    background-color:#f4e3cd;
    margin:0;
    padding:0;
}

header {
    height:80px;
    margin:0;
    background-color: #c0533c ;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

h1 {
    font-family: 'Uncut';
}

h2 {
    font-family: 'Lexendeca-Bold';
    font-size:24px;
}

h3 {
    font-family: 'Lexendeca-Light';
    text-align: left;
    font-size:16px;
}

#grid {
    margin-left:200px;
    margin-right:200px;
    margin-top:50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 10px; /* Espacement entre les cellules */
    width:80vw;
}

.item {
    background-color: rgb(255, 255, 255);
    width:auto;
    padding: 20px;
    text-align: center;
    font-size: 1.5rem;
    border: 1px solid #333;
}

img {
    max-width: 100px;
    max-height:100px;
}

button {
    background-color:black;
    color:white;
    border:none;
}