*{
    font-family: helvetica;
    margin: 0;
    }
    body{
        background-color: #f8f4f4;
        height: 100%;
    }    
    
    .widget1 {
        background-color: #506cf4;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 3%;
        grid-area: widget1;
        grid-column: span 2;  
        grid-row: span 1;
    }
    
    .widget2 {
        background-color: #48c454;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 6%;
        grid-area: widget2;
        grid-column: span 1;  
        grid-row: span 1;
    }
    
    .widget3{
        background-color: #fb932b;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 6%;
        grid-area: widget3;
        grid-column: span 1; 
        grid-row: span 1;  
    }
    
    .widget4{
        background-color: white;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 3%;
        grid-area: widget4;
        grid-column: span 2;  
    grid-row: span 2; 
    }
    
    .widget5{
        background-color: white;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 6%;
        grid-area: widget5;
        grid-column: span 1;  
    grid-row: span 1;
    }
    
    .widget6{
        background-color: white; 
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 6%;
        grid-area: widget6;
        grid-column: span 1;  
    grid-row: span 1;
    }
    
    strong{
        color: black;
        font-size: x-large;
        
    }
    
    p{
        color: white;
        margin-top: 25px;
    }
 
    .contenedor {
        display: grid;
        grid-template-areas: 
            "widget1 widget1 widget2 widget3"
            "widget4 widget4 widget5 widget6"
            "widget4 widget4 widget5 widget6";
        grid-gap: 2%;
        padding: 1%;
        margin-left: 3%;
        margin-right: 3%;
        grid-template-columns: 1fr 1fr 1fr 1fr;  
        grid-template-rows: 1fr 1fr 1fr; 
        height: 95vh;

    }
    
    
    
    
    .numerosizquierda {
        margin-right: auto;
        text-align: center;
        margin-top: 30px;
    }
    
    .numeroscentro {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        margin-top: 30px;
    }
    
    .numerosderecha {
        margin-left: auto;
        text-align: center;
        margin-top: 30px;
    }
    
    .numerosizquierda strong {
        color: white;
        font-weight: bold;
        font-size: xx-large;
        
    }
    
    
    .numeroscentro strong {
        color: white;
        font-weight: bold;
        font-size: xx-large;
    }
    
    .numerosderecha strong {
        color: white;
        font-weight: bold;
        font-size: xx-large;
    }
    
    .TODO {
        display: flex;
    }
    
    .numerosizquierda p {
        margin-top: 10px;
        
    }
    
    .numeroscentro p {
        margin-top: 10px;
    }
    
    .numerosderecha p {
        margin-top: 10px;
    }
    
    .lagraficayelresto {
        display: grid;
        grid-template-rows: 1fr 1fr;
    
    }
    
 .texto {
     
        text-align: start;
        margin-left: auto;
        margin-right: auto;
    }

 .texto p {
        color: grey;
    }

    .grafica {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        height: 200px;
        padding: 10px;
    }
    
    .azul {
        background-color: #506cf4;
        width: 30px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    .azul:nth-child(1) { height: 40px; }
    .azul:nth-child(2) { height: 75px; }
    .azul:nth-child(3) { height: 100px; }
    .azul:nth-child(4) { height: 80px; }
    .azul:nth-child(5) { height: 110px; }
    .azul:nth-child(6) { height: 105px; }

    .widget5 p {
        color: black;
    }

    .imagenes {
        display: flex;
    }
    .imagenes p {
        color: black;


    }

    .imagenes img {
        width: 12%;
        height: 12%;
        margin-top: 10px;
        
    }