margin: 0; /*Margen*/
    padding: 0; /*Margen*/
    display: flex; / * Modelo de caja * /
    justify-content: center; / * El eje está centrado * /
    align-items: center; / * El proyecto está centrado * /
    height: 100vh; /*altura*/
    background-color: #352b48; /*color de fondo*/
    font-family: sans-serif; /*Fuente*/
}
.calendar{
    position: center;
    background-color: #fff;
    width: 800px;
    height: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 15px solid #fff; /*marco*/
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.calendar .date{
    width: 400px;
    padding: 30px;
    box-sizing: border-box; / * Reglas de tamaño de caja * /
}
.calendar .date h3{
    margin: 0 0 20px; 
    padding: 0;
    font-size: 24px; /*tamaño de fuente*/
    font-weight: 500; / * Dimensión de fuente * /
    text-align: center; / * Fuente centrada * /
    user-select: none; / * No seleccionable * /
    text-transform: capitalize; / * Capitaliza la primera letra * /
}
.calendar .date .days{
    display: flex;
    flex-wrap: wrap; / * Salto de línea * /
}
.calendar .date .days .number.active{
    background-color: #362b48;
    color: #fff;
    cursor: pointer; / * Estilo del mouse * /
    border-radius: 50%; / * Esquinas redondeadas del marco * /
}
.calendar .date .days .day,
.calendar .date .days .number{
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1){ / * 7 grupos, el primero en cada grupo * /
    color: #f44336;
    font-weight: 600;
}
.calendar .img{
    position: relative; /*Ubicación*/
    top:0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #000;
    user-select: none;
}
.calendar .img img{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; / * Cómo se ajusta el contenido del elemento a la pantalla * /
}