html{
    --font-celtic:'Celtic', Arial, sans-serif;
    --font-arial:'Arial Rounded', Arial, sans-serif;
    --btn-color: #996533;
    --bg-color-brown: #996533;
    --white: #ffffff;
    --black: #000000;
    --dark-primary: #7a502a;
    --light-primary: #c49b76;
}

@font-face {
    font-family: 'Celtic';
    src: url('../fonts/CELTG___.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Rounded';
    src: url('../fonts/arlrdbd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body{
    font-family: var(--font-arial);

}

.titre_h1{
    font-family: var(--font-celtic);
    font-size: 4vw;
    text-align: center;
    padding: 3rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
}


.btn-container{
    display: flex;
    justify-content: center;
}

.btn{
    display: inline-block;
    background-color: var(--btn-color);
    color: var(--white);
    padding: 0.8rem 1.8rem;
    text-decoration: none;
    border-radius: 30px;
    border: 0;
    font-weight: bold;
    transition: all 0.3s;
    font-family: var(--font-arial);
}

.btn:hover {
    background-color: var(--dark-primary);
    transform: translateY(-3px);
}