body {
    background: #333;
    color: wheat;
    font-family: sans;
    /*font-size: 1.2em;*/
}

a {
    color: #cca050;
}

hr {
    border-color: #666;
}

p,span {
    text-align: justify;
}

table[border] {
    width: 100%;
}

/*font[size="+1"] {
    font-size: 1.2em;
}*/

.title {
    height: 250px;
    width: 100%;
    display: grid;
}

.cat-bg {
    background-image: url('cat.png');
    height: 100%;
    width: 100%;
    filter: blur(4px);
    background-size: 100% auto;
    background-position: center;
    grid-area: 1/1;
}

.title-box {
    grid-area: 1/1;
    padding: 20px;
    z-index: 99;
    text-align: right;
    color: white;
    text-shadow: 0px 2px #333;
}

.content-container {
    margin: auto;
    max-width: 1280px;
}

table[border] tr:nth-child(odd) td {
    background: rgba(100,100,100,0.5);
}

nav {
    width: 100%;
    background: #222;
    min-height: 40px;
    margin: 0 0 10px 0;
    /*font-size: 0.82em;*/
}

nav a {
    padding: 10px 7px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border-left: 1px dotted wheat;
}

nav a:nth-child(1) {
    border-left: none;
}

nav a:hover {
    background: rgba(160,160,160,0.2);
}

/*table tr:hover td {
    background: rgba(160,160,160,0.2);
}*/

/* override colors */
font[color="#993399"] {
    color: white;
}

font[color="#006600"] {
    color: #7ef542;
}

font[color="#280099"] {
    color: #008080;
}

@media(max-width: 1180px) {
    .content-container {
        margin: initial;
        max-width: auto;
    }

    nav a {
        display: block;
        border-left: none;
    }
}