@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --header-bg: #f4f4f4;
    --html-bg: rgba(28, 39, 48, 0.5);
    --body-bg: #ffffff;
    --font-primary: #464a4e;
    --font-secondary: #706f6f;
}

html {
    font-family: Lato, monospace;
    color: var(--font-primary);
    background-color: var(--html-bg);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: grid;
    place-content: center;
}

body {
    width: 1200px;
    min-height: 100dvh;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    background-color: var(--body-bg);
}

header {
    width: 100%;
    height: 20%;
    background-color: var(--header-bg);
    margin-top: 1rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    > div.titles {
        flex: 0.7;
        padding-left: 5%;
        letter-spacing: 4px;
        font-family: Raleway, monospace;

        > h1 {
            font-size: 5rem;
            margin: 0;
        }
    }

    > div.photo {
        flex: 0.3;
        height: 100%;
        text-align: center;

        > img {
            height: 75%;
            border-radius: 50%;
            position: relative;
            top: 40%;
        }
    }
}

main {
    height: auto;
    width: 90%;
    display: grid;
    grid-template: 300px 350px repeat(2, 1fr) / 1fr 2fr;
    margin-top: 2rem;
    font-size: 1.3rem;
    
}

#contact {
    grid-row: 1;
    grid-column: 1;
    border-bottom: 2px solid var(--font-secondary);
    border-right: 2px solid var(--font-secondary);

    > div.contact-infos {
        margin-bottom: 1rem;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        > i {
            flex: 0.1;
            margin-right: 1rem;
            text-align: center;
        }

        > span {
            flex: 0.9;
        }
    }
}

#profile {
    grid-row: 1;
    grid-column: 2;
    border-bottom: 2px solid var(--font-secondary);
    padding-left: 3rem;
    
}

#education {
    grid-row: 2 / span 3;
    grid-column: 1;
    border-right: 2px solid var(--font-secondary);
}

#skills {
    grid-row: 2;
    grid-column: 2;
    border-bottom: 2px solid var(--font-secondary);
    padding-left: 3rem;

    > div.list-wrapper {
        display: flex;
        flex-flow: row nowrap;

        > ul.skills-list {
            padding-left: 1rem;
            flex: 0.5;

            > li {
                margin-bottom: 0.3rem;
            }
        }

        > ul.techno-list {
            flex: 0.5;
            > li {
                margin-bottom: 0.3rem;
            }
        }
    }
}

#experience {
    grid-row: 3 / span 2;
    grid-column: 2;
    padding-left: 3rem;
}

.font-color-sec {
    color: var(--font-secondary);
}

.font-weight-bold {
    font-weight: bold;
}

.pad-bot-20 {
    padding-bottom: 20px;
}

h3 {
    font-size: 2.5rem;
    letter-spacing: 8px;
    margin: 0.7rem 0;
}

@media screen and (max-width: 1200px) {
    body {
        width: 100dvw;
    }

    header {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        > div.titles {
            text-align: center;
            padding-left: 0;
        }
        > div.photo {
            > img {
                position: static;
            }
        }
    }

    main {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;

        > section#contact,
        section#education {
            border-right: none;
        }
        > section#profile,
        section#experience,
        section#skills {
            padding: 0;
        }
        
    }

    section {
        border-bottom: 2px solid var(--font-secondary);
    }

    section#skills, section#contact {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }

    div.exp-details {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
       border-top: 2px dashed var(--font-secondary);
       
        > p {
            margin: 0;
        }
    }

    div.educ-details {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        border-top: 2px dashed var(--font-secondary);
    }

    h3,h4 {
        text-align: center;
    }
}