body {
    background-color: #f0eff4;
    background-image: var(--skybg);
}
#mainWrapper {
    display: grid;
    width: 80%;
    max-width: 1450px;
    min-height: 0;
    aspect-ratio:  18/10;
    grid-template-rows: 1fr;
    grid-template-columns: 10%  1fr 20%;
    grid-template-areas: 'left middle right';
}

#houseGraphicWrapper {
    position: relative;
    grid-area: middle;
    width: 100%;
    max-height: 100%;
}

#about {
  max-width: 100px;
}

#faq {
  max-width: 100px;
}

#english {
  max-width: 100px;
}

.image-row {
    display: flex;
    gap: 0em; /* espace entre les images, ajuste si nécessaire */
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    flex-wrap: nowrap; /* utile pour le responsive */
}
.gif-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* ou center si tu préfères */
    box-sizing: border-box;
    margin: 0px; /* espace horizontal entre les items */
}

.gif-caption {
    margin-top: 0.5em;
    font-size: 0.8em;
    color: #333;
    max-width: 70%;
    text-align: center;
}


#houseBubble{
    background-image:
    width: 120%;
    height: 80%;
    border-radius: 25%;
}

#houseStars{
    background-image: url(/images/backgrounds/stars.gif);
    width: 100%;
    height: 100%;
    border-radius: 25%;
}

#houseGraphicWrapper img {
    width: 100%;
    max-height: 100%;
}

/*#region feeling*/
#feelingWrapper {
    position: absolute;    
    width: 15%;
    top: 15%;
    left: 6%;
}
#feeling {
    height: min-content;
    container: feeling / inline-size;
}
#feeling span{
    margin: 0;
}
@container feeling (min-width: 0px){
    #feeling p {
        margin: 1;
        font-size: 12cqw;
    }
    #feeling img {
        width: auto;
    }
}
@container feeling (max-width: 100px){
    #feeling img {
        width: 70%;
    }
}
#miniBubble {
    padding: 1vw;
    width: 0;
    height: 0;
    position: absolute;
    right: -5%;
    bottom: -35%;
}
/*#endregion feeling*/

#leftWrapper {
    position: relative;
    height: 80%;
    grid-area: left;
}




#rightWrapper {
    position: relative;
    grid-area: right;
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    container: rightWrapper / inline-size;
}
#rightWrapper .cloudBubble{
    margin-top: -1em;
}
@container rightWrapper (min-width:0px) {
    .cloudText{
        font-family: "Adelia";
        font-size: 16cqw;
    }
}

/*#region nav*/
#navbar {
    list-style-type: none;
    padding: 0;
    margin: 2%;
    min-height: 75%;
    max-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    container: navbar / size;
}
#navbar > * {margin: 5px;}
@container navbar (min-width:0px) {
    li.cloudBubble > a{
        margin: 5cqw;
        font-size: 15cqw;
    }
}
/*#endregion nav*/

/*#region info bubble*/
.infoContent{
    color: #58aafc;
    container: info / inline-size;
    padding: 2.5em 0.5em 1em 0.5em;
    text-align: center;
    text-justify: distribute;
}
@container info (min-width:0px) {
    p:first-child {
        margin: 0;
        font-family: "Porkys";
        letter-spacing: 0.2em;
    }
    p {
        font-size: 6.9cqw;
        margin: 1em;
        margin-bottom: 0;
        line-height: 110%;
    }
}
.infoContent p a{color: #004cff;}
#dh {
    display: block;
    font-family: "Adelia";
    font-size: 9cqw;
    line-height: 100%;
    margin-top: 0cqh;
}
.textFluffy{
    display: block;
    margin-bottom: -10px;
    font-size: 6cqw;
}
/*#endregion info bubble*/

.item:hover,
.itemHover{
    filter: 
        drop-shadow(0 3px 0 rgb(255, 255, 255))
        drop-shadow(0 -3px 0 rgb(255, 255, 255))
        drop-shadow(3px 0 0 rgb(255, 255, 255))
        drop-shadow(-3px 0 0 rgb(255, 255, 255));
}
#journal{
    clip-path: polygon(28% 67%, 28% 63%, 34% 57%, 40% 60%, 41% 64%, 35% 69%);
}
#contact{
    clip-path: polygon(72% 60%, 67% 55%, 67% 51%, 69% 45%, 68% 42%, 71% 38%, 79% 46%, 78% 49%, 78% 55%);
}
#about{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#faq{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#english{
    clip-path: polygon(18% 7%, 84% 7%, 84% 100%, 16% 100%);
}
#links{
    clip-path: polygon(18% 46%, 17% 33%, 25% 26%, 26% 38%, 32% 43%, 32% 45%, 24% 52%);
}
#music{
    clip-path: polygon(10% 60%, 6% 55%, 8% 52%, 10% 52%, 10% 41%, 15% 41%, 14% 35%, 18% 31%, 21% 37%, 21% 42%, 19% 45%, 20% 49%, 19% 55%, 15% 58%);
}
#snail{
    clip-path: polygon(43% 99%, 46% 94%, 50% 92%, 48% 88%, 44% 86%, 42% 89%, 40% 93%, 36% 97%);
}
#pets{
    clip-path: polygon(83% 66%, 74% 60%, 74% 47%, 83% 41%, 92% 46%, 92% 60%);
}

/*#region pikring*/
.PikRing{
    border: 2px solid orange;
    border-radius: 30px;
    background-image: url(https://nickolox.neocities.org/pikring/asset/bg-bulbmin.png);
    font-weight: bold;
    font-size: 0.7vw;
    width: 90%;
    height: 50px;
    color: red;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 25%;
}
.PikRing p{
    max-width: 100%;
    margin: auto; 
    text-align: center;
    z-index: 1
}
.PikRing p:first-child{position: relative;}
.PikRing p:last-child{position: relative;}
.PikRing a{
    color: white;
    text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}
.PikRingImage {
    content: url(https://nickolox.neocities.org/pikring/asset/bulbmin.png);
    width: auto;
    height: 200%;
    max-height: 100px;
    position: absolute;
    top: -100%;
}
/*#endregion pikring*/

@media only screen and (max-width:600px) {
    body{overflow-y: auto;}
    #mainWrapper {
        width: 100%;
        height: min-content;
        max-height: 100%;
        grid-template-rows: vh min-content min-content;
        grid-template-columns: 1fr;
        grid-template-areas: 'left'
        'middle'
        'right';
        top: 0;
        left: 0;
        transform: translate(0);
    }
    #leftWrapper {height: 100%;}
    #rightWrapper {
        top: 2.5em;
        left: 0;
        transform: translate(0, 0);
        height: 70%;
        padding: 5px;
    }
    #about, #faq, #english{
        width: 40vw;
        max-width: 110px;
    }
    .image-row {
        flex-wrap: wrap;
        gap: 0vw;
    }

    @container rightWrapper (min-width:0px) {.cloudText{font-size: 10cqw;}}

    #navbar {
        height: 100%;
        margin: 0;
        padding: 3%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    @container navbar (min-width:0px) {
        li.cloudBubble > a{
            font-size: 4cqw;
            margin: 2cqw;
        }
    }
    #navbar .cloudBubble{width: min-content;}

    #houseGraphicWrapper{aspect-ratio: 13/10;}

    #rightWrapper .cloudBubble{width: 80%;}
    .infoContent{padding: 1em 1.5em;}
    .infoContent p{font-size: 0.9em;}
    #dh{font-size: 2.5em;}

    #feelingWrapper{top: 15vw;}

    .PikRing{
        width: 60%;
        max-width: none;
        margin-top: 30px;
        font-size: 2.5cqw;
    }
    .PikRingImage{
        height: 150%;
        top:-50%;
    }
}