body {
     margin: 0;
     background-color: rgba(218, 165, 32, 0.371);
     /* Fondo negro para que brille más */
     font-family: Arial, sans-serif;

 }

 /*header {
     position: relative;
     overflow: hidden;
     height: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     margin-top: 20px;
 }*/

 main {}

 h2 {
     color: rgb(161, 106, 42);
     text-align: center;
     margin: 2rem;
     font-size: 2rem;
 }

 table {
     margin: 0 auto;
 }

 td {
     padding: 10px;
     border: 1px solid #ccc;
 }

 /* ---- DYNAMIC CARROUSEL ---- */
 .carousel {
     display: flex;
     animation: slide 25s infinite linear;
 }

 .carousel-item {
     min-width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .card {
     border: 2px solid #f9a825;
     border-radius: 12px;
     padding: 20px 60px;
     /*background-color: rgba(0, 0, 0, 0.3); /* Fondo transparente oscuro */
     background-color: #916f0c;
     box-shadow: 0 0 10px #f9a825, 0 0 20px #f9a825, 0 0 40px #f9a825;
     color: white;
     text-align: center;
     width: 400px;
     height: 200px;
     display: flex;

     flex-direction: column;
     align-items: center;
     /* Horizontal centering */
     justify-content: center;
     /* Vertical centering */
     /*position: relative;*/
     gap: 10px;
     /* separation between value and label */
 }

 .card .value {
     /*font-size: 2.5rem;*/
     font-size: 6rem;

     font-weight: bold;
     color: gold;
     text-shadow: 0 0 10px gold, 0 0 20px gold;

 }

 .card .label {
     font-size: 2rem;
     color: #fff;
     margin-top: auto;
     /*text-shadow: 0 0 5px gold;*/
     text-shadow: 0 0 5px grey;

 }

 @keyframes slide {
     0% {
         transform: translateX(0%);
     }

     20% {
         transform: translateX(0%);
     }

     25% {
         transform: translateX(-100%);
     }

     45% {
         transform: translateX(-100%);
     }

     50% {
         transform: translateX(-200%);
     }

     70% {
         transform: translateX(-200%);
     }

     75% {
         transform: translateX(-300%);
     }

     95% {
         transform: translateX(-300%);
     }

     100% {
         transform: translateX(-400%);
     }
 }

 /* ---- END DYNAMIC CARROUSEL ---- */


 /*<!--PERIODIC TABLE-->*/
 .periodic-table {
     width: 50%;
     display: block;
     margin: 0 auto;
 }

 /* ---- END OF PERIODIC TABLE ---- */