*, 
*:before, 
*:after{
    box-sizing: border-box;
}
html{
    font-size: 16px;
}
body{
    margin: 0;
    padding:0;
    background-color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

body > header {
    background-color: rgb(214, 214, 214);
    height: 5rem;
}

.container {
    width: 50rem;
    margin: 0 auto;
}

.flex-container {
    line-height: 5rem;
    display: flex;
    flex-direction: row;
}

.flex-container > div {
    width: 33.333333%;
    cursor: pointer;
}

.projects {
    background-color: rgb(175, 175, 175);
}

.contact {
    background-color: rgb(110, 110, 110);
}

.skills {
    background-color: rgb(80, 80, 80);
}

main > section {
    width: 50rem;
    margin: 0 auto;
}

.content-projects {
    background-color: rgb(175, 175, 175);
    height: 60rem;
    padding: 4rem;
}

.project-container {
    padding: 2rem;
    background-color: rgb(150, 150, 150);
    height: auto;
}

.project-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.project-display {
    background-color: rgb(125, 125, 125);
    margin: 1rem;
    width: 8rem;
    height: 5rem;
}

.content-contact {
    background-color: rgb(110, 110, 110);;
    height: 60rem;
}

.content-skills {
    background-color: rgb(80, 80, 80);
    height: 60rem;
}