@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;700&family=Raleway:wght@400;700&family=Orbitron:wght@400;700&family=Abril+Fatface&display=swap');

.playfair { font-family: 'Playfair Display', serif; }
.quicksand { font-family: 'Quicksand', sans-serif; }
.raleway { font-family: 'Raleway', sans-serif;  }
.orbitron { font-family: 'Orbitron', sans-serif; }
.abril { font-family: 'Abril Fatface', serif;  }


        /* Ensure slide content is centered and takes up full space */
        .reveal section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 100%;
            width: 100%;
        }
  /* Style pour un centrage propre */
    .reveal section {
      text-align: left;
    }

        .reveal h3{
            padding-top: 0.2em;
            padding-bottom: 0.2em;

            background-color: rgba(6, 6, 49, 0.4);
        }
        .reveal ul {
            list-style-type: disc;
        }
         .reveal ul li {
            font-size : 1.2em;
 
        }
                 .reveal ul li li{
            font-size : 0.8em;
 
        }

        canvas {
            max-width: 80%;
            margin: 20px auto;
            display: block;
        }

         /* Style pour le contenu animé */
    .slide-content {
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }
     .slide-content p{
        font-size: 1.5em;
    }

    .slide-content.hidden {
      opacity: 0;
      pointer-events: none; /* Désactive les interactions quand caché */
    }

    /* Assurer que le titre reste visible */
    .reveal h2 {
         font-family: 'Orbitron', sans-serif;
           font-size: 1.5em; 

          text-transform: none;
      position: relative;
      z-index: 10;
     
      display: flex; /* Use flexbox for layout control */
  justify-content: flex-end; /* Align text to the right */
  align-items: center; /* Vertically center content */
  min-height: 50px; /* Ensure enough height for the logo */
  padding-left: 300px; /* Space for the logo on the left */
    /* border: 3px solid yellow; */
  background-image: url('nunki.png');
  background-repeat: no-repeat;
  background-position: left center; 
  background-size: 292px 146px; 
  line-height: 1.5; 
  margin: 10px 0; /* Spacing between h1 elements */
  box-sizing: border-box; /* Prevent padding issues */
  background-color: rgba(0, 0, 0, 0.7);
   margin-bottom: 10px;
            padding-right: 0.2em;
        
            color: #f5f7ff; /* Ensure visibility on background */
}

  
    .sldlegend {
        
        font-size: 0.8em;
        text-align: left;
    }

     /* Style the r-stack to cover the slide area */
        .reveal .r-stack {
            position: relative;
            width: 100%;
            height: 75vh; /* Adjust to leave space for header text */
            margin-top: 20px;
        }
        
         /* Style fragments to cover the r-stack area */
        .reveal .r-stack .fragment {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            /* height: 100%; */
            display: flex;
            flex-direction: column;
            justify-content: stretch;
            align-items: center;
            background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for text readability */
            opacity: 0; /* Ensure hidden until active */
            transition: opacity 0.5s ease;
        }

        .darkbg{
            background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for text readability */

        }

        /* Ensure images are responsive and centered */
        .reveal .r-stack img {
            max-width: 80%;
            max-height: 80%;
             object-fit: contain;
            margin-top: 10px;
            /* object-fit: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            */
        } 
         /* Style text within fragments */
        .reveal .r-stack p {
            color: #fff;
            font-size: 1.2em;
            margin: 10px 20px;
            max-width: 80%;
            text-align: center;
        }


        
      
        .reveal p {
            margin-bottom: 20px;
            font-size: 1.2em;
            color: #fff;
        }

        /* Optional list styling for uncommented fragments */
        .reveal ul {
            margin-top: 20px;
            font-size: 1em;
            color: #fff;
            list-style-position: inside;
        }

       .reveal .timul {
        list-style-type: none;
       } 
        .reveal .timul li {
            font-size: 1em;
       }