.enlinea {
    display: inline;
    vertical-align: middle;
}

body {
    /* Prevengo copy paste */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: black;
    /* Esto arregla error de alto de pantalla ("info" aparece desde abajo, entonces ocupa un espacio debajo de "fondo1")*/
    position: fixed;
}

/* Scroll contenedorfondos */
.contenedorfondos {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overscroll-behavior-y: none;
    height: 100vh;
}

/* Oculta barra scroll */
::-webkit-scrollbar {
    display: none;
}

/* Fondos */
.fondos {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-snap-align: start;
}

.fondo1 {
    background-image: url('fotos/fondo1.webp');
}

.fondo2 {
    background-image: url('fotos/fondo2.webp');
}

.fondo3 {
    background-image: url('fotos/fondo3.webp');
}

/* Márgenes Rombos Negros */
.margenrombotop {
    margin-top: 4px;
    margin-bottom: -1px;
    margin-left: 4px;
    margin-right: -1px;
}

.margenrombobot {
    margin-top: -1px;
    margin-bottom: 4px;
    margin-left: -1px;
    margin-right: 4px;
}

.margenromboleft {
    margin-top: -1px;
    margin-bottom: 4px;
    margin-left: 4px;
    margin-right: -1px;
}

.margenromboright {
    margin-top: 4px;
    margin-bottom: -1px;
    margin-left: -1px;
    margin-right: 4px;
}

/* Rotar y des-rotar rombos e iconos" */
.rotar {
    transform: rotate(45deg);
}

.desrotar {
    transform: rotate(-45deg);
}

/* Hover azul rombos negros */
.hoverazul {
    transition: background-color 0.3s;
}

/* Flecha */
.beatfade {
    animation: fade-in 1.2s infinite;
}

@keyframes fade-in {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.2;
    }
}

.infocv-mask {
  --fade: 40px;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--fade),
    black calc(100% - var(--fade)),
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--fade),
    black calc(100% - var(--fade)),
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Azul links */
.azul {
    color: #0778a8;
    transition: color 0.3s;
}

/* Flecha transparencia */
.transparencia {
    color: rgba(255, 255, 255, 0.452)
}

/* Girar Flecha */
.animaciongirarflecha {
    transition: transform 0.5s;
}

.girarflecha {
    transform: rotate(180deg);
}

/* Subrayados menú */
@keyframes fadeInUnderline {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.subrayado {
    position: relative;
    display: inline-block;
}

.subrayado::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 10%;
    background-color: rgba(255, 255, 255, 0.436);
    transform-origin: left center;
    animation: fadeInUnderline 0.8s forwards;
}

.espaciado {
    letter-spacing: 0.5rem;
}

/* Responsive PC */
@media (min-width: 1024px) {
    /* agita logos github y linkedin */
    .shake:hover {
        animation: shake 1s cubic-bezier(.36, .07, .19, .97) both;
        backface-visibility: hidden;
        transform-origin: top right;
    }
    
    @keyframes shake {
        0% {
            transform: rotate(0);
        }
    
        15% {
            transform: rotate(5deg);
        }
    
        30% {
            transform: rotate(-5deg);
        }
    
        45% {
            transform: rotate(4deg);
        }
    
        60% {
            transform: rotate(-4deg);
        }
    
        75% {
            transform: rotate(2deg);
        }
    
        85% {
            transform: rotate(-2deg);
        }
    
        92% {
            transform: rotate(1deg);
        }
    
        100% {
            transform: rotate(0);
        }
    }
    

    /* Oculta botón menú móvil en PC */
    .esconder {
        display: none;
    }

    /* Hace fondo menú transparente */
    #menu {
        background: transparent;
    }

    .bg-sofosbars {
        background-image: url('fotos/webs/sofosbars.jpg');
    }

    /* Hover azul links */
    .azul:hover {
        color: #055f86;
    }

    /* Hover agrandar iconos rombos */
    .agrandar {
        transition: transform ease 0.5s;
    }

    .agrandar:hover {
        transform: scale(1.05);
    }

    .rotar.agrandar:hover {
        transform: rotate(45deg) scale(1.1);
    }

    .desrotar.agrandar:hover {
        transform: rotate(-45deg) scale(1.1);
    }
}