body {
    background-color:var(--background);


}
#image-container {
    position: relative;
    margin-top: -30px;
}

.chair1 {
    top: 455px;
    left: 175px;
    width: 329px;
    height: 435px;
    object-fit: cover;
    position: absolute;
    
    display: flex;

}

.chair1:hover {
    transform: rotate(-12deg);
    z-index: 1;
}


.chair2 {
    top: 455px;
    left: 875px;
    width: 329px;
    height: 435px;
    object-fit: cover;
    position: absolute;
    
    display: flex;
}

.chair2:hover {
    transform: rotate(-12deg);
    z-index: 1;

}



.chair3 {
    top: 683px;
    left: 1225px;
    width: 329px;
    height: 207px;
    position: absolute;
    object-fit: cover;
   
    display: flex;
}

.chair3:hover {

    z-index: 1;
    width: 329px;
    height: 435px;
    top: 455px;

}



.chair4 {
    top: 455px;
    left: 1225px;
    width: 329px;
    height: 207px;
    position: absolute;
    object-fit: cover;
    
    display: flex;
}

.chair4:hover {

    z-index: 1;
    width: 329px;
    height: 435px;
}



.chair5 {
    top: 455px;
    left: 524px;
    width: 330px;
    height: 207px;
    object-fit: cover;
    position: absolute;
   
    display: flex;
}

.chair5:hover {

    z-index: 1;
    width: 505px;
    height: 435px;


}



.chair6 {
    top: 683px;
    left: 524px;
    width: 155px;
    height: 207px;
    object-fit: cover;
    position: absolute;
    
    display: flex;
}

.chair6:hover {
    top: 455px;
    left: 524px;
    z-index: 1;
    width: 330px;
    height: 441px;
    transform: rotate(-15deg);
}


.chair7 {
    top: 683px;
    left: 699px;
    width: 155px;
    height: 207px;
    object-fit: cover;
    position: absolute;
   
    display: flex;
}

.chair7:hover {

    z-index: 1;
    width: 329px;
    height: 435px;
    top: 455px;
}


.heading {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
    width: 1159px;
    font-family: "Barriecito", system-ui;
    font-weight: 400;
    color: var(--brown);
    font-size: 60px;
    letter-spacing: 0;
    line-height: normal;
    text-align: center;
    margin-top: 40px;
}

.home {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;
}

.home img{
    width: 50px;
    height: 50px;
    display: block;
}
.nav{
    display:flex;
    
    
}

.guides{
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 999; 
}

.guide{
    font-family: "Space Mono", monospace;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--brown);

    text-decoration: none;
}
@media (max-width: 768px) {
    .heading {
        width: 90%;
        font-size: 40px;
        position: relative;
        margin-bottom: 30px;
    }
    #image-container {
        position: relative;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
    .chair1, .chair2, .chair3, .chair4, .chair5, .chair6, .chair7 {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }
    .chair1:hover {
        transform: rotate(-12deg);
        z-index: 1;
    }
    .chair2:hover {
        transform: rotate(-12deg);
        z-index: 1;
    }
    .chair3:hover {
        z-index: 1;
        width: 100%;
        height: auto;
        transform: rotate(-12deg);
    }
    .chair4:hover {
        z-index: 1;
        width: 100%;
        height: auto;
        transform: rotate(12deg);
    }
    .chair5:hover {
        z-index: 1;
        width: 100%;
        height: auto;
        transform: rotate(-10deg);
    }
    .chair6:hover {
        z-index: 1;
        width: 100%;
        height: auto;
        transform: rotate(-15deg);
    }
    .chair7:hover {
        z-index: 1;
        width: 100%;
        height: auto;
        transform: rotate(12deg);
    }
    img{
        width: 100%;
        height: auto;
        display: block;
    }
}