/* Styles */
#skillsContainer{
    background-color: #594f4f;
    width: 100%;
    height: 100%;
    align-content: center;
    grid-template-rows: 10% 90%;
    grid-template-columns: auto;
}
#skillsContainer h1{
    text-align: center;
    text-justify: auto;
}
#skillsContent{
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: 28.33% 28.33% 28.33%;
}
#skillsContent div h2{
    text-align: center;
    width: 100%;
    font-size: 1.25em;
}
#skillsContent div div h3{
    text-align: center;
}
#skillsContent ul{
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
ul::-webkit-scrollbar{
    display: none;
}
#skillsContent li{
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 2;
}
#smallSkillsContent{
    display: none;
    grid-template-columns: 42.495% 42.495%;
    grid-template-rows: 100%;
    justify-content: center;
}
#smallSkillsContent div h2{
    text-align: center;
    width: 100%;
    font-size: 1.25em;
}
#smallSkillsContent div div h3{
    text-align: center;
}
#smallSkillsContent ul{
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
ul::-webkit-scrollbar{
    display: none;
}
#smallSkillsContent li{
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 2;
}
.text{
    display: flex;
    justify-content: space-between;
    width: 99%;
    z-index: 1;
    padding: 2px;
}
.slider{
    position: absolute;
    min-width: 20%;
    height: 100%;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    background-color: #9de0ad;
    z-index: -1;
}
#skillsSubcontainer, #educationContainer, #certificationsContainer, #educationCertificationContainer{
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 2.5%;
    align-items: center;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#skillsSubcontainer::-webkit-scrollbar{
    display: none;
}
#skillsSubcontainer h3{
    margin-bottom: 5px;
}
#educationContainer::-webkit-scrollbar{
    display: none;
}
#certificationsContainer::-webkit-scrollbar{
    display: none;
}
#educationCertificationContainer::-webkit-scrollbar{
    display: none;
}
#skillsSubcontainer > div{
    display: flex;
    flex-direction: column;
    background-color: rgb(94, 127, 155);
    height: 50%;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
    margin: 10px;
}
#educationContainer div, #certificationsContainer div, #educationCertificationContainer div{
    background-color: rgb(94, 127, 155);
    padding: 20px;
    width: 80%;
    margin: 10px;
    border-radius: 20px;
    text-align: center;
}
#skillsSubcontainer div h3, #educationContainer div h3, #certificationsContainer div h3, #educationCertificationContainer div h3 {
    padding-bottom: 5px;
} 
#skillsSubcontainer div ul{
    height: 100%;
    width: 100%;
    margin: 0;
}
#skillsSubcontainer div ul li{
    text-align: left;
    background-color: #727272c3;
    height: 100%;
    position: relative;
    z-index: 2;
}
/* Skills percent bars */
#react{
    width: 50%;
}
#flask{
    width: 40%;
}
#django{
    width: 40%;
}
#java{
    width: 30%;
}
#javascript{
    width: 50%;
}
#python{
    width: 60%;
}
#html{
    width: 90%;
}
#frontEnd{
    width: 75%;
}
#css{
    width: 50%;
}
#sql{
    width: 30%;
}
#fullStack{
    width: 40%;
}
#git{
    width: 75%;
}
#mySQL{
    width: 30%;
}
#linux{
    width: 50%;
}
#cpp{
    width: 50%;
}
#ui{
    width: 75%;
}
#snowboarding{
    width: 90%;
}
#camping{
    width: 75%;
}
#wayfinding{
    width: 60%;
}
#cashHandling{
    width: 100%;
}
#resturantExperience{
    width: 90%;
}
#pos{
    width: 80%;
}
#bartending{
    width: 75%;
}
#waiter{
    width: 90%;
}
#custService{
    width: 100%;
}
#invManagement{
    width: 90%;
}
#management{
    width: 80%;
}
#quickThinking{
    width: 100%;
}
#adaptability{
    width: 80%;
}
#communication{
    width: 100%;
}
/* Media Queries */
@media only screen and (min-width: 1px) and (max-width: 768px){
    #smallSkillsContent{
        display: grid;
        grid-template-columns: 42.495% 42.495%;
        grid-template-rows: 100%;
    }
    #skillsContent{
        display: none;
    }
}