body.change .links.up, body.change .links-cel.up{
    background-color: rgba(135, 108, 255, 0.3);
}
body.change .circle{
    background: #4e54c8; 
    background: -webkit-linear-gradient(to top, #6c72e9, #8f94fb); 
    background: linear-gradient(to top, #6c72e9, #9ca0fb);
}
body.change .links a{
    color: #000;
    color: #020139;
}

body.change #gotop{
    background: #fff;
    border: 1px solid #8e6bff;
    color: #8e6bff;
}

body.change .container{
    background: #e5edf1;
    background: #fff;
    
}
body.change .container .introduction{
    background: #e5edf1;
    background: #fff;
    background: radial-gradient(circle at 100% 0%, #9db7ff 0%, #aaa5ff 40%, #e5edf1 30%);
    background: radial-gradient(circle at 100% 0%, #9db7ff 0%, #aaa5ff 40%, #fff 30%);
}
/*-----------------------scroll effect-------------------------*/
body.change::-webkit-scrollbar-track {
  background: #8e6bff;      
}

body.change::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to top,#b7a1f4,#bde3fd,#ffbdd1); 
    border: 3px solid #8e6bff;  
}

/*------------------------------------ start-----------------------------------------*/
body.change .container header > small{
    color: rgb(212, 200, 200);
    color: #11152b;
}
body.change .container header > strong{
    color: #000;
}

body.change .container header > .span{
    color: #11152b;
}
body.change .container header > p{
    color: #000;
}
body.change .container header > p span{
    color: #3e54fa;
}
body.change .container header > div a:first-child{
    color: #fff;
    color: #11152b;
    background: #51f1ff;
}
body.change .container header > div a:first-child:hover{
    color: #11152b;
    background: #ffff;
    box-shadow: 0 4px 16px rgba(255,255,255, 0.5);
}
body.change .container header > div a:last-child{
    color: #11152b;
    background: #ffff;
    box-shadow: 0 4px 16px rgba(255,255,255, 0.5);
}
body.change .container header > div a:last-child:hover{
    color: #000;
    background: #51f1ff;
}
body.change .container header > div a:last-child:hover ion-icon{
    color: #11152b;
}

body.change .introduction .code > div{
    background: #0F2027;  
    background: -webkit-linear-gradient(200deg, #3B4264, #262c4e, #11152b);  
    background: linear-gradient(200deg, rgb(163, 187, 253), rgb(165, 183, 255), rgb(126, 143, 255));
    background: #ffffff;  
}
body.change .introduction .code > div:first-child .comment, body.change .introduction .code > div p{
    color: #020139;
}

/*-------------------------------about----------------------------------*/
body.change .about .about-container .text{
    background: #ffff;
    background:  #aaa5ff;
    box-shadow: 0 10px 30px 5px rgba(114, 105, 247, 0.4);
}
body.change .about .about-container .text h1{
    color: #020139;
}
body.change .about .about-container .text h1 span{
    color: #51f1ff;
}
body.change .about .about-container .text p{
    color: #020139;
}

/*--------------------------projects-------------------------------*/
body.change .projects > div:last-child > div:last-child{
    border: none;
}
body.change .projects > h1, body.change .technologies h1, body.change .contact > h1{
    color: #000;
}
body.change .projects .div, body.change .technologies .div, body.change .contact .div{
    background: #5a6be8;
}

body.change .projects > div:last-child > div h1{
    color: #000;
    font-weight: 600;
}
body.change .projects > div:last-child > div p{
    font-weight: 400;
    color: rgb(35, 35, 35);
}
body.change .projects > div:last-child > div a{
    border: 2px solid #5a6be8;
    background: radial-gradient(circle at 0% 100%, #0e0c49 20%, #0e0d4a 40%, #020139 100%);
    background: #5a6be8;
}
body.change .projects > div:last-child > div a ion-icon, body.change .projects > div:last-child > div a span{
    color: #5a6be8;
    color: #fff;
}

/*-------------------------------technologies--------------------------------*/
body.change .technologies{
    background: #aaa5ff;
}
body.change .technologies > div:last-child div span{
    color: #000;
    font-weight: 500;
}

body.change .technologies > div:last-child::-webkit-scrollbar-track {
    background-color: transparentize(#ccc, 0.7);
    background: rgba(255, 255, 255, 0.1);
    background: #7e83ef;
}
body.change .technologies > div:last-child::-webkit-scrollbar-thumb {
    background: transparentize(#ccc, 0.5);
    background: #1f2864;
}

/*----------------------Contact------------------------*/
body.change .contact .text > div h1{
    font-weight: 500;
    font-size: 25px;
    color: #020139;
}
body.change .contact .text > div a{
    color: #020139;
    font-weight: 400;
    font-size: 28px;
}
body.change .contact .reach{
    gap: 3vw;
    padding: 0 2vw;
}
body.change .contact .reach a {
    color: #5a6be8;
    font-weight: 400;
    font-size: 20px;
    border: 2px solid #5a6be8;
}
body.change .contact .click{
    color: #5a6be8;
    border: 2px solid #5a6be8;
    font-weight: 600;
}
/*-------------------------footer------------------------------*/
body.change .contact footer h1{
    color: #020139;
    background: #aaa5ff;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}

/*-----------------------------------media queries----------------------------------*/
body.change .menu.active{
    background: #aaa5ff; 
}

@media (max-width: 480px){
    body.change .technologies{
        background: none;
    }
    body.change .about .about-container .text a{
        color: #020139;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        background: #6d68fa; 
        background: #eceef9; 
    }
    body.change .about .about-container .text a ion-icon{
        color: #020139;
    }
    body.change .projects{
        background: #aaa5ff;
    }
    body.change .projects > div:last-child > div{
        border-bottom: 1px solid rgba(0,0,0, 0.5);
    }
    body.change .contact .reach a ion-icon{
        color: #3e54fa;   
        color: #fff;   
    }

    body.change .contact .reach a {
        color: #8e6bff;
        font-weight: 400;
        border: none;
    }
    body.change .contact .click{
        border: none;
    }
    body.change .contact footer h1{
        color: #020139;
        background: none;
        border-top: 1px solid #020139;
    }
    body.change .contact .text > div h1{
        font-size: 19px;
    }
    body.change .contact .text > div a{
        font-size: 19px;
    }
    body.change .contact{
        background: #aaa5ff;
    }

    body.change .contact .click{
        color: #eceef9;
        border: none;
    }
}



/*------------------Boton dia noche------------------*/
body.change label{
    background: #5a6be8;
}

body.change label span{
    background: #9391ff;
    border: 6px solid #5a6be8;
}

body.change label span ion-icon{
    color: rgba(255, 255, 255, 0.4);
}

body.change label input:checked ~ span ion-icon{
    color: #ffffff;
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff);
}