:root {
    /* colors-landing-page */
    --color-wall-1: #9C7D53;
    --color-wall-2: #B3997A;
    --color-ground: #C2AF8F;
    --color-border: #0000;
}

body {
    overflow: hidden;
}

.ground {
    position: absolute;
    left: 50%;
    transform:
        translate(-50%, -50%)
        rotateX(-55deg)
        rotateY(-10deg)
        rotateZ(15deg);
    transform-origin: top;

    width: 200vw;
    height: 1050px;
    background-color: var(--color-ground);
    border: black solid 2px;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.wall {
    height: 1080px;
    margin: -50px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--color-wall-1) 0px,
        var(--color-wall-1) 100px,
        var(--color-wall-2) 100px,
        var(--color-wall-2) 200px
    );
    z-index: 1;
}

.total {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -30%) scale(2); /* Initial scale for small screens */

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;
    pointer-events: none;
}

/* Media query for larger screens */
@media only screen and (max-width: 720px) {
    .total {
        transform: translate(-40%, -30%) scale(1); /* Normal scale */
        top: 50%;
    }
}

.desk {
    position: absolute;
    z-index: 3;
    left: -203px;
    top: -201px;
    transform: rotate(3deg);
    animation: desk 0.6s forwards ease-in;
}

.monitor {
    position: absolute;
    z-index: 4;
    top: -90px;
    left: 70px;
    transform: rotate(2deg);
}

.computer {
    position: absolute;
    z-index: 5;
    top: -130px;
    left: -35px;
    transform: rotate(3deg);
}

.keyboard {
    position: absolute;
    z-index: 6;
    left: 45px;
    top: -55px;
    transform: rotate(2deg);
}

.mouse {
    position: absolute;
    z-index: 8;
    left: 150px;
    top: -5px;
    transform: rotate(2deg);
}

.speaker-r {
    position: absolute;
    z-index: 7;
    left: 150px;
    top: -25px;
}

.speaker-l {
    position: absolute;
    z-index: 5;
    left: 50px;
    top: -50px;
}

.chair {
    position: absolute;
    z-index: 8;
    top: 379px;
    left: -450px;
    transform: rotate(4deg);
    animation: chair 0.8s forwards ease-in;
    animation-delay: 1s;
}