html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

#viewport{
    width:100vw;
    height:100vh;

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

    overflow:hidden;
}

#scene{
    position:relative;

    width:1920px;
    height:1080px;

    flex-shrink:0;
}

/* Placeholder de la cabaña */
#barn{
    position:absolute;

    width:260px;
    height:220px;

    background: url("barn.gif") center center / contain no-repeat;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);
    image-rendering: auto;
}

/* Menú */
#menu{
    position: absolute;

    left: 50%;
    top: calc(50% + 130px);

    transform: translateX(-50%);

    width: 260px;
    max-height: 170px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    overflow-y: auto;
    overflow-x: hidden;

}

#menu::-webkit-scrollbar{
    display: none;
}

#menu a{
    display: block;

    color: #fff;
    text-decoration: none;

    padding: 6px 0;

    text-align: center;
    border: none;

    font-family: monospace;
}

#menu a:hover{
    opacity: 0.7;
}

#moon{
    position: absolute;

    width: 100px;
    height: 100px;

    background: url("moon.png") center center / contain no-repeat;

    transform: translate(-50%, -50%);
}

/* Teléfono */
@media (max-width: 767px){
    #moon{
        left: 55%;
        top: 30%;
    }
}

/* Computadora */
@media (min-width: 768px){
    #moon{
        left: 63%;
        top: 30%;
    }
}