:root{
   --unit-size: 40px;
}
.wholewrap{
}
.wholewrap > *{
   margin-left: auto;
   margin-right: auto;
   max-width: 750px;
}
.philippeC > a{
   font-size: small;
   color: #90CAF9;
}
.fib > div{
   font-weight: bold;
   box-sizing: border-box;
   padding: 3px;
   border: solid 1px #000000;
}
.fib > div > span{
   font-family: 'Baloo Tamma 2', cursive;
}
.fibwrap{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 30px;
   margin-bottom: 30px;
}
.fib{/* grid ayout */
   width: calc(var(--unit-size) * 8);
   height: calc(var(--unit-size) * 5);
   display: grid;
   grid-template-rows: 1fr 1fr 3fr;
   grid-template-columns: 2fr 1fr 5fr;
}
#one1{
   grid-row: 1 / 2;
   grid-column: 2 / 3;
}
#one2{
   grid-row: 2 / 3;
   grid-column: 2 / 3;
}
#two{
   grid-row: 1 / 3;
   grid-column: 1 / 2;
}
#three{
   grid-row: 3 / 4;
   grid-column: 1 / 3;
}
#five{
   grid-row: 1 / 4;
   grid-column: 3 / 4;
   display: flex;
   flex-direction: column;
}
#five > span{
   flex: 1 1 auto;
}
.clocktime{
   padding-right: 3px;
   text-align: right;
   text-shadow: 0px 0px 2px #cccccc;
}
dl{
   margin: 15px;
}
dt:after{
   content: ':';
}
dt > span{
   font-size: small;
   color:#999999;
}
dd > span {
   /* display: inline-block; */
   padding: 0 5px;
}
.rr{
   background: linear-gradient(to top, #D50000CC, #D50000CC 25%, transparent 75%, transparent);
}
.gg{
   background: linear-gradient(to top, #00C853CC, #00C853CC 25%, transparent 75%, transparent);
}
.bb{
   background: linear-gradient(to top, #2962FFCC, #2962FFCC 25%, transparent 75%, transparent);
}

.blinkcolon{
   animation-name: blinker;
   animation-duration: 1s;
   animation-timing-function: steps(2, jump-none);
   animation-iteration-count: infinite;
}
@keyframes blinker {
   from { opacity: 0; }
   to   { opacity: 1; }
}
.fib > div > span {
   animation-name: fadeout;
   animation-duration: 10s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-out;
   /* animation-iteration-count: 1; */
}
@keyframes fadeout {
   from { opacity: 1; }
   to   { opacity: 0; }
}
footer, footer a{
   font-size: small;
   color: #999999;
}