/* ===========================
   BODY
   Styles the entire webpage
   =========================== */

body {

    /* Background color and repeating image */
    background: #000080 url("images/background.gif") repeat;

    /* Default text color */
    color: #00ffcc;

    /* Default font for the entire page */
    font-family: Verdana, Arial, sans-serif;

    /* Default font size */
    font-size: 14px;
}


/* ===========================
   MAIN CONTAINER
   Holds the whole website
   =========================== */

#container {

    /* Width of the website */
    width: 800px;

    /* Centers the website horizontally */
    margin: 20px auto;

    /* Background color */
    background: #111;

    /* Decorative border */
    border: 4px ridge #ff00ff;

    /* Space between border and content */
    padding: 10px;
}


/* ===========================
   HEADER
   =========================== */

header {

    /* Centers everything inside */
    text-align: center;

    /* Gradient background */
    background: linear-gradient(#330066, #000);

    /* Cyan border */
    border: 2px solid #00ffff;
}


/* ===========================
   MAIN TITLE
   =========================== */

h1 {

    /* Bright yellow text */
    color: #ffff00;

    /* Pink shadow behind the text */
    text-shadow: 2px 2px #ff00ff;
}


/* ===========================
   NAVIGATION BAR
   =========================== */

nav {

    /* Dark background */
    background: #222;

    /* Space inside the navigation */
    padding: 8px;

    /* Center all links */
    text-align: center;

    /* Dashed green border */
    border: 2px dashed #00ff00;
}


/* ===========================
   NAVIGATION LINKS
   =========================== */

nav a {

    /* Gold-colored links */
    color: #ffcc00;

    /* Bold text */
    font-weight: bold;

    /* Space between links */
    margin: 0 10px;

    /* Remove underline */
    text-decoration: none;
}


/* Change color when hovering */

nav a:hover {

    color: white;

}


/* ===========================
   CONTENT BOXES
   =========================== */

.box {

    /* Black background */
    background: #000;

    /* Decorative border */
    border: 2px groove #00ffff;

    /* Space inside the box */
    padding: 12px;

    /* Space between boxes */
    margin: 12px 0;

}


/* ===========================
   FOOTER
   =========================== */

footer {

    /* Center the footer text */
    text-align: center;

    /* Small font */
    font-size: 12px;

    /* Light gray text */
    color: #ccc;

}

/* =========================================================
   SQUARE CALENDAR
   ========================================================= */

.calendar-box {
    width: 250px;
    height: 250px;

    border: 2px solid #000;

    background: #fff;

    display: flex;
    flex-direction: column;

    /*
        Prevent grid cells from extending
        outside the calendar.
    */
    overflow: hidden;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   CALENDAR MONTH HEADER
   ========================================================= */

.calendar-header {
    /*
        A smaller header gives the day
        cells more vertical room.
    */
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dedede
        );

    border-bottom: 1px solid #000;

    font-size: 16px;
    font-weight: bold;
}


/* =========================================================
   CALENDAR GRID
   ========================================================= */

.calendar-grid {
    /*
        Take up every remaining pixel
        underneath the month heading.
    */
    flex: 1;

    min-height: 0;

    display: grid;


    /*
        Seven days across.
    */
    grid-template-columns:
        repeat(7, 1fr);


    /*
        One weekday-name row
        plus six possible calendar rows.
    */
    grid-template-rows:
        repeat(7, 1fr);


    /*
        No gaps because the borders
        create the grid.
    */
    gap: 0;
    padding: 0;
}


/* =========================================================
   CALENDAR CELLS
   ========================================================= */

.calendar-cell {
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;

    background: #fff;

    /*
        Each cell gets its own black grid.
    */
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}


/*
    Remove the right border from the
    last column so it doesn't double
    against the calendar outer border.
*/
.calendar-cell:nth-child(7n) {
    border-right: none;
}


/*
    Remove the bottom border from
    the final row.
*/
.calendar-cell:nth-child(n + 43) {
    border-bottom: none;
}


/* =========================================================
   S M T W T F S ROW
   ========================================================= */

.calendar-day-name {
    background: #e4e4e4;

    font-size: 13px;

    font-weight: bold;

    color: #333;
}


/* =========================================================
   CURRENT DAY
   ========================================================= */

.calendar-today {
    /*
        Completely fill today's cell.
    */
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
        Square highlight.
    */
    border-radius: 0;

    background: #7baed1;

    color: #fff;

    font-weight: bold;
}