:root{
    --blanco: #ffffff;
    --blancogris: #f3f5fa;
    --cerulean: #006992;
    --prussian: #0e2a47;
    --darkpurple: #0D0221;
    --green: #0C7C59;
    --dorado: #bc955c;
    --grisfondo: #FAFAFA;

    --html: #f16529;
    --css: #399dd8;
    --sass: #cd6799;
    --resposive: #653329;
    --bootstrap: #800af9;
    --js: #f7e018;
    --jquery: #0769ad;
    --php: #777bb3;
    --laravel: #f53003;
    --wordpress: #0275a1;
    --git: #f05033;
    --github: #111315;
}
.colorhtml{background-color: var(--html) !important;}
.colorcss{background-color: var(--css) !important;}
.colorsass{background-color: var(--sass) !important;}
.colorresponsive{background-color: var(--resposive) !important;}
.colorbootstrap{background-color: var(--bootstrap) !important;}
.colorjs{background-color: var(--js) !important;}
.colorjquery{background-color: var(--jquery) !important;}
.colorphp{background-color: var(--php) !important;}
.colorlaravel{background-color: var(--laravel) !important;}
.colorwordpress{background-color: var(--wordpress) !important;}
.colorgit{background-color: var(--git) !important;}
.colorgithub{background-color: var(--github) !important;}
body{
    overflow-x: hidden;
    background-color: var(--grisfondo) !important;
}
nav{
    position: fixed;
    background-color: var(--blanco);
}
.imagenlogo{
    aspect-ratio: 1/1;
    height: 40px;
    width: auto;
    border-radius: 100%;
    border: solid 2px var(--cerulean);
}
@media (min-width: 768px) {
    .imagenlogo{
        height: 50px;
        width: auto;
    }
}
.nombre{
    font-family: "Nunito Sans", sans-serif;
    font-size: 1rem;
}
@media (min-width: 1200px) {
    .nombre{
        font-size: 1.1rem;
    }
}
.offcanvas{
    width: 70% !important;
    background-color: var(--blancogris) !important;
}
@media (min-width: 768px) {
    .offcanvas{
        width: 50% !important;
    }
}
.offcanvas-body a, .navbar-nav a{
    color: var(--prussian) !important;
}
.divlinks{
    width: 30%;
}
.cardlateral{
    position: fixed;
    top: 30%;
    right: 0;
    width: 4rem;
    height: 17rem;
    background-color: var(--blanco);
}
.cardlateral div{
    width: 100%;
    aspect-ratio: 1/1;
}
.cardlateral a{
    width: 100%;
    height: 100%;
}
.cardlateral img{
    width: 45%;
}
.footertop, footer{
    background-color: var(--prussian);
}
.footertop img{
    width: 20%;
}
@media (min-width: 768px) {
    .footertop img{
        width: 40%;
    }
}
@media (min-width: 1024px) {
    .footertop img{
        width: 30%;
    }
}
@media (min-width: 1728px) {
    .footertop img{
        width: 25%;
    }
}
.footertop a, footer p{
    font-family: 'Nunito Sans';
    color: var(--blanco);
    text-decoration: none;
}
.footertopdiv{
    width: 100%;
}
@media (min-width: 768px) {
    .footertopdiv{
        width: 90%;
    }
}
@media (min-width: 1200px) {
    .footertopdiv{
        width: 85%;
    }
}
@media (min-width: 1728px) {
    .footertopdiv{
        width: 65%;
    }
}
footer{
    border-top: solid 0.1rem var(--grisfondo);
}