@layer base {
    .body-content {
        @apply mx-auto py-10 sm:px-6 lg:px-8;
    } /* max-w-7xl */

    header h2 {
        @apply font-semibold text-xl text-gray-800 leading-tight;
    }

    h1 {
        @apply text-6xl font-normal leading-normal mt-0 mb-2 text-gray-800;
    }

    h2 {
        @apply text-5xl font-normal leading-normal mt-0 mb-2 text-gray-800;
    }

    h3 {
        @apply text-4xl font-normal leading-normal mt-0 mb-2 text-gray-800;
    }

    h4 {
        @apply text-3xl font-normal leading-normal mt-0 mb-2 text-gray-800;
    }

    h5 {
        @apply text-2xl font-normal leading-normal mt-0 mb-2 text-gray-800;
    }

    h6 {
        @apply text-xl font-normal leading-normal mt-0 mb-2 text-gray-800;
    }

    .loading-container {
        @apply flex justify-center items-center;
    }

    .loading-animate {
        @apply animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-indigo-500;
    }

    /* Capitou */
    .bg-1 {
        @apply bg-gradient-to-b from-purple-500 to-blue-500;
    }

    /* Epsilon 1 */
    .bg-2 {
        @apply bg-gradient-to-b from-amber-500 to-yellow-500;
    }

    /* Grand Esterel */
    .bg-3 {
        @apply bg-gradient-to-br from-slate-700 to-blue-500;
    }

    /* Grand Esterel */
    .bg-8 {
        @apply bg-gradient-to-b from-blue-500 to-sky-500;
    }

    /* Modale Heat */
    .bg-7 {
        @apply bg-gradient-to-b from-red-600 to-red-500;
    }

    /* La Palud */
    .bg-4 {
        @apply bg-gradient-to-b from-red-500 to-pink-500;
    }

    /* Capitou */
    .bg-6 {
        @apply bg-gradient-to-b from-emerald-800 to-green-600;
    }

    /* 4 chemins */
    .bg-5 {
        @apply bg-gradient-to-b from-pink-500 to-fuchsia-500;
    }

    .bg-10 {
        @apply bg-gradient-to-br from-green-700 to-green-500 ;
    }
}