/* CSS For the Skill Boxes and the % */

.SkillsSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.SkillItemContainer {
    margin: var(--Size-004);
    padding: var(--Size-002);
    display: flex;
    flex-direction: column;
    width: 40%;
    border-radius: 5px 35px 5px 35px;
    background-color: rgba(175, 174, 174, 0.28);
}

/* Container for skill bars */
.container {
    width: 100%;
    /* Full width */
    height: fit-content;
    background-color: var(--TransPartColor);
    border-radius: var(--Size-005);


}

.skills {
    width: 100%;
    /* Full width */
    text-align: right;
    /* Right-align text */
    padding-top: 10px;
    /* Add top padding */
    padding-bottom: 10px;
    /* Add bottom padding */
    color: white;
    /* White text color */
    border: solid 1px rgba(0, 0, 0, 0.435);
    border-radius: var(--Size-005);
}

/* The Skills Bar Setup || FIll Amount && Color */
.html {
    width: 99%;
    background-color: var(--Brand-Color-001);
}

.css {
    width: 99%;
    background-color: var(--Brand-Color-002);
}

.YouTube {
    width: 99%;
    background-color: var(--Brand-Color-001);
}

.unity {
    width: 95%;
    background-color: var(--Brand-Color-002);
}

.js {
    width: 65%;
    background-color: var(--Brand-Color-001);
}

.php {
    width: 65%;
    background-color: var(--Brand-Color-002);
}

.GraphicDesign {
    width: 95%;
    background-color: var(--Brand-Color-001);
}

.python {
    width: 95%;
    background-color: var(--Brand-Color-002);
}

.GoogleAds {
    width: 99%;
    background-color: var(--Brand-Color-001);
}

.SEO {
    width: 80%;
    background-color: var(--Brand-Color-002);
}

.VideoDesign {
    width: 100%;
    background-color: var(--Brand-Color-001);
}

.ThridParty {
    width: 95%;
    background-color: var(--Brand-Color-002);
}

.MXL {
    width: 95%;
    background-color: var(--Brand-Color-001);
}

.AddingMoreSoon {
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* Mobile Use  950px */
@media screen and (max-width: 950px) {
    .SkillBox-MainText {
    }

    .SkillsSection {}

    .SkillItemContainer {
        width: 35%;
    }
}

/* Mobile Use  655px */
@media screen and (max-width: 655px) {
    .SkillBox-MainText {
    }

    .SkillsSection {}

    .SkillItemContainer {
        width: 75%;
    }
}

/* Mobile Use  555px */
@media screen and (max-width: 555px) {

    .SkillItemContainer {
        width: 70%;
    }
}

/* Mobile Use  456px */
@media screen and (max-width: 456px) {

    .SkillItemContainer {
        width: 60%;
    }
}