* {box-sizing: border-box;}	

body {font-family: arial, sans-serif;
	background-color:#232579;
}

p {
	margin: 60px;
	 text-align: center;
	 font-size: 40px;
	 color: yellow;
	
}
.month {
   margin:10px;
    width: 100%;
    background: #232579;
    text-align: center;
    color: white;
    font-size: 20px;
}


.weekdays {
    padding: 0px 0px 0px 0px;
	margin:0px;
    background-color: #324BF9;
	border:5px solid orange;
	text-align: center;
}

.weekdays li {
    display: inline-block;
	padding:5px;
    width: 13.6%;
    color: yellow;
    text-align: center;
	border-right:5px solid orange ;
	border-left:5px solid orange ;
}

.days {
    padding: 10px;
    background: #eee;
    margin:0;
	border:10px solid orange;
	background-color: #324BF9;
	text-align: center;

}

.days li {
    display: inline-block;
    width: 14%;
    text-align: center;
    margin: 0px;
    font-size:30px;
	font-weight:bold;
    color: yellow;
	border:	solid orange;
	
}


.days li a {
	    width: 14%;
	    text-align: center;
	    margin: 0px;
	    font-size:30px;
		font-weight:bold;
	    color: yellow;
	}

  
a {
    width: 14%;
    text-align: center;
    margin: 0px auto 0px auto;
    font-size:30px;
	font-weight:bold;
    color: yellow;
	text-decoration:none;
}

/* 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%;}
}