/* RESPONSIVE TEL */

@media screen and (max-width: 600px) {

    /* Réglages page globale*/
    body {
        background-color: #ececec;
        max-width: 100%;
        margin: 0;
    }

    /* Menu */
    nav {
        display: none;
    }

    /* CV */
    .cv {
        max-width: 100%;
        border: none;
        margin: auto;
	
    }

    iframe.cv {
        display: grid;
        grid-template-columns: 100%;
        max-width: 100%;
    }
  
    /* Bannière présentation */

    .banniere-presentation {
        display: grid;
        grid-template-columns: 100%;
        max-width: 100%;
    }

    /* Photo de profil */
    .img-profil {
        display: grid;
        grid-template-columns: 100%;
        width: auto;
        height: auto;
        max-width: 100%;
    }

    /* Présentation */
    .presentation {
        display: flex;
        justify-content: center;
        color: white;
        flex-wrap: wrap;
        font-family: "Baskerville Old Face", sans-serif;
        max-width: 100%;
    }


    .presentation-profil {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: row;
        color: white;
        margin: 0.5em;
        max-width: 100%;
    }

    .identite {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 4em;
        font-weight: bold;
        animation: fadein 500ms ease;
        max-width: 100%;

    }

    .identite p {
        font-family: "DejaVu Sans Mono", sans-serif;
        max-width: 100%;
        margin: 0.5em;
    }

    .metier p {
        font-family: "DejaVu Sans Mono", sans-serif;
        max-width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .background-video-homepage {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        background-size: inherit;
        max-width: 100%;
    }

    .metier {
        display: grid;
        grid-template-columns: 100%;
        font-size: 2em;
        font-weight: bold;
        max-width: 100%;
    }

    .explore a {
        padding: 1.5em;
        list-style-type: none;
        text-decoration: none;
        color: white;
        background-color: #06334a;
        border-radius: 5em;
        max-width: 100%;
    }

    .explore a:hover {
        background-color: black;
        color: #06334a;
        font-weight: bold;
        border: 2px solid #06334a;
    }

    /* Mes réalisations */
    .title-section {
        display: grid;
        justify-content: center;
        text-align: center;
        grid-template-columns: 100%;
        font-size: 2em;
        font-family: "DejaVu Sans Mono", sans-serif;
    }

    .realisation {
        padding: 2em;
        display: grid;
        grid-template-columns: 95%;
        justify-content: center;
        text-align: center;

    }

    .muffin-clicker-picture {
        max-width: 100%;
    }

    a {
        text-decoration: none;
        list-style-type: none;
    }

    .burger-picture {
        max-width: 100%;
    }


    .realisation .box {
        box-shadow: grey;
        background-color: white;
        border-radius: 2em;
        padding: 2em;
        height: auto;
        margin: 1em;
        max-width: 100%;
    }

    .box h3, p {
        font-family: "Microsoft JhengHei", sans-serif;
    }

    .box img{
        max-width: 100%;
    }

    .box iframe{
        max-width: 100%;
    }
    /* Contact */
    form {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0 30em 0 30em;
        background-color: white;
        padding: 1em;
    }

    .form-contact {
        background: rgb(155, 209, 213);
        background: linear-gradient(90deg, rgba(155, 209, 213, 1) 20%, rgba(6, 51, 74, 1) 50%, rgba(155, 209, 213, 1) 80%);
        padding: 2em;
    }

    fieldset {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    input, textarea {
        padding: 1em;
        margin: 0.5em;
        border: 1px solid grey;
        border-radius: 1em;
        font-family: "Microsoft JhengHei", sans-serif;
    }

    .btn-submit {
        border-radius: 0;
        background-color: #06334a;
        color: white;
    }

    .communication-media {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        align-items: center;
        padding: 2em;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        background: rgb(155, 209, 213);
        background: linear-gradient(90deg, rgba(155, 209, 213, 1) 20%, rgba(6, 51, 74, 1) 50%, rgba(155, 209, 213, 1) 80%);
    }

    .communication-media .linkedin {
        display: grid;
        grid-template-columns: 80%;
        justify-content: center;
        text-align: center;
        margin: 3em;
        padding: 2em;
        background-color: white;
        border-radius: 2em;
    }

    .btn-social-media {
        padding: 1em;
        background-color: #06334a;
        color: white;
        font-family: "Microsoft JhengHei", sans-serif;
        font-size: small;
    }

    .communication-media .email {
        display: grid;
        grid-template-columns: 80%;
        justify-content: center;
        text-align: center;
        margin: 3em;
        padding: 2em;
        background-color: white;
        border-radius: 2em;
    }

    /* Footer */
    footer {
        display: grid;
        grid-template-columns: 100%;
        padding: 0.2em;
        background-color: #d9d9d9;
        max-width: 100%;

    }

    footer .social-media {
        display: flex;
        gap: 1em;
        text-align: center;
        padding-top: 1em;
        max-width: 100%;
    }

    footer p {
        display: flex;
        justify-content: center;
        padding: 0.2em;
        max-width: 100%;
    }

    .social-media {
        display: grid;
        grid-template-columns: 80%;
        justify-content: center;
        align-items: center;
        max-width: 100%;
    }
}

/* NE PAS TOUCHER !!! */

/* RESPONSIVE PC */

@media screen and (min-width: 600px){

    /* Réglages page globale*/

    body {
        margin: 0;
        background-color: #ececec;

    }

    html{
        scroll-behavior: smooth;
    }

    /* Menu */

    nav {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        align-items: center;
        background: black;
        font-size: 1em;
        position: absolute;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;

    }

    nav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 1em 0 1em 0;
    }

    ul li a {
        text-decoration: none;
        color: white;
        font-family: "DejaVu Sans Mono", sans-serif;
        font-size: larger;
    }

    ul li {
        list-style-type: none;
    }

    /* CV */

    .cv {
        height: 62em;
        width: 43em;
        border: none;
        margin: auto;
        padding: 2.5em;
    }

    iframe.cv {
        display: flex;
        justify-content: center;
    }

    /* Bannière présentation */

    .banniere-presentation {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Photo de profil */

    .img-profil {
        width: auto;
        height: auto;
        max-width: 100%;
    }

    /* Présentation */

    .presentation {
        display: flex;
        align-items: center;
        align-content: center;
        color: white;
        flex-wrap: wrap;
        font-family: "Baskerville Old Face", sans-serif;
    }


    .presentation-profil {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: row;
        color: white;
        margin: 0.5em;
    }

    .identite {
        font-size: 5em;
        font-weight: bold;
        animation: fadein 500ms ease;

    }

    .identite p{
        font-family: "DejaVu Sans Mono", sans-serif;
    }

    .metier p{
        font-family: "DejaVu Sans Mono", sans-serif;
    }

    .background-video-homepage {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        background-size: inherit;
    }

    /* Animation Prénom/Nom */

    @keyframes fadein {
        from {
            opacity: 0;
            transform: translateY(1em);
        }
        to {
            opacity: 100%;
            transform: translateY(0);;
        }
    }


    .metier {
        font-size: 2em;
        font-weight: bold;
        padding-right: 1em;
    }

    .explore a {
        padding: 1.5em;
        list-style-type: none;
        text-decoration: none;
        color: white;
        background-color: #06334a;
        border-radius: 5em;
    }

    .explore a:hover {
        background-color: black;
        color: #06334a;
        font-weight: bold;
        border: 2px solid #06334a;
    }

    /* Mes réalisations */

    .title-section{
        display: flex;
        justify-content: center;
        font-size: 2em;
        font-family: "DejaVu Sans Mono", sans-serif;
    }
    .realisation{
        padding: 2em;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30em, 25em));
        gap: 5em;
        justify-content: center;
        text-align: center;

    }
    .muffin-clicker-picture{
        height: 141px;
        width: 256px;
    }
    a{
        text-decoration: none;
        list-style-type: none;
    }

    .burger-picture{
        height: 150px;
        width: 421px;
    }


    .realisation .box{
        box-shadow: grey;
        background-color: white;
        border-radius: 2em;
        padding: 2em;
        height: auto;
        width: auto;
    }

    .box h3, p{
        font-family: "Microsoft JhengHei", sans-serif;
    }

    /* Contact */

    form{
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0 30em 0 30em;
        background-color: white;
        padding: 1em;
    }

    .form-contact{
        background: rgb(155,209,213);
        background: linear-gradient(90deg, rgba(155,209,213,1) 20%, rgba(6,51,74,1) 50%, rgba(155,209,213,1) 80%);
        padding: 2em;
    }

    fieldset{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    input, textarea{
        padding: 1em;
        margin: 0.5em;
        border: 1px solid grey;
        border-radius: 1em;
        font-family: "Microsoft JhengHei", sans-serif;
    }

    .btn-submit{
        border-radius: 0;
        background-color: #06334a;
        color: white;
    }

    .communication-media{
        display: grid;
        grid-template-columns: 20% 30% 30% 20%;
        justify-content: center;
        align-items: center;
        padding: 2em;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        background: rgb(155,209,213);
        background: linear-gradient(90deg, rgba(155,209,213,1) 20%, rgba(6,51,74,1) 50%, rgba(155,209,213,1) 80%);
    }

    .communication-media .linkedin {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 3em;
        padding: 2em;
        background-color: white;
        border-radius: 2em;
    }

    .btn-social-media{
        padding: 1em;
        background-color: #06334a;
        color: white;
        font-family: "Microsoft JhengHei", sans-serif;
        font-size: small;
    }

    .communication-media .email{
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 3em;
        padding: 2em;
        background-color: white;
        border-radius: 2em;
    }

    .communication-media .linkedin:hover{
        transform: scale(1.005);
        transition: 0.5s ;
    }

    .communication-media .email:hover{
        transform: scale(1.005);
        transition: 0.5s ;
    }

    /* Footer */

    footer {
        display: grid;
        padding: 0.2em;
        background-color: #d9d9d9;

    }

    footer .social-media {
        display: flex;
        gap: 1em;
        text-align: center;
        padding-top: 1em;
    }

    footer p {
        display: flex;
        justify-content: center;
        padding: 0.2em;
    }

    .social-media {
        display: grid;
        grid-template-columns: 40% 10% 10% 40%;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
}