@import url('reset.css');
@import url('variable.css');
@import url('color.css');
@import url('police.css');

body {
  background: url("/images/calendar.webp") center center no-repeat;
  background-size: cover;
  height: 800px;
}

h1{
    font-weight: 700;
    font-size: 64px;
    color: var(--color-white);
    text-align: center;
}

.years{
    font-size: 50px;
    color: var(--color-white);
}
.years a{
    text-decoration: none;
    color: var(--color-white);
}

#containerMonth{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.zoneMonth{
    width: calc(100%/12);
}

.zoneMonth a{
    text-decoration: none;
    color: var(--color-dark);
}

.caseMonth{
    margin: 5px;
    padding: 3px 2px;
    border-radius: 12px;
    background-color: var(--color-white);
}

.bg-grey{
    background-color: #b3b3b3;
}

.text-grey{
    color: #b3b3b3;
}

.fs-60{
    font-size: 60px;
}

@media screen and (max-width:1600px) {
   .zoneMonth{
        width: calc(100%/6);
    } 
    #containerMonth{
        width: 90%;
    }
    body {
        height:840px;
    }
    h1{
        font-size: 60px;
    }

}

@media screen and (max-width:992px) {
   .zoneMonth{
        width: calc(100%/4);
    } 
    body {
        height:950px;
    }
    h1{
        font-size: 48px;
    }
}

@media screen and (max-width:767px) {
   .zoneMonth{
        width: calc(100%/3);
    } 
    body {
        height:1050px;
    }
    h1{
        font-size: 48px;
    }
}