* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* هدف هذا المحدد هو جعل جميع العناصر تظهر بنفس السمات الأساسية على جميع المتصفحات */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    line-height: normal;
    vertical-align: baseline;
}

body {
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    background-color: #0B3C5D;
    color: #fff;
    font-family: 'Changa', sans-serif;
}

header {
    text-align: center;
}

h1 {
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 2px 2px 15px #888888;
}

h2 {
    color: #D9B310;
    font-size: 1.25em;
    font-weight: bold;
}

.friday h2 {
    color: #328CC1;
}

main#calendar {
    margin: 20px 0;
    padding: .5%;
    border: 2px solid rgba(255,255,255,0.5);
    background-color: rgba(255,255,255,.15);
}

    main#calendar > ul {
        -ms-flex-wrap: wrap;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
    }

        main#calendar > ul > li {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 100%;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            flex: 1 1 100%; /* grow, shrink, width */
            margin: 0.25%;
            padding: 1%;
            background-color: #1D2731;
            color: rgba(255,255,255,0.85);
        }

            main#calendar > ul > li:hover { /* A = 1, B = 1, C = 3 */
                background-color: rgba(29,39,49,.5) !important;
                cursor: pointer;
            }

                main#calendar > ul > li:hover > div > time {
                    text-shadow: 1px 1px 2px #d9b310;
                }

            main#calendar > ul > li:empty {
                display: none;
                background-color: rgba(29,39,49,.5);
                cursor: default;
            }

            main#calendar > ul > li.friday { /* A = 1, B = 1, C = 3 */
                background-color: rgba(29,39,49,.75);
            }

            main#calendar > ul > li > time {
                min-width: 40px;
                padding: 0 8px;
                border-radius: 3px;
                background-color: #0B3C5D;
                color: #000;
                font-size: 1.25em;
                font-weight: bold;
                text-align: center;
            }

            main#calendar > ul > li.friday > time {
                background-color: #328CC1;
            }

            main#calendar > ul > li > div {
                margin-right: 10px;
            }

                main#calendar > ul > li > div > time {
                    display: block;
                }

                    /* main#calendar > ul > li > div > time:nth-child(2)::before */
                    main#calendar > ul > li > div > time:first-of-type::before {
                        margin-left: 5px;
                        content: '🌄';
                    }

                    /* main#calendar > ul > li > div > time:nth-child(3)::before */
                    main#calendar > ul > li > div > time:last-of-type::before {
                        margin-left: 5px;
                        content: '🌙';
                    }

footer {
    text-align: center;
}
h1 span{color:#ff9900;animation: anim 3s infinite;}
@keyframes anim {0%   {color:#fff;transform:scale(1,1);}50%  {color:darkorange;transform:scale(1.3,1.3);}100%   {color:#fff;transform:scale(1,1);}}

/* العرض الأدنى 425 بيكسل */
@media (min-width: 425px) {
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    main#calendar > ul > li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 48%;
        flex: 1 1 48%;
    }
}

/* العرض الأدنى 600 بيكسل */
@media (min-width: 600px) {

    h1 {
        font-size: 2.5em;
    }

    main#calendar > ul > li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 30%;
        flex: 1 1 30%;
    }
}

/* العرض الأدنى 769 بيكسل */
@media (min-width: 769px) {
    h1 {
        font-size: 3em;
    }

    main#calendar > ul > li > time {
        font-size: 1.25em;
    }

    main#calendar > ul > li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 20%;
        flex: 1 1 20%;
    }

        main#calendar > ul > li:nth-child(34),
        main#calendar > ul > li:nth-child(35) {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 24.5%;
            flex: 0 0 24.5%;
        }
}

/* العرض الأدنى 992 بيكسل */
@media (min-width: 992px) {

    main#calendar > ul > li,
    main#calendar > ul > li:nth-child(34),
    main#calendar > ul > li:nth-child(35) {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 18%;
        flex: 1 1 18%;
    }
}

/* العرض الأدنى 1250 بيكسل */
@media (min-width: 1250px) {

    h1 {
        font-size: 4em;
    }

    main#calendar > ul > li > time {
        font-size: 1.5em;
    }

    main#calendar > ul > li:empty {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

    main#calendar > ul > li,
    main#calendar > ul > li:nth-child(34),
    main#calendar > ul > li:nth-child(35) {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 13%;
        flex: 1 1 13%;
    }
}