* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    width: 100%;
}

.grid > *:nth-child(7n-1) {
    background-color: var(--calend-weekend-days);
}

.grid > *:nth-child(7n) {
    background-color: var(--calend-weekend-days);
    margin-right: 0;
}

.grid > *:nth-child(7n+1) {
    margin-left: 0;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cell.cell-head {
    background-color: var(--calend-week);
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

    .cell.cell-head.today,
    .cell.cell-head:nth-child(n+6).today {
        background-color: yellow;
    }

    .cell.cell-head:nth-child(n+6) {
        background-color: var(--calend-weekend);
    }

.cell, .cell.cell-head {
    border: 1px solid var(--borders-color);
    border-radius: 5px;
    padding: 5px;
    min-height: 10px;
    text-align: center;
}

.cell {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: small;
    font-weight: 400;
    margin: 1px 0 0 1px;
    min-height: 100px;
    overflow-wrap: break-word;
    padding: 3px;
    text-align: left;
    transition: all 0.3s;
    width: calc(100% / 7.15);
}

    .cell.today,
    .cell:nth-child(n+6).today {
        background-color: var(--calend-today);
    }

    .cell:nth-child(n+6).nextMon,
    .cell.day.nextMon {
        background-color: var(--calend-another-month);
    }

    .cell.nextMon > div {
        font-weight: 200;
        padding-right: 3px;
    }

    .cell.nextMon,
    .cell.nextMon > .number > a,
    .cell.nextMon .day-item-line > a {
        color: grey;
    }

.day {
    padding-top: .3rem;
    position: relative;
}

    .day .number a {
        float: right;
        font-size: 16px;
        font-weight: 500;
        padding-left: 3px;
        padding-right: 3px;
        position: absolute;
        right: 3px;
        text-decoration: none;
        top: 2px;
    }

    .day.today .number a {
        border: 1px solid red;
        border-radius: 3px;
        color: red;
    }

.day-item-line {
    font-weight: 200;
    line-height: 17px;
    margin-bottom: .5rem;
    word-wrap: break-word;
}

    .day-item-line > a {
        color: black;
        text-decoration: none;
    }

.day-item-time {
    background-color: lightcyan;
}

.bday {
    color: hotpink;
    font-weight: 600;
}

/* ======== MEDIA-QUERIES ======== */

@media screen and (max-width: 768px) {
    .cell {
        font-size: 11px;
        font-weight: 500;
        margin: 0;
        width: calc(100% / 7);
    }

        .cell.cell-head {
            font-size: xx-small;
            font-weight: 500;
            letter-spacing: 0px;
        }

    .day {
        padding-top: .3rem;
    }

    .day-item-line {
        line-height: 11px;
        margin-bottom: .45rem;
    }

    .day .number a {
        font-size: 14px;
        line-height: 16px;
        padding-left: 1px;
        padding-right: 1px;
        right: 1px;
        top: 1px;
    }
}