css

:root

{

  --black : #151414aa;

  --white: #ffffff;

  --whiteGrayer : #ebebeb;

  --grey : #D9D9D9;

  --blue : #002550;

  --blueLighter : #4d64b8;

  --yellow : #ffbe55;

  --yellowDarker : #daa654;

  --good : #00ff04;

  --bad : #dc2323;

  --BigTitle : 32px;

  --title : 25px;

  --font : 20px;

}

body{

    font-family: 'Montserrat', sans-serif;

}

h1{

    font-family: 'Space Grotesk', sans-serif; 

    font-weight: bold;

}

.clickable{

    background-color: var(--yellow);

    color: var(--black);

    transition: opacity 0.4s ease-out;

}

.clickable:hover{

    cursor: pointer;

    background-color: var(--yellowDarker);

    color: var(--white)

}

 No newline at end of file

.history{

    background-color: var(--blueLighter);

    color: var(--white);

    padding: 15px;

}

 No newline at end of file

<x-layout>

    <link rel="stylesheet" href="../css/app.css">

    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">

    <link rel="stylesheet" href="{{ asset('/css/create_div.css') }}">

    <div style="display : flex; flex-direction: row">

        <div style="width: 50%; margin-right: 50px; height: 100%; display:flex; align-items: center; flex-direction: column">

                <img src="{{ asset('/images/Diver1.png') }}" alt="Diver illustration">

            @else

                <p>Plongées crées</p>

                <table>

                <table class="history">

                    <tr>

                        <th>Date et heure</th>

                        <th>Nombre maximum d'inscrits</th>