::-moz-selection {
    color: #fff;
    background: #AB47BC
}

::selection {
    color: #fff;
    background: #AB47BC
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Montserrat Alternates',sans-serif;
    background-color: #fafafa;
    padding: 0;
    margin: 0
}

iframe {
    border: none
}

h1, h2 {
    text-align: center;
    font-size: 50px;
    margin: 40px auto;
}

.days svg {
    display: block;
    margin: 90px auto 0;
    width: 200px;
    height: auto;
}

.day {
    width: 100%;
    height: 100px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    position: relative
}

.day::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.3);
    bottom: 0;
    left: 0
}

.day span {
    display: flex;
    width: 25%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat Alternates',sans-serif
}

span.lang {
    font-size: 32px
}

span.num {
    font-size: 32px
}

span.num::before {
    content: '#'
}

span.date {
    padding-top: 5px;
    background-color: #333;
    text-align: center;
    font-size: 16px;
    line-height: 1.4
}

span.title {
    width: 90%;
    font-size: 26px;
    justify-content: flex-start;
    padding-left: 30px
}

.day button {
    font-family: 'Montserrat Alternates',sans-serif;
    width: 290px;
    display: inline-block;
    height: 50%;
    margin-right: 15px;
    border: 3px solid #fff;
    background: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    outline: none
}

.day button i {
    font-size: 18px
}

.day button a {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    padding: 10px
}

.day button:hover {
    background-color: #fff;
    color: #000
}

.day button:hover a {
    color: #000
}

.demo-mobile-link {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    display: none;
}
i.demo-mobile {
    font-size: 22px;
}

.filters {
    position: absolute;
    top: 10px;
    left: 10px;
}

.filters label {
    display: block;
}

.filters select {
    background: none;
    min-width: 100px;
}

@media screen and (max-width: 930px) {
    .filters {
        display: none;
    }

    .day span {
        font-size:20px
    }

    .day span.date {
        font-size: 14px
    }

    button i {
        display: none
    }
}

@media screen and (max-width: 620px) {
    .day {
        display: block;
        position: relative;
        height: 120px;
    }
    .day::after {
        height: 3px;
    }
    span:not(.title) {
        display: block;
        position: absolute;
        height: 40px;
        width: 120px;
        text-align: center;
        line-height: 40px;
    }
    span.num {top: 0px;}
    span.lang {top: 40px;}
    span.date {top: 80px;line-height: 31px;}
    span.title {
        padding-left: 130px;
    }
    .day button {
        display: none;
    }
    .demo-mobile-link {
        display: block;
    }
}

span.lang-JS {background-color: #F0DB4F; color: #323330 }
span.lang-PHP {background-color: #8892BF; color: #222530 }
span.lang-CSS {background-color: #29ABE2; color: #FEFEFE }
span.lang-Shell {background-color: #222; color: #21D725 }
span.lang-TXT {background-color: #999;color: #555}

/* colors for each day */
.day:nth-child(1) .num {background-color: #e05452}
.day:nth-child(2) .num {background-color: #e05652}
.day:nth-child(3) .num {background-color: #e05952}
.day:nth-child(4) .num {background-color: #e05b52}
.day:nth-child(5) .num {background-color: #e05e52}
.day:nth-child(6) .num {background-color: #e06052}
.day:nth-child(7) .num {background-color: #e06252}
.day:nth-child(8) .num {background-color: #e06552}
.day:nth-child(9) .num {background-color: #e06752}
.day:nth-child(10) .num {background-color: #e06952}
.day:nth-child(11) .num {background-color: #e06c52}
.day:nth-child(12) .num {background-color: #e06e52}
.day:nth-child(13) .num {background-color: #e07152}
.day:nth-child(14) .num {background-color: #e07352}
.day:nth-child(15) .num {background-color: #e07552}
.day:nth-child(16) .num {background-color: #e07852}
.day:nth-child(17) .num {background-color: #e07a52}
.day:nth-child(18) .num {background-color: #e07c52}
.day:nth-child(19) .num {background-color: #e07f52}
.day:nth-child(20) .num {background-color: #e08152}
.day:nth-child(21) .num {background-color: #e08452}
.day:nth-child(22) .num {background-color: #e08652}
.day:nth-child(23) .num {background-color: #e08852}
.day:nth-child(24) .num {background-color: #e08b52}
.day:nth-child(25) .num {background-color: #e08d52}
.day:nth-child(26) .num {background-color: #e08f52}
.day:nth-child(27) .num {background-color: #e09252}
.day:nth-child(28) .num {background-color: #e09452}
.day:nth-child(29) .num {background-color: #e09752}
.day:nth-child(30) .num {background-color: #e09952}
.day:nth-child(31) .num {background-color: #e09b52}
.day:nth-child(32) .num {background-color: #e09e52}
.day:nth-child(33) .num {background-color: #e0a052}
.day:nth-child(34) .num {background-color: #e0a352}
.day:nth-child(35) .num {background-color: #e0a552}
.day:nth-child(36) .num {background-color: #e0a752}
.day:nth-child(37) .num {background-color: #e0aa52}
.day:nth-child(38) .num {background-color: #e0ac52}
.day:nth-child(39) .num {background-color: #e0ae52}
.day:nth-child(40) .num {background-color: #e0b152}
.day:nth-child(41) .num {background-color: #e0b352}
.day:nth-child(42) .num {background-color: #e0b652}
.day:nth-child(43) .num {background-color: #e0b852}
.day:nth-child(44) .num {background-color: #e0ba52}
.day:nth-child(45) .num {background-color: #e0bd52}
.day:nth-child(46) .num {background-color: #e0bf52}
.day:nth-child(47) .num {background-color: #e0c152}
.day:nth-child(48) .num {background-color: #e0c452}
.day:nth-child(49) .num {background-color: #e0c652}
.day:nth-child(50) .num {background-color: #e0c952}
.day:nth-child(51) .num {background-color: #e0cb52}
.day:nth-child(52) .num {background-color: #e0cd52}
.day:nth-child(53) .num {background-color: #e0d052}
.day:nth-child(54) .num {background-color: #e0d252}
.day:nth-child(55) .num {background-color: #e0d552}
.day:nth-child(56) .num {background-color: #e0d752}
.day:nth-child(57) .num {background-color: #e0d952}
.day:nth-child(58) .num {background-color: #e0dc52}
.day:nth-child(59) .num {background-color: #e0de52}
.day:nth-child(60) .num {background-color: #e0e052}
.day:nth-child(61) .num {background-color: #dee052}
.day:nth-child(62) .num {background-color: #dce052}
.day:nth-child(63) .num {background-color: #d9e052}
.day:nth-child(64) .num {background-color: #d7e052}
.day:nth-child(65) .num {background-color: #d5e052}
.day:nth-child(66) .num {background-color: #d2e052}
.day:nth-child(67) .num {background-color: #d0e052}
.day:nth-child(68) .num {background-color: #cde052}
.day:nth-child(69) .num {background-color: #cbe052}
.day:nth-child(70) .num {background-color: #c9e052}
.day:nth-child(71) .num {background-color: #c6e052}
.day:nth-child(72) .num {background-color: #c4e052}
.day:nth-child(73) .num {background-color: #c1e052}
.day:nth-child(74) .num {background-color: #bfe052}
.day:nth-child(75) .num {background-color: #bde052}
.day:nth-child(76) .num {background-color: #bae052}
.day:nth-child(77) .num {background-color: #b8e052}
.day:nth-child(78) .num {background-color: #b6e052}
.day:nth-child(79) .num {background-color: #b3e052}
.day:nth-child(80) .num {background-color: #b1e052}
.day:nth-child(81) .num {background-color: #aee052}
.day:nth-child(82) .num {background-color: #ace052}
.day:nth-child(83) .num {background-color: #aae052}
.day:nth-child(84) .num {background-color: #a7e052}
.day:nth-child(85) .num {background-color: #a5e052}
.day:nth-child(86) .num {background-color: #a3e052}
.day:nth-child(87) .num {background-color: #a0e052}
.day:nth-child(88) .num {background-color: #9ee052}
.day:nth-child(89) .num {background-color: #9be052}
.day:nth-child(90) .num {background-color: #99e052}
.day:nth-child(91) .num {background-color: #97e052}
.day:nth-child(92) .num {background-color: #94e052}
.day:nth-child(93) .num {background-color: #92e052}
.day:nth-child(94) .num {background-color: #8fe052}
.day:nth-child(95) .num {background-color: #8de052}
.day:nth-child(96) .num {background-color: #8be052}
.day:nth-child(97) .num {background-color: #88e052}
.day:nth-child(98) .num {background-color: #86e052}
.day:nth-child(99) .num {background-color: #84e052}
.day:nth-child(100) .num {background-color: #81e052}

/* github corner */
.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
    0%,100% {
        transform: rotate(0)
    }

    20%,60% {
        transform: rotate(-25deg)
    }

    40%,80% {
        transform: rotate(10deg)
    }
}

@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        animation:none
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
    }
}