.background {
    background-color: var(--skills-background-color);
}

#skills-section {
    background-color: var(--skills-background-color);

}

#skills-section img {
    width: 15rem;
    height: 15rem;
}

#skills-section h1 {
    color: var(--secondary-color);
    text-align: center;
    background-color: var(--clippath-color);
    padding-top: 8rem;
}

/* Modal Content */
.modal-content-skill {
    position: relative;
    background-color: var(--background-color);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 10px;
    min-height: 100%;
    height: auto;
}

table td, table th {
    text-align: left;
    border: 1px solid var(--primary-color);
}

table ul {
    list-style-type: none;
}

.margin8 {
    margin: 8px;
}

table {
    border-collapse: collapse;
    color: var(--primary-color);
}

.modal-content-skill p, table {
    color: var(--primary-text-color);

}

.skill-item {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.clipath-first {
    background-color: var(--clippath-color);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.clipath {
    background-color: var(--clippath-color);
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 90%);
}

.clipath-last {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    margin-bottom: 5rem;

}




.text-container-skill h3, .text-container-skill p {
    padding-top: 2rem;
    color: var(--primary-text-color);
}

.text-container-skill p {
    max-width: 50rem;
    text-align: left;
}

.skill-pop-text {
    padding-top: 2rem;
    color: var(--primary-text-color);
    text-align: left;
    max-width: 50rem;
}

.skill-pop-text h3 {
    color: var(--secondary-color);
    text-align: center;
}

.skill-pop-text p {
    color: var(--primary-text-color);
    text-align: center;
    padding: 0.5rem;
}