style.css

/* couleurs buttercup :
    '50': #fefae8,
    '100': #fdf2c4,
    '200': #fbe28d,
    '300': #f9ca4b,
    '400': #f5b21b,
    '500': #e5990d,
    '600': #c67408,
    '700': #9e510a,
    '800': #824111,
    '900': #6f3514,
    '950': #411a07,
*/

body {
    background-color: #fefae8;
    margin: 6vw;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1, h2 {
    color: #9e510a;
    font-family: 'Cal Sans';
    font-size: 10vw;
}

h2 {
    font-size: 5vw;
}

.feed {
    margin-bottom: 3em;
    border-radius: 2em;
  }

.refresh-btn {
    cursor: pointer;
    margin-bottom: 3em;
    padding: 0.7em;
    border: 0;
    border-radius: 8px;
    color: #fefae8;
    background-color: #e5990d;
    font-size: medium;
    font-weight: bold;
}

.refresh-btn:hover {
    background-color: #c67408;
}

.user-card {
    display: flex;
    align-items: center;
    font-size: medium;
    gap: 1em; /*  espaces entre les lignes et entre les colonnes d'une grille */
    border: 1px solid #e5990d;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 1em;
    max-width: 100%; /* ne pas dépasser le contenu parent */
}

.user-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.5; /* espace entre les lignes */
    word-break: break-word; 
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}

.dropdown-btn {
    background-color: #411a07;
    color: #fefae8;
    padding: 20px;
    font-size: 2em;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    border: none;
    display: none;
    position:absolute; /* obligatoire sinon il reste dans le flux normal de la page */
    z-index: 1; /* pour passer devant les autres éléments */
    background-color: #411a07;
    font-size: 1.5em;
    padding: 20px;
    line-height: 1.5;
}

.dropdown-content a {
    display: block; /* chaque lien prend toute la largeur */
    color: #fefae8;
    text-decoration: none;
    padding-right: 31px;
}

.dropdown-content a:hover {
    color: #fbe28d;
}

.form-container {
    font-size: medium;
    border: 1px solid #e5990d;
    border-radius: 8px;
    padding: 1em;
    padding-top: 2em;
    padding-bottom: 0;
    max-width: 100%; 
}

.form-container form {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.form-container label {
    font-weight: bold;
}

.form-container input {
    padding: 0.3em;
    margin-left: 1em;
    border: 1px solid;
    border-radius: 6px;
    font-size: medium;
}

.form-container input[type='file'] {
    border: none;
}

.form-container button {
    cursor: pointer;
    margin-bottom: 3em;
    padding: 0.7em;
    border: 0;
    border-radius: 8px;
    color: #fefae8;
    background-color: #e5990d;
    font-size: medium;
    font-weight: bold;
}

.form-container button:hover {
    background-color: #c67408;
}

.grid-btn, .column-btn, .add-btn {
    cursor: pointer;
    padding: 0.5em;
    margin: 0.5em;
    margin-left: 0;
    margin-bottom: 2em;
    border: 0;
    border-radius: 8px;
    color: #fefae8;
    background-color: #e5990d;
    font-size: x-large;
}

.grid-btn:hover, .column-btn:hover {
    background-color: #c67408;
}

.galerie-img {
    width: 24vw;
    height: 24vw;
    margin: 10px;
    object-fit: cover; /* recadre l’image proprement dans le cadre défini, sans la déformer */
}

.toolbar {
    display: flex;
    justify-content: space-between; /* boutons aux extrémités */
}

.delete-btn {
    cursor: pointer;
    padding: 0.4em;
    margin-top: 0.8em;
    border: 0;
    border-radius: 8px;
    color: #fefae8;
    background-color: #e5990d;
    font-size: medium;
    font-weight: bold;
}
    
.delete-btn:hover {
    background-color: #c67408;
}

.image-container {
    display: flex;
    flex-direction: column;
}

.image-container button {
    width: 24vw;
    margin-left: 10px;
    padding: 0.4em;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    color: #fefae8;
    background-color: #e5990d;
    font-size: medium;
    font-weight: bold;
}

.image-container button:hover {
    background-color: #c67408;
}

.carrousel {
    width: 85vw;
    height: 20vw;
    overflow: hidden; /* cache ce qui dépasse */
    margin-bottom: 5vw;
}

.slides {
    display: flex;
    width: 350%; /* 100% x nombre d'images => crée une rangée d'images horizontales que l'on enveloppe dans un autre div Carrousel */
    transition: transform 0.5s ease-in-out;
}

.slides img {
    width: 100vw;
    height: 70vw;
    object-fit: cover;
}

.game-container {
    margin-bottom: 5vw;
    padding: 5vw;
    padding-top: 0;
    padding-left: 2vw;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#demineur-game, #jeu-oie-game {
    margin: 20px;
}