.icon-container {
    padding: 15px;
    transition: box-shadow 0.3s;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 3px;
}

.icon-container:hover {
    box-shadow: 0 0 11px hsla(0, 0%, 13%, 0.2);
}

.icon-group {
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.fa-pen-alt {
    transition: background-color 2s ease;
    align-items: center;
    background: linear-gradient(
            180deg,
            hsl(299, 46%, 41%),
            hsl(198, 100%, 44%),
            hsl(0, 0%, 83%) 91%
    );
}

.fa-pen-alt:hover {
    background: hsl(240, 100%, 40%);
}

.fa-code-branch {
    transition: background-color 2s ease;
    background: linear-gradient(
            180deg,
            hsl(340, 60%, 65%) 15%,
            hsl(198, 100%, 44%),
            hsl(0, 0%, 83%) 91%
    );
}

.fa-code-branch:hover {
    background: hsl(240, 100%, 40%);
}

.fa-music {
    transition: background-color 2s ease;
    background: linear-gradient(
            180deg,
            hsl(16, 100%, 66%) 20%,
            hsl(198, 100%, 44%),
            hsl(0, 0%, 83%) 91%
    );
}

.fa-music:hover {
    background: hsl(240, 100%, 40%);
}