*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        z-index: 0;
      }
      
      body {
        height: 100dvh;
        
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 10fr 1fr;
        grid-template-areas: "article" "main" "nav";
      }
      
      body>* {
        background: gray;
        padding: 12px;
      }
      
      /* area onde vai mostra nivel de: fome, sono, energia */
      article {
        grid-area: article;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      
      /* onde vai fica o cenario, entidade */
      main {
        grid-area: main;
        position: relative;
        overflow: hidden;
      }
      
      /* area de navegação de comodos tipo o pou mesmo */
      nav {
        grid-area: nav;
      }
      
      
      
      #cenario {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
      }
      
      #mostarda {
        position: absolute;
        width: 200px;
        height: auto;
        left: 25%;
        top: 25%;
        z-index: 1;
        touch-action: none;
      }