:root{
    /* colores */
    --clr-negro: black;
    --clr-blanco: white;
    --clr-dorado: #f4d229;
    --clr-amarillo-claro: #e6d690;
    --clr-azul: #7892c2;
    --clr-verde-whsp: #5FFC7B;
    /* fuentes */
    --ff-title: 'Roboto', sans-serif;
    --ff-title-weight: 500;
    --ff-paragraph: 'Poppins', sans-serif;
    --ff-paragraph-weight: 300;
    --ff-paragraph-size: 1.3125rem;
    
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    
    
}

.texto {  
    margin: auto;
    text-align: center;
    width: 95%;
}

.texto h1 {
    margin-bottom: 10px; /* Add some space below the heading */
    color: var(--clr-dorado);
    font: var(--ff-title);
    font-weight: bold;
    text-shadow: /* outline*/
        -0.5px -0.5px 0 black, /* Top left */
        0.5px -0.5px 0 black, /* Top right */
        -0.5px 0.5px 0 black, /* Bottom left */
        0.5px 0.5px 0 black; /* Bottom right */
    font-size: 3rem;
}

.texto p {
    margin: 4rem auto;
    color: white;
    
    text-align: center;
    font-weight: italic;
    white-space: nowrap;
    text-shadow: 
        -1px -1px 0 black, /* Top left */
        1px -1px 0 black, /* Top right */
        -1px 1px 0 black, /* Bottom left */
        1px 1px 0 black; /* Bottom right */
    font-size: 2rem;
}

.image-container {
    position: relative;
    width: 100vw; /* Set width relative to the viewport width */
    
    height: calc(82vw * 9 / 16); /* Calculate height based on 16:9 aspect ratio */
    max-height: calc(100vh * 16 / 9); /* Set maximum height to maintain aspect ratio */
    background-image: url('iconos_mapa/insumos/potencial.jpg');
    background-size: cover; /* Cover the container while maintaining aspect ratio */
    background-position: center; /* Center the background image */
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);;
}

.image-container {
    position: relative;
    width: 100vw; /* Set width relative to the viewport width */
    height: 100vh; /* Set height to 100% of viewport height */
    background-image: url('iconos_mapa/insumos/potencial.jpg');
    background-size: cover; /* Cover the container while maintaining aspect ratio */
    background-position: center; /* Center the background image */
  }
  
  /* Media query for mobile devices (adjust breakpoint as needed) */
  @media (max-width: 768px) {
    .image-container {
      /* Override previous height for mobile */
      height: calc(82vw * 9 / 16); /* Calculate height based on 16:9 aspect ratio */
    }
  }



.custom-icon {
    position: absolute;
    cursor: pointer;
    width: 40px; /* Adjust the width of the icons */
    height: 40px ;
    height: auto; /* Automatically adjust height based on width */
    z-index: 2;
    transform: scale(0.35); /*escala el icono*/
 }


/* Define positions for the custom icons */
.modeling-icon {
    left: 13%;
    top: 20%;
    z-index: 2;
    transform: scale(0.5);
}

/* Define positions for the custom icons */
.app-icon {
    left: 65%;
    top: 60%;
    z-index: 2;  
    transform: scale(0.4);
}

.bbdd-icon{
    left: 13%;
    top: 40%;
    transform: scale(0.5);
    z-index: 2; 
}

.development-icon{
    left: 13%;
    top: 60%;
    transform: scale(0.4);
    z-index: 2; 
}

.geoportal-icon{
    left: 65%;
    top: 20%;
    z-index: 2; 
    transform: scale(0.42);
}

.geohumanities-icon{
    left: 65%;
    top: 38%;
    z-index: 2; 
    transform: scale(0.45);
}

  /* Hover animation for text (modify as desired) */
.custom-icon:hover {
    opacity: 0.7; /* Make text visible on hover */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
       
  }
  .custom-icon span{
    position: absolute;
    bottom: -5rem;
    display: inline-block;
    text-align: center;
    left: -3rem;
    font-size: 5rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    color: white; 
    transform: rotateZ(20deg) translateX(0.2rem);
    opacity: 0;
    transition: all 400ms;
    text-shadow: 
        -2px -2px 0 black, /* Top left */
        2px -2px 0 black, /* Top right */
        -2px 2px 0 black, /* Bottom left */
        2px 2px 0 black; /* Bottom right */
}
/*comportamiento del span cuando se hace hover sobre la clase modeling de custom-icon*/
.custom-icon .atributos:hover + span {
    transform: rotateZ(0deg) translateX(0rem);
    opacity: 1;
}