login_aai.css

:root{
    --main-bg: linear-gradient(-5deg, #abc, #fff, #e0e8f0) fixed;
    --main-color: #123;

    --h1-color: #68a;
    --h2-color: #68a;
    --a-color: #68a;

    --content-bg: #fff;
    --content-border: 3px solid #d0d8e0;
    --content-shadow: 0.5em 0.5em 2em #fff;

    --error-bg: #faa;
    --error-color: #400;

    --info-bg: #fc3;
    --info-color: #650;

    --footer-color: #789;

    /** ---------- mode boxes */
    --idp-border: 1px solid #cde;
    --idp-color: #46c;
    --idp-shadow: 0 0 2em #eee inset;

    --idp-hover-shadow: 0 0 2em #eee;

    --inputfilter-border: 2px solid #eee;
    --inputfilter-color:#789;

    --resetfilter-border: 2px solid #dcc;
    --resetfilter-bg:#edd;
    --resetfilter-color: #800;
    
}

a, a:visited{
    color: var(--a-color);
}
body {
    background_: linear-gradient(-5deg, #abc, #cee, #f0f8ff, #e0e8f0, #fee) fixed;
    background: var(--main-bg);
    color: var(--main-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    padding: 0;
    margin: 0;
}

h1{color:var(--h1-color);}
h2{color: var(--h2-color);}
div#head {
    margin: 1em auto 1em;
    width: 60%;
}
div.content {
    background: var(--content-bg);
    border-radius: 2em;
    border: var(--content-border);
    box-shadow: var(--content-shadow);
    margin: 2em auto 2em;
    padding: 2em;
    width: 60%;
}
div.msg{
    border-radius: 1em;
    border: 1px solid;
    padding: 1em;
    margin-bottom: 1em;
}

div.error{
    background: var(--error-bg);
    color: var(--error-color);
}
div.info{
    background: var(--info-bg);
    color: var(--info-color);
}

footer{
    width: 60%;
    color: var(--footer-color);
    margin: 10em auto 5em;
    text-align: right; 
}
/** ---------- mode boxes */

div.idp a{ 
    border: var(--idp-border); 
    border-radius: 1em; 
    box-shadow: var(--idp-shadow);
    color: var(--idp-color);
    float: left;
    height: 7em; 
    margin: 0 1em 1em 0; 
    overflow: hidden;
    padding: 1em;
    text-align: center;
    width: 10em;
}
div.idp img { height: 80px;}
div.idp a:hover{ 
    box-shadow: var(--idp-hover-shadow);
}

input#filter{
    border: var(--inputfilter-border);
    padding: 0.5em;
    color:var(--inputfilter-color);
    font-size: 130%;
    width: 80%;
}
button#resetfilter{
    border: var(--resetfilter-border);
    font-weight: bold;
    font-size: 130%;
    padding: 0.5em 2em;
    background:var(--resetfilter-bg);
    color: var(--resetfilter-color);
    margin-left: 1em;
}