@font-face {
    font-family: Marianne;
    src: url(https://raw.githubusercontent.com/LAB-MI/demande-masques-covid-19/master/src/fonts/marianne-regular-webfont.woff2);
    }

    html {
    scroll-behavior: smooth;
    }

    .CV_layout {
        font-family: Marianne, sans-serif;
        max-width: 70vw;
        margin: 0 auto;
        padding: 20px;
        border-radius: 30px;
        margin-top: 3rem;
        margin-bottom: 3rem;
        padding-left: 40px;
        padding-right: 40px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    .header{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #socials{
        flex: 0.2;
        text-align: right;
    }
    #photo{
        flex: 0.2;
        text-align: center;
    }
    #photo img{
        border-radius: 50%;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    #headerInfo{
        flex: 0.6;
        text-align: left;
    }
    #socials a{
        margin-left: 10px;
        text-decoration: none;
    }
    p,ul{
        color: #666666
    }
    hr{
        margin: auto;
        margin-top: 2rem;
        border: 1px solid #e5e5e5;
        width: 30%;
    }
    .experience{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
        transition: all 0.3s ease;
        padding: 10px;
    }

    .experience:hover{
        background-color: #f4f4f4;
        border-radius: 30px;
        cursor: pointer;
    }

    .experience img{
        border-radius: 50%;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    .curriculum_info_item{
        margin-top: 2rem;
        line-height: 0.8rem;
    }
    .experience_info{
        flex: 0.9;
        text-align: left;
    }
    .experience_img{
        flex: 0.1;
        text-align: center;
    }

    h4 a{
        text-decoration: none;
    }
    .diplome_item{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 80%;
        margin: auto;
    }
    .diplome_item h4{
        padding: 10px;
        border-radius: 30px;
        margin: 1rem;
        transition: all 0.3s ease;
    }
    .diplome_item h4:hover{
        scale: 1.1;
    }

    .firefighting{
        background-color: #fff4f4;
        color: #f60700;
    }

    .study{
        background-color: #f4f6ff;
        color: #0078f3;
    }

    .other{
        background-color: #dffee6;
        color: #1f8d49;
    }
    .other a{
        color: #1f8d49;
    }
    .study a{
        color: #0078f3;
    }
    .firefighting a{
        color: #f60700;
    }
    .permis{
        background-color: #f6f6f6;
        color: #666666;
        padding: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .permis img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    .nav{
        font-family: Marianne, sans-serif;
        position: relative;
        top: 0;
        left: 0;
        text-align: left;
        max-width: 80%;
        transition: all 0.3s ease-in-out;
        z-index: 2;

    }
    .nav ul{
        display: none;
        list-style-type: none;
        padding: 30px;
        margin-bottom: 1rem;
    }

    .nav ul li a {
        padding: 0;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .nav ul li:hover  a{
        font-size: 24px;
        transition: all 0.3s ease;
    }

    .nav:hover ul{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 80%;
    }
    .info_comp{
        line-height: normal;
        background-color: #f4f4f4;
        padding: 10px;
        border-radius: 30px;
        padding-left: 40px;
        padding-right: 20px;
        text-align: justify;
    }

    .nav a{
        text-decoration: none;
        color: #666666;
    }


    .nav:hover{
        background-color: #f4f4f4;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transition: all 0.3s ease;
        width: 80vw;
    }

    .nav:hover #img_Menu img{
        transform: rotate(-0.25turn) scale(0.8);
        transition: all 0.3s ease;
    }
    .nav #img_Menu img{
        transition: all 0.3s ease;
    }

    @media (max-width: 768px){
        .CV_layout{
            width: 100vw;
        }
        .curriculum_info_item{
            margin-top: 1rem;
            line-height: 1rem;
        }
        .header{
            display: flex;
            flex-direction: column;
        }
        #img_Menu > img{
            width: 40px;
            height: 40px;
        }

        #socials{
            flex: 0.3;
            text-align: right;
        }
        #photo{
            flex: 0.2;
            text-align: center;
        }
        #photo img{
            border-radius: 50%;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        }
        #headerInfo{
            flex: 0.8;
            text-align: left;
        }
        .nav{
            max-width: 100%;
        }

        .nav:hover ul, .experience, .diplome_item{
            flex-direction: column;
        }

        .nav:hover ul li {
            font-size: 16px;
            text-align: center;
            margin-top: 1rem;
        }

        .diplome_item{
            width: 100%;
        }

        
    }