:root {
    --white: #F7E0B7;
    --transparent-white: rgba(247,224,183, 0.5); 
    --red: #e83535;
    --italygreen: #28a745; 
    --gray: #f4c77f;
    --green: #385140;
    --brown: #B55F35;
    --beige: #D38D47;
    --light-green: #CBBF98;
}

body{
    background-color: var(--white);
}
#app_body {
    background-image: url('../img/background-5.png');
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

/* 📱 Mobile — imagem cobre 100% da tela */
@media (max-width: 768px) {
    #app_body {
        background-size: cover;   /* cobre toda a tela */
        background-position: center;
    }
}

/* 🖥 Desktop — imagem se ajusta inteira e centraliza */
@media (min-width: 769px) {
    #app_body {
        background-size: contain; /* não corta nada */
        background-position: center;
        background-color: #f5ecd8; /* opcional: cor atrás da imagem */
    }
}

#header {
    display: none!important;
}

.mdl-layout__drawer-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.screen {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    padding: 20px;
}

.screen-content{
    width: 100%;
}

.categories{
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    overflow: auto;
    margin-top: 20px;
}