@font-face{ font-family: 'Nudica Mono Medium'; 
    src: url('fonts/Nudica/nudicamono-medium-webfont.eot'); 
    src: url('fonts/Nudica/nudicamono-medium-webfont.eot') format('embedded-opentype'), 
        url('fonts/Nudica/nudicamono-medium-webfont.woff') format('woff'), url('WebFont.ttf') format('truetype'), 
        url('fonts/Nudica/nudicamono-medium-webfont.svg') format('svg'); 
}

*, p{
    scroll-behavior: smooth;
    cursor: url(img/flecha_ok_negra.png), auto;
}


body {
    font-family: 'Nudica Mono Medium';
    color: #000000;
    scroll-behavior: smooth;
    background: linear-gradient(-45deg, #e083ca, #BC8ABD, #C7ABEB, #974298);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
    width: 100vw;
    padding: 3%;
    padding-right: 10%;
}

@keyframes gradient {
0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}

a {
    color: #000000;
}

a:hover {
    font-style: italic;
    cursor: url(img/mano_ok_negra.png), auto;
}

.logo, .logo_negro {
    width: 10vw;
}

.logo_cierre, .logo_cierre_negro {width: 1.2vw;}

.logo, .logo_cierre {
    display:none;
}

p {padding-left: 3%;
    width: 80vw;
}

@media (min-width: 375px) and (max-width: 750px){

    .logo, .logo_negro {
        width: 25vw;
    }

    .logo_cierre, .logo_cierre_negro {
        width: 3vw;
    }

    p {
        font-size: 1em;
    }
    
}

/* modo darks */

@media (prefers-color-scheme: dark) {

    * {cursor: url(img/flecha_ok.png), auto;}

    body {
        background: linear-gradient(-45deg, #000000, #3E3B39, #1A1A1A, #202020);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        color: #BC8ABD;
        cursor: url(img/flecha_ok.png), auto;
    }

    @keyframes gradient {
        0% {
        background-position: 0% 50%;
        }
        50% {
        background-position: 100% 50%;
        }
        100% {
        background-position: 0% 50%;
        }
    }

    .logo_negro, .logo_cierre_negro {display: none;}

    .logo, .logo_cierre {display: block;}

    p {
        cursor: url(img/flecha_ok.png), auto;
    }

    a {color: #BC8ABD;
        text-decoration: underline;
    }

    a:hover {
        cursor: url(img/mano_ok.png), auto;
    }
}

@media (min-width: 375px) and (max-width: 750px){

    .logo, .logo_negro {
        width: 25vw;
    }

    .logo_cierre, .logo_cierre_negro {
        width: 3vw;
        bottom:3%;
    }

    p {
        font-size: 1em;
    }
    
}