.skills
{
    margin-left: 15vw;
    margin-right: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.skills .title
{
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.skills .title h1
{
    text-align: center;
}

.skills .content
{
    margin-top: 5vh;
    margin-bottom: 5vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.skills .content .skillsbox
{
    flex: 1 1 0;
    margin-left: 2vw;
    margin-right: 2vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    background-color: antiquewhite;
}

.skills .content .skillsbox .skill
{
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.skills .content .skillsbox .skill h1
{
    text-align: center;
    color: rgb(30, 30, 30);
}

.skills .content .skillsbox .icons
{
    margin-top: 1vh;
    margin-bottom: 1vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.skills .content .skillsbox .icons img
{
    flex: 0 1 0;
    width: 4vw;
    height: 4vw;
    margin: 1vh 1vw;
}

.skills .content .skillsbox .divider
{
    width: 80%;
    border-top: 3px solid rgb(30, 30, 30);
}

@media (orientation: portrait)
{
    .skills .title h1
    {
        font-size: 5vw;
    }

    .skills .content .skillsbox
    {
        border-radius: 2vw;
    }

    .skills .content .skillsbox .skill h1
    {
        font-size: 2vw;
    }
}

@media (orientation: landscape)
{
    .skills .title h1
    {
        font-size: 5vh;
    }

    .skills .content .skillsbox
    {
        border-radius: 2vh;
    }

    .skills .content .skillsbox .skill h1
    {
        font-size: 2vh;
    }
}