:root {
    --main-background-color: #e5171f;
    --main-font-color: white;
    --hover-font-color: #f39700;
    --hover-background-color: #f39700;
    --table-color:#0078ba;
    --nav-p0-border-color: #e2041b;
    --nav-p1-border-color: #007b43;
    --nav-p2-border-color: #460e44;
    --nav-p3-border-color: #17184b;
    --nav-p4-border-color: #640125;
    --nav-p0-background-color: #e198b4;
    --nav-p1-background-color: #7ebea5;
    --nav-p2-background-color: #a59aca;
    --nav-p3-background-color: #84a2d4;
    --nav-p4-background-color: #c099a0;
}
*,*:before,*:after{margin:0;padding:0;}
header,footer{color:white}
body{
    min-height:100vh;
    background-color: #ccc;
    display: grid;
    grid-template-rows: 50px 30px 1fr 50px; 
    grid-template-columns:1fr;
}
header{
    grid-row:1;
    grid-column:1;
    background-color:var(--main-background-color);
    height: 50px;
    width:100%;
    text-align: center;
}
nav{
    grid-row:2;
    background-color: black;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
nav a{
    text-decoration: none;
    text-align:right;
    padding:3px 8px;
    color:white;
}
nav a:hover{background-color:rgba(200,200,200,0.8);}
nav a i{margin-right:5px;}
nav a:not(:last-child){border-right:1px solid white;}

article{
    grid-row:3;
    background-color: white;
}
footer{
    grid-row:4;
    padding-top:5px;
    border-top:3px solid var(--main-background-color);
    text-align:center;
    background-color:var(--main-background-color);
    color:var(--main-font-color);
}
.now{color:gold;}
.panOL{
    margin-left:5px;
    display:flex;
    list-style-type:none;
}
.panOL a{display:inline;}
.panOL li:not(:last-child):after{content:">";margin:0 8px;}