@font-face {
    font-family: 'Retro';
    src: url('/font/Retro\ Gaming.ttf');
}

@font-face {
    font-family: 'BREAK IT';
    src: url('/font/BREAK IT.ttf')
}

body {
    border: 20px;
    text-align: center;
    background-blend-mode: soft-light;
    
}

h1 {
    color: black;
    text-decoration: underline;
    text-align: center;
    padding-top: 20px;
    font-family: 'Retro', Arial, Helvetica, sans-serif;
}

.container {
    text-align: center;
    display: flex;
    flex-direction: column; /* Aligne les éléments de haut en bas */
    align-items: center;  
    gap: 10px;
}

.image-container {
    margin-top: 0px;
}


.box-button {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: 4px solid black;
    background-color: gray;
    padding-bottom: 8px;
    transition: 0.1s ease-in-out;
    user-select: none;
    font-family: 'Retro', Arial, Helvetica, sans-serif;
    
  }
  
  .button {
    background-color: #dddddd;
    border: 4px solid #fff;
    padding: 3px 6px;

  }
  
  .button span {
    font-size: 1.2em;
    letter-spacing: 1px;
  }
  
  .box-button:active {
    padding: 0;
    margin-bottom: 10px;
    transform: translateY(10px);
}
   

html {
    background: url(img/carreaux/photoeffets.com_\ \(1\).jpg ) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
p {background-color: pink;;}