/* Image cropping */
.recorte {
    height: 300px; /* altura final, recorta arriba/abajo */
    overflow: hidden; /* oculta lo que sobresale */
}

.recorte-h {
    width: 100%; /* ancho final, recorta izquierda/derecha */
    overflow: hidden; /* oculta lo que sobresale */
}

.recorte img,
.recorte-h img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* rellena el contenedor sin deformarse */
    object-position: center center; /* o "center center", "center bottom" */
}

/* Specific cropping adjustments */
.recorte img.center-20 {
    object-position: center 20%;
}

.recorte img.center-30 {
    object-position: center 30%;
}

.recorte img.center-40 {
    object-position: center 40%;
}

.recorte img.center-80 {
    object-position: center 80%;
}

.recorte img.center-95 {
    object-position: center 95%;
}

/* Technology icons */
ul.icons {
    display: flex;
    justify-content: center;
}

li.technologies {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

.technology-icon-with-text {
    width: fit-content;
    display: inline-block;
    align-items: center;
    text-align: center;
    margin: 1.5em;
}

.technology-icon-with-text {
    width: fit-content;
    display: inline-block;
    align-items: center;
    text-align: center;
    margin: 1.5em;
}

.technology-icon-with-text svg,
.technology-icon-with-text img {
    height: 44px;
    margin: 8px;
}

/* Specific items */
span.app-icon {
    width: 96px;
    height: 96px;
}

span.me {
    width: 128px;
    height: 128px;
}

@media screen and (max-width: 980px) {
    /* img customization for mobile */
    div.app-screenshots {
        width: 100% !important;
    }

    /* h1 size to allow multiline for mobile devices */
    header,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        max-width: 100% !important;
    }
}

mark {
    background: linear-gradient(to top, #e7b788 10%, transparent 0%);
    display: inline;
    font-weight: bold;
}