/* Contenedor base para los iconos */
.icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: relative;
    margin: 5px;
}

/* PHP Icon */
.icon-php {
    background: #777BB4;
    border-radius: 4px;
}

.icon-php::before {
    content: "PHP";
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Docker Icon */
.icon-docker {
    background: #2496ED;
    border-radius: 4px;
}

.icon-docker::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
        linear-gradient(45deg, transparent 40%, white 40%, white 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, white 40%, white 60%, transparent 60%);
}

/* phpMyAdmin Icon */
.icon-phpmyadmin {
    background: #F7F7F7;
    border-radius: 4px;
}

.icon-phpmyadmin::before {
    content: "pMA";
    position: absolute;
    color: #2C3E50;
    font-weight: bold;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* JavaScript Icon */
.icon-javascript {
    background: #F7DF1E;
    border-radius: 4px;
}

.icon-javascript::before {
    content: "JS";
    position: absolute;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* HTML5 Icon */
.icon-html5 {
    background: #E34F26;
    border-radius: 4px;
}

.icon-html5::before {
    content: "5";
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* CSS3 Icon */
.icon-css3 {
    background: #1572B6;
    border-radius: 4px;
}

.icon-css3::before {
    content: "3";
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* MySQL Icon */
.icon-mysql {
    background: #4479A1;
    border-radius: 4px;
}

.icon-mysql::before {
    content: "SQL";
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* MongoDB Icon */
.icon-mongodb {
    background: #47A248;
    border-radius: 50%;
}

.icon-mongodb::before {
    content: "M";
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bootstrap Icon */
.icon-bootstrap {
    background: #7952B3;
    border-radius: 4px;
}

.icon-bootstrap::before {
    content: "B";
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Linux Icon */
.icon-linux {
    background: #FCC624;
    border-radius: 50%;
}

.icon-linux::before {
    content: "🐧";
    position: absolute;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Git Icon */
.icon-git {
    background: #F05032;
    border-radius: 50%;
}

.icon-git::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
}