@media screen and (min-width: 992px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        display: block;
    }


    /*Menu*/
    .image {
        display: none;
    }

    .container {
        height: 100vh;
        display: block;
        padding: 0;
    }

    .image-deskop {
        padding: 0;
        margin: 0;
        display: block;
        width: 100vw;
        height: 100vh;
    }

    .site {
        width: 100%;
        opacity: 50%;
    }

    .toolbar {
        position: fixed;
        top: 50%;
        left: 10em;
        transform: translateY(-50%);
        margin-top: 0;
    }

    .toolbar-el {
        padding: 0;
    }

    .toolbar-item {
        margin: 0 0 3.5em 0;
        transform: scale(1.5);
        border-radius: 2em;
        background-color: #ffeeff;
        transition: 0.3s all ease-in-out;
    }

    .toolbar-item:hover {
        background-color: #000000;
        transform: scale(1.6);
        transition: 0.3s all ease-in-out;
    }

    .toolbar-item a button {
        background-color: transparent;
        width: 100%;
        padding: 1em 1.7em;
        border: none;
        text-align: left;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        border-radius: 1em;
        transition: 0.3s all ease-in-out;
    }

    .toolbar-item a button:hover {
        color: #fff;
        cursor: pointer;
        transition: 0.3s all ease-in-out;
    }

    /*portfolio*/
    .portfolio-body {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 2em;
        padding: 2em;
    }

    /* Card layout */
    .portfolio-element {
        margin: 0;
        height: 100%;
    }

    .display {
        display: block;
    }

    .no-display {
        display: none;
    }

    /* tribar */
    .tri {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tri-bar {
        width: 50%;

    }

    .tri-bar li:hover {
        color: #6560ed;
        cursor: pointer;
    }

    /* Image */
    .element-img {
        width: 100%;
        height: auto;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        border-bottom: 1px solid #235353;
        object-fit: cover;
    }

    /* Description */
    .element-desc {
        height: auto;
        padding: 1em;
        background-color: #d4faf3;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        color: #235353;
    }

    .element-desc-title {
        text-transform: lowercase;
        font-weight: normal;
    }

    .element-desc-text {
        opacity: 50%;
        font-size: 1em;
    }

    /*portfolio details*/
    body.portfolio {
        height: 100%;
        background-color: #ffeeff;
        overflow-y: auto !important;
    }

    .portfolio-body {
        overflow-y: scroll;
    }

    .portfolio-detail {
        display: block;
        height: auto;
    }

    .portDetail-title h1 {
        font-size: 1.5em;
        margin-bottom: 0.2em;
        color: #235353;
    }

    .portDetail-title p {
        opacity: 50%;
        font-size: 1em;
        color: black;
    }

    .portDetail-img {
        display: flex;
        justify-content: space-evenly;

        width: 100%;
        overflow-y: auto;
        padding: 1em;
        border: 2px solid #235353;
        background-color: #d4faf3;

        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 10px;
        cursor: pointer;
        overflow-x: hidden;
    }

    .portDetail-img img {
        width: auto;
        height: 30em;
        margin-bottom: 1em;
        border-radius: 15px;
        border: 1px solid black;
        display: block;
    }

    #info{
        padding: 1em;
    }

    /*about me*/
    #diaBox {
        height: 6em;
        width: 80%;
        padding: 1.5em;

        font-size: 1.3em;
    }

    .diaBox {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 10em;
        width: 100%;
        z-index: 100;
    }

    .diaBox div {
        position: relative;
        top: 0;
        height: 6.5em;
        width: 90%;

        background-color: rgba(245, 255, 251, 0.75);
        border-radius: 15px;
        border: 2px solid #ffffff;

        z-index: 101;

        padding: .5em;
    }

    /* CONTENEUR DU PERSONNAGE SUR LA PAGE ABOUT */
    .about-page .character {
        position: relative;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding-bottom: 1rem;
    }

    /* Canvas responsive : largeur max = conteneur, ratio conservé */
    .about-page #characterCanvas {
        position: relative;
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    /* Position des options au-dessus du dialogue */
    .contain {
        position: absolute;
        bottom: 10em;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1102;
        width: 90%;
    }

    .options {
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: flex-end;
    }

    .options button {
        scale: 150%;
        width: 15em;
        padding: .5em;
        border-radius: 10px;
        border: 1px solid #235353;
        background-color: rgba(255, 255, 255, 0.71);
        font-size: 1em;
        margin-bottom: 2em;
        transition: 0.3s all ease-in-out;
    }

    .options button:hover {
        background-color: #000000;
        transform: scale(1.1);
        color: #fff;
        cursor: pointer;
        transition: 0.3s all ease-in-out;
    }

    /*contact*/
    .contact {
        display: grid;
        grid-template-areas: "title title"
    "image field";
        align-items: center;
    }

    .contact-title {
        grid-area: title;
        margin: 10px;
        padding: 2em 1.5em;
        background-color: #ffffff;
        border: 1px solid #235353;
        border-radius: 10px;
    }

    .contact-title h1 {
        font-size: 2em;
        margin-bottom: 0.2em;
        color: #235353;
    }

    .contact-title p {
        opacity: 75%;
        font-size: 1em;
        color: black;
    }

    .contact-body {
        grid-area: field;
        height: auto;
        padding: 10px;
    }

    .contact-body form fieldset {
        display: flex;
        flex-direction: column;
        border: 2px solid #235353;
        border-radius: 10px;
        padding: 30px;
        margin: 3em;
    }

    .contact-body form fieldset label {
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 1em;
    }

    .contact-body form fieldset input {
        margin-bottom: 1em;
    }

    .contact-body form fieldset input,
    .contact-body form fieldset textarea,
    .contact-body form fieldset button {
        border: 2px solid #235353;
        border-radius: 10px;
        height: 2.5em;
        padding: 5px;
        font-family: 'Comfortaa', sans-serif;
    }

    .contact-body form fieldset textarea {
        resize: none;
    }

    .contact-body form fieldset p {
        margin: 0.5em 1em 1em 0;
        font-size: .8em;
    }

    .contact-body form fieldset button {
        width: 100px;
        background-color: #b5b4ff;
        font-size: 1em;
        font-weight: bold;
        transition: 0.3s all ease-in-out;
    }

    .contact-body form fieldset button:hover {
        background-color: #000000;
        color: #fff;
        cursor: pointer;
        transform: scale(1.1);
        transition: 0.3s all ease-in-out;
    }
}