* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(#222, #333);
    color: #CCC;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header, main {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px;
    background: #111;
}

header {
    padding-top: 10px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}


h1 {
    flex-basis: 300px;
    margin: 0 auto;
    padding: 0.1em 1em;
    text-align: center;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 3em;
    color: yellowgreen;
}

form {
    flex-basis: 880px;
    display: flex;
    justify-content: flex-end;
}

form > * {
    flex-basis: auto;
    display:flex;
    align-items: stretch;
    justify-content: stretch;
}

form > *:first-child {
    width: 300px;
}

form > *:last-child {
   width: 500px;
}


fieldset {
    border-radius: 3px;
}

input, fieldset {
    background-color: #333;
    color: white;
    border: 1px solid #CCC;
    border-radius: 3px;
}

input[type="search"]  {
    width: 100%;
    font-size: 20px;
    border: 0;
}

table {
    width: 100%;
}

table {
    margin: 0 auto 1em auto;
    border: 0px solid transparent;
    border-spacing : 0;
    border-collapse : collapse;
}

th, td {
    border: 0;
    margin: 0;
    padding: 10px 5px;
    text-align: center;
}

th {
    background-color: #444;
    color: yellowgreen;
    text-transform: uppercase;
}

th:not(:first-child) {
    border-left: 0px solid #333;
}

tr:nth-child(odd) {
    background-color: #222;
}

td {
    border: 0px solid #111;
}

td:first-child, td:last-child {
    background-color: #333;
    color: yellow;
}

th:nth-child(2), td:nth-child(2) {
    text-align: left;
}

td[data-val="A"] {
    color: white;
    background-color: darkgreen;
    font-weight: bold;
}

td[data-val="B"] {
    color: #ffffffCC;
    background-color: #009900CC;
}

td[data-val="C"] {
    color: #ffffffCC;
    background-color: #CCCC00CC;
}

td[data-val="D"] {
    color: #ffffffCC;
    background-color: #CC6600CC;
}

td[data-val="E"] {
    color: #ffffffCC;
    background-color: #CC0000CC;
}

tr:hover td:not(:nth-child(12)) {
    background-color: #664;
    color:white;
}