:root{
    --blue-background: #dde;
    --blue-color: #889;
    --main-text: #556;
    --dark-blue: #00b;
}

*{
    margin: 0;
    padding: 0;
}

img{    
    border: none;
}

html, body{
    width: 100%;
    height: 100%;
}

body{
    font: normal normal normal 100%/140% 'Roboto Condensed', sans-serif;
    color: var(--main-text);
}

header{
    background-color: var(--blue-background);
    color: var(--blue-main);
    text-align: center;
    font-size: 1.6rem;
    line-height: 40px;
}

p{
    margin: .5em 0;
}

h1{
  font-size: 1.5rem;
  line-height: 1.5;
}
h2{
  font-size: 1.25rem;
  line-height: 1.5;
}

label{
    position: relative;
}

label input{
    float: right;
}

input{
    width: 200px;
    font: inherit;
}

input.small{
    font-size: .75em;
}

button, a.button{
    background-color: var(--dark-blue);
    color: #fff;
    padding: .3em;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font: inherit;
}

a{
    transition: opacity 600ms ease-in-out;
}

a:hover{
    opacity: .3;
}

form{
    width: 400px;
}

section{
    padding: 1%;
}

nav{
    background-color: var(--blue-background);
}

nav li{
    list-style: none;    
}

nav a{
    color: var(--blue-main);
    text-decoration: none;
}

nav>ul{
    margin: 0 .5em;
}

footer{
    text-align: center;
    font-size: .8rem;
    line-height: 1.2;
}

table{
    margin: 1em 0;
}
td, th{
    text-align: left;
    padding: 0 .3em;
}
td.small{
    font-size: .75em;
}

ul.Paginate{
    list-style: none;
}

ul.Paginate li{
    display: inline-block;
}

ul.Paginate a:not([href]).button{
    color: #777;
    background-color: #222;
}

.login{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.login>div{    
    background-color: var(--blue-background);
    padding: .4em;
    flex-basis: 320px;
}

.notifier{
    position: absolute;
    top: 0;
    right: 0;
    background: #0b0;
    color: #fff;
    padding: 2em;
    transform: scale(0,0);
    animation: notifyAni 2700ms ease-in-out;
}

@keyframes notifyAni {
    0%{
        transform: scale(1,1);
    }
    80%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(0,0);
    }
}

@media screen and (min-width: 1024px){
    body{
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: 40px 1fr auto;
    }

    header{
        grid-column: 1 / 3;
    }

    nav{
        grid-row: 2 / 4;
    }

    footer{
        grid-column: 2 / 3;
    }
    
}