* {
    font-family: "Manrope", sans-serif;
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
    cursor: none;
}

.cursor {
    position: fixed;
    width: 64px;
    height: 64px;
    background: url("images/puntero.png") no-repeat center/contain;
    pointer-events: none;
    /* no bloquea clics */
    z-index: 100;
    /*transform: translate(-50%, -50%); /* centra el div en el puntero */
}

#canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#channel-grid {
    /* Rejilla*/
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    /*Posición y tamaño*/
    position: absolute;
    top: 2.5vh;
    left: 10vw;
    height: 80%;
    width: 80%;
}

.channel {
    width: 100%;
    height: 100%;
    corner-shape: superellipse(1.1);
    /*solo en chrome*/
    border-radius: 10%;
    border: 2px solid grey;
}

.channel.zoomable:hover {
    border: 2px solid #00bfff;
}

.empty {
    background-image: url("images/rayas.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;


    animation: emptyEffect 20s infinite linear;
    font-family: 'Manjari', sans-serif;

    font-size: 300%;

    display: flex;
    align-items: center;
    justify-content: center;
}

#sobre-mi {
    background-image: url("images/foto.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#vector-field {
    background-image: url("images/vectorfieldplotter.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#trabajo-R {
    background-image: url("images/informe.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
}

#neural-car {
    background-image: url("images/neuralcar.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

canvas {
    width: 100%;
    height: 100%;
    z-index: -4;
}

.zoomable {
    transition: transform 0.3s ease;
}

.zoomable.zoom {
    border: none;
    width: 90%;
    height: 90%;
    background-size: contain;
}

.zoomable.zoom:hover {
    border: none;
}

.zoom-wrapper {
  position: absolute;
  width: 90%;
  height: 10%;
  bottom: 5%;
  display: flex;
  justify-content: space-around;
    padding: 1em 0em 1em 0em;
  background-color: aliceblue;
}

.zoom-label {
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 0.1em 1em;
  font-family: 'Manjari', sans-serif;
  border-radius: 1em;
  font-size: 2em;
  align-content: center;
}

.zoom-link {
  background: #00bfff;
  color: white;
  text-decoration: none;
  padding: 0.1em 1em;
  font-family: 'Manjari', sans-serif;
  border-radius: 1em;
  font-size: 2em;
  align-content: center;
  font-weight: bold;
}

.zoom-link:hover{
    cursor: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    opacity: 0;
    pointer-events: none;
    /* que no bloquee clicks mientras no esté activo */
    transition: opacity 0.3s ease;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

@keyframes emptyEffect {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 100%;
    }
}