html {
    font-family: Trebuchet MS;
    background: black;
    color: white;
    text-align: center;
    border: 0;
    padding: 0;
    margin: 0;
    font-variant: small-caps;
    font-weight: bold;
}

body {
    border: 0;
    margin: 0;
}

div.event {
    padding: 18px;
}


div.event {
    background: white;
    color: black;
}

div.event:nth-of-type(even) {
    filter: brightness(90%);
}

div.event.has-link:hover {
    filter: brightness(70%);
    cursor: pointer;
}

div.event.group.group-color-0 {
    background: #D9EAD3;
}

div.event.group.group-color-1 {
    background: #CFE2F3;
}

div.event.group.group-color-2 {
    background: #F4CCCC;
}

div.event.group.group-color-3 {
    background: #FFF2CC;
}


div.event p {
    margin: 8px;
}

div.event p.who {
    font-size: 2.5em;
}

div.event p.when, div.event p.where {
    font-size: 1.5em;
}

div.event p.countdown {
    font-size: 1em;
}

div.event div.progress-bar {
    margin: auto;
    width: 100%;
    height: 6px;
    background: #777;
}

div.event div.progress-bar div.filler {
    height: calc(100%);
    background: #6ae;

}

.power-of-primes {
    background: #F7D000;
    color: black;
    border-radius: 10px;
    padding: 5px
}

.power {
    background: #71084E;
    color: white;
    border-radius: 10px;
    padding: 5px
}

.prime {
    background: #4DC274;
    color: black;
    border-radius: 10px;
    padding: 5px

}

.factorial {
    background: #D9105C;
    color: black;
    border-radius: 10px;
    padding: 5px
}