body {
    font-family: sans-serif;
    background-color:#e0e0e0;
} 

html, .fullscreen {display: flex; height: 100%; margin: 0; padding: 0; width: 100%;}

.container {margin: auto; text-align: center; padding: 1em;} 

.title {font-size: 2rem; color: royalblue;}

button {
    padding: 2em;
    font-weight: bold;
    margin-top: 50px;
    margin: 30px;
    border-radius: 50px;
    border-color: #bebebe;
    /*border-color: orangered; Mihaela e OK*/
    border-width: thin;
    border-style: outset;
    background: linear-gradient(145deg, #f0f0f0, #cacaca);
    box-shadow:  20px 20px 40px #bebebe,
                 -20px -20px 40px #ffffff;
}

ul {
    text-align: left;
}

li {
    padding: 0.5em;
}


.logo_div {
    position: absolute; 
    right: 0px; 
    margin-top: 0.5em;
    margin-right: 0.5em;
}

.card {
    padding: 1em;
    margin-top: 50px;
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow:  20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;
}

/*de facut un mini-card inverted, care sa fie in relief, pentru elementele incluse in card - pasi, pagini, etc*/
.card_mini {
    padding: 1em;
    margin-top: 10px;
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow:  10px 10px 30px #bebebe,
                -10px -10px 30px #ffffff;
}

.p_left {
    text-align: left;
}

.grid_container_2col {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 0.5em;
}

.grid_container_3col {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0.5em;
    margin-bottom: 0.5em;
}

.grid_container_4col {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 0.5em;
    margin-top: 0.5em;
}