/* Media queries */
@media (min-width: 1000px) {
    html {
        font-size: 18px;
    }
}

@media (max-width: 999px) {
    .largeScreen {
        display: none;
    }
}

@media (min-width: 1000px) {
    body {
        overflow-y: scroll;
        background: url(/assets/img/design/background_morning_repeat.jpg);
        background-position-x: center;
        background-size: contain;
        background-repeat: repeat-y;
    }
}

@media (min-width: 1000px) {
    body &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 60vh;
        top: 0;
        left: 0;
        background: url(/assets/img/design/background_morning_top.png) no-repeat;
        background-size: cover;
        will-change: transform;
        z-index: -1;
    }
}

/* Media Queries pour adapter le nombre de colonnes en fonction de la taille de l'écran */
@media (max-width: 600px) { /* Écrans petits (téléphones) */
    .inventory {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les petits écrans */
    }
    .window-inventory {
        max-width: 100%;
        max-height: 100%; /* Assurer que la fenêtre ne dépasse pas l'écran */
        overflow: auto;
        position: fixed;
    }

    .draggable-window.window-profile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: unset;
        transform: unset !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) { /* Écrans moyens (tablettes) */
    .inventory {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour les écrans moyens */
    }
    .window-inventory {
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }
}

@media (min-width: 901px) { /* Écrans larges */
    .inventory {
        grid-template-columns: repeat(5, 1fr); /* 5 colonnes pour les grands écrans */
    }
}

@keyframes bump {
    0% {
        transform: translate(-50%, 5px);
    }

    100% {
        transform: translate(-50%, -5px);
    }
}


@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (min-width: 800px) {


    .publicRooms .list {
        display: flex;
        flex-wrap: wrap;
    }

    .col-content .publicRooms .filter {
        display: block;
    }
}

@media (min-width: 800px) and (max-width: 999px) {
    .publicRooms .entry {
        width: calc(50% - 0.5em);
    }

    .publicRooms .entry:not(:nth-of-type(2n)) {
        margin-right: 1em;
    }
}

@media (max-width: 600px) {
    .moduleProfileFriendsBox {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .actions .flexWrap .button,
    .flexWrap .button {
        flex: 0 1 100%;
    }

    .flexWrap.spaceBetween {
        justify-content: space-between;
    }

    .box.blue .box-body.bg1,
    .box-body.bg1 {
        background: rgb(249, 254, 255);
        background: linear-gradient(180deg, rgba(249, 254, 255, 1) 0%, rgba(229, 248, 250, 1) 100%);
    }
}

@media (max-width: 999px) {

    .pols-en-ligne .flexWrap {
        justify-content: space-around;
    }

    .col.col-180.col-menu {
        display: none;
    }

    .col.col-180.col-right {
        display: none;
    }

    .col.col-640 {
        width: 100%;
    }

    .logo-planet-stereo {
        display: none;
    }

    .messagesBox {
        display: none;
    }

    .top {
        display: none;
    }

    .top-mobile {
        display: flex;
    }

    .city-light {
        visibility: hidden;
    }

    .mobile-navigation {
        display: none;
    }

    .profile-menu .horizontal-menu {
        display: inline;
    }

    .profile-menu .horizontal-menu .tab {
        height: 32px;
    }

    .footer .mafia {
        display: none;
    }

    #section-friends #friends-content {
        justify-content: center;
    }

    .simple-dropdown .info-text {
        margin-top: 10px;
    }

    .simple-dropdown .info-text a {
        font-size: 18px;
    }
}

@media (min-width: 1000px) {
    .header {
        position: relative;
    }

    body {
        overflow-y: scroll;
        background: url(/assets/img/design/background_morning_repeat.jpg);
        background-position-x: center;
        background-size: contain;
        background-repeat: repeat-y;

        /* &::after {
            content: ' ';
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            background-color: #85eaf2;
            background: url('/assets/img/design/background_morning_bottom.jpg') no-repeat;
            background-size: cover;
            will-change: transform;
            z-index: -1;
        } */
    }

    .footer {
        content: ' ';
            position: relative;
            width: 100%;
            height: 380px;
            bottom: 0;
            left: 0;
            background-color: #85eaf2;
            background: url('/assets/img/design/background_morning_bottom.png') no-repeat;
            background-size: cover;
            will-change: transform;
    }

    .mobile-navigation {
        display: none;
    }

    .messagesBox {
        /* border: 1px solid red; */
        background: url(/assets/img/design/messagesBox.svg) no-repeat;
        width: 649px;
        height: 205px;
        position: absolute;
        top: 264px;
        right: calc(50% - 490px);
        z-index: 1;
    }

    .messagesBox #marqueeMsgGeneraux {
        margin-top: 18px;
        height: 46px;
        line-height: 40px;
        color: #29506c;
        font-size: 18px;
        overflow: hidden;
        margin-left: 10px;
        margin-right: 136px;
    }

    body>.base {
        max-width: 1000px;
        margin: 0 auto;
        box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
        border-radius: 0px 0px 10px 10px;
    }

    .city-light {
        visibility: visible;
    }

    .logo-planet-stereo {
        width: 327px;
        height: 415px;
        background-image: url(/assets/img/design/logo_planet_stereo_splitted.png);
        margin-top: 25px;
    }

    .logo-planet-stereo:before {
        content: "";
        z-index: 1;
        width: 50px;
        height: 188px;
        position: absolute;
        top: 204px;
        left: calc(50% - 550px);
        background: url(/assets/img/design/logo_planet_stereo_before.png);
        background-size: cover;
        background-position: center bottom;
    }

    .top-mobile {
        display: none;
    }

    .top {
        display: flex;
    }

    .top .setup {
        display: flex;
        align-items: center;
    }

    .top .setup .wrap {
        flex: initial;
        min-width: 16em;
    }

    .publicRooms .entry {
        width: calc(33% - 0.5em);
    }

    .publicRooms .entry:not(:nth-of-type(3n)) {
        margin-right: 1em;
    }
}

@media (min-width: 1200px) {
    .footer-city {
        width: 100%;
        height: 500px;
    }

    .footer-city .city {
        height: 700px;
        width: 1600px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
        background-image: url(/assets/img/footer.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .footer-city span {
        color: #e1e1e1;
        font-family: 'Yanone Kaffeesatz';
        transform: translate(-50%, 0%);
        left: 50%;
        bottom: 65px;
        position: absolute;
    }
}