* {

    box-sizing: border-box;

}



ul {

    list-style-type: none;

}



body {

    font-family: Verdana, sans-serif;

}



.month {

    padding: 20px 25px;

    width: 100%;

    background: white;

    /* border: 0.5px solid #3f4346; */

    box-shadow: 1px 1px 2px #3f4346, 0 0 25px white, 0 0 5px #3f4346;

    text-align: center;

    /* border-top-right-radius: 10%;



    border-top-left-radius: 10%; */

}



.month ul {

    margin: 0;

    padding: 0;

}



.month ul li {

    color: #006AB6;

    font-size: 20px;

    text-transform: uppercase;

    letter-spacing: 3px;

}



.month .prev {

    float: left;

    padding-top: 10px;

}



.month .next {

    float: right;

    padding-top: 10px;

}



.weekdays {

    margin: 0;

    padding: 10px 0;

    background-color: #006AB6;

    /* box-shadow: 1px 1px 2px #006AB6, 0 0 25px white, 0 0 5px #3f4346; */

    box-shadow: 1px 1px 2px #3f4346, 0 0 25px white, 0 0 5px #3f4346;

}



.weekdays li {

    display: inline-block;

    width: 13.6%;

    color: white!important;

    text-shadow: 2px 2px 4px #000000;

    text-align: center;

}



.days {

    padding: 10px 0;

    background: white;

    /* border: 1px solid #006AB6;

    box-shadow: 1px 1px 2px #006AB6, 0 0 25px white, 0 0 5px #3f4346; */

    box-shadow: 1px 1px 2px #3f4346, 0 0 25px white, 0 0 5px #3f4346;

    margin: 0;

}



.days li {

    list-style-type: none;

    display: inline-block;

    width: 13.6%;

    text-align: center;

    margin-bottom: 10px;

    font-size: 15px;

    color: #777;

}



.days li .active {

    padding: 5px;

    background: #006AB6;

    border-radius: 20%;

    color: white !important

}



.nombre_mes {

    color: rgb(94, 89, 89)!important;

    text-shadow: 2px 2px 3px rgb(167, 158, 158);

    font-weight: bold;

}





/* Add media queries for smaller screens */



@media screen and (max-width:720px) {

    .weekdays li,

    .days li {

        width: 13.1%;

    }

}



@media screen and (max-width: 420px) {

    .weekdays li,

    .days li {

        width: 12.5%;

    }

    .days li .active {

        padding: 2px;

    }

}



@media screen and (max-width: 290px) {

    .weekdays li,

    .days li {

        width: 12.2%;

    }

}