.skill-logo {
    position: relative;
    width: 3.3em;
    height: 3.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.skill-name {
    position: absolute;
    bottom: 115%;        /*lo coloca encima del icono */
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    border: solid 1px;
    font-size: 17px;
    white-space: nowrap;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s;
}

.skill {
    position: relative;
    display: inline-block;
    text-align: center;
}

.skill:hover .skill-name {
  opacity: 1;
  visibility: visible;
}

.skill-icon-bg {
    /* border: solid 2px var(--border); */
    border-radius: 20px;
    border: solid 1.5px #00000000;
    padding: 0 13px;
    transition: box-shadow 0.7s, border-color 0.7s;
}

.skill-icon {
    width: 40px;
    height: 32px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.icon-html {
    background-image: url(../img/html5.svg);
}

.name-html {
    color: #e54b21;
    border-color: #e54b21;
}

.html {
    background-color: #ef652a4b;
    box-shadow: #ef652a40 0px 0px 50px;
}

.html:hover {
    box-shadow: #e54b2188 0px 0px 30px;
    border-color: #e54b21ab;
}

.icon-css {
    background-image: url(../img/css.svg);
}

.name-css {
    color: #30A9DC;
    border-color: #30A9DC;
}

.css {
    background-color: #30A9DC4b;
    box-shadow: #30a8dc45 0px 0px 50px;
}

.css:hover {
    box-shadow: #30A9DC88 0px 0px 30px;
    border-color: #30A9DC;
}

.icon-bash {
    background-image: url(../img/bash.png);
}

.name-bash {
    color: #4eaa25;
    border-color: #4eaa25;
}

.bash {
    background-color: #4eaa2573;
    box-shadow: #4eaa2550 0px 0px 50px;
}

.bash:hover {
    box-shadow: #72a82488 0px 0px 30px;
    border-color: #72a824;
}

.icon-python {
    background-image: url(../img/python.svg);
}

.name-python {
    color: #ffde57;
    border-color: #ffde57;
}

.python {
    background-color: #ffde5750;
    box-shadow: #ffde5740 0px 0px 50px;
}

.python:hover {
    box-shadow: #ffde5788 0px 0px 30px;
    border-color: #ffde57;
}

.icon-linux {
    background-image: url(../img/linux.png);
}

.name-linux {
    color: #DFAF22;
    border-color: #DFAF22;
}

.linux {
    background-color: #DFAF2273;
    box-shadow: #DFAF2250 0px 0px 50px;
}

.linux:hover {
    box-shadow: #DFAF2288 0px 0px 30px;
    border-color: #DFAF22;
}

.icon-wifi {
    background-image: url(../img/wifi.png);
}

.name-wifi {
    color: #30A9DC;
    border-color: #30A9DC;
}

.wifi {
    background-color: #30A9DC4b;
    box-shadow: #30A9DC50 0px 0px 50px;
}

.wifi:hover {
    box-shadow: #30A9DC88 0px 0px 30px;
    border-color: #30A9DC;
}

.hacking {
    background-color: #e5393573;
    box-shadow: #e5393550 0px 0px 50px;
}

.icon-hacking {
    background-image: url(../img/security.png);
}

.name-hacking {
    color: #e53935;
    border-color: #e53935;
}

.hacking:hover {
    box-shadow: #e54c2188 0px 0px 30px;
    border-color: #e54c21;
}

.soft-grp {
    display: grid;
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    grid: auto / 7rem 7rem 7rem;
    gap: 50px 50px;
    border-radius: 10px;
    padding: 0 10px;
    list-style-type: circle;
}