/* Layout */

html {
    /* background-color: #e56c76; */
    background-color: #2d2d2d;
}

.container {
    max-width: 900px;
    background-color: #696969;
    margin : 0 auto;
}

header {
    background-color: #f4ead3;
    height: 14vh;
    color: #656057;
    font-family: "SourceSerifPro", serif;
    display : flex;
    justify-content: center;
    align-items: center;
}

main {
    background-color: #f8fff1;
    min-height: 90vh;
    padding : 2rem 4rem;
    font-family: 'SourceSansPro', sans-serif;
    display : grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
    grid-template-areas:
    "knowHow profile profile"
    "skills formations formations"
    "professionnalCarrer professionnalCarrer professionnalCarrer"
    "socialNetworks socialNetworks hobbies";
}

.knowHow {
    grid-area: knowHow;
}

.profile {
    grid-area: profile;
}

.skills {
    grid-area: skills;
}

.formations {
    grid-area: formations;
}

.professionnalCarrer {
    grid-area: professionnalCarrer;
}

.socialNetworks {
    grid-area: socialNetworks;
}

.hobbies {
    grid-area: hobbies;
}

.formation-content {
    display:grid;
    grid-template-columns: 7rem 1fr;
}

.professionnalCarrer-content {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
}

.years-p {
    grid-column: 1 / 2;
}

.description-p {
    grid-column: 2 / 4;
}

/* Texts */

h1 {
    font-size: 3rem;
    padding: 0 1rem;
    font-family: 'SourceSerifPro', serif;
    font-weight: bold;
}

h2 {
    font-size: 1.5rem;
    padding: 1.1rem 0;
    font-family: 'SourceSerifPro', serif;
    color: #656057;
}

h3 {
    font-weight: bold;
    padding: .3rem 0;
    color: black;
}

h4 {
    font-weight: bold;
    padding: .3rem 0;
    color: #656057;
}

p {
    color: black;
    line-height: 140%;
}

li {
    /* line-height: 140%; */
    padding-bottom: .7rem;
}

/* Images */

header img {
    height : 60%;
    border: 2px solid #656057;
    border-radius: 4px;
}

.socialNetworks img {
    width: 1.1rem;
    vertical-align: bottom;
}


/* Responsive */
/* This CV is to be seen first on Desktop, so "desktop-first" */

@media (480px <= width <= 600px) {
    main {
        padding : 2rem 2rem;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 2rem;
        grid-template-areas:
        "profile profile"
        "skills knowHow"
        "formations formations"
        "professionnalCarrer professionnalCarrer"
        "socialNetworks hobbies";
    }


}

@media (width < 480px) {
    main {
        padding : 2rem 2rem;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        grid-template-areas:
        "profile"
        "skills"
        "knowHow"
        "formations"
        "professionnalCarrer"
        "hobbies"
        "socialNetworks";
    }


}