/* Phase 2 */

* {
    font-family: 'IBM Plex Sans', serif;
}

code {
    font-family: 'IMB Plex Mono', serif;
}

p, a, h1, h2, li, label, input {
    line-height: 1.25;
}

#description {
    font-size:100%;
}

table {
    line-height: 1.5;
}

nav p {
    font-size: 125%;
}

nav a {
    color: #444;
}

h1 {
    font-size: 150%;
}

.loginForm * {
    font-size: 125%;
}

/* Phase 3 */

nav a {
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

table {
    width: 100%;
}

.NumCol {
    justify-content:right;
    text-align: right;
}

thead {
    justify-content: left;
    text-align: left;
}

.loginForm * {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.loginForm input {
    width: 50%;
    margin-right: 1rem;
}

.loginForm label {
    float: left;
}

.loginInput {
    justify-content: right;
    text-align: right;
}

.submitBtn {
    justify-content: center;
    text-align: center;
}

/* Phase 4 */

html, body {
    margin: 0;
    padding: 0;
}

.NavBar {
    background-color: #ddd;
    box-shadow: 0 0 5px gray;
    padding: 0;
    margin: 0;
}

p, h1, ul, label, h2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

h1 {
    border-bottom: 1px solid #ddd;
    margin-top: 3rem;
    margin-bottom: 0rem;
}

input[type=submit] {
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

table {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

img {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#subtitle {
    margin-top: 0rem;
    margin-bottom: 2rem;
}

.ActionBox {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 1rem;
    background-color: #b1c3de;
    border:2px solid #204a87;
}

/* Phase 5 */

.ActionBox a {
    justify-content: center;
    float: right;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    margin: auto;
    max-width: 48rem;
}

nav p {
    margin: 0;
}

main {
    margin: auto;
    max-width: 50rem;
}

.LeftNav {
    display: flex;
    gap: 1rem;
}

.RightNav {
    display: flex;
}

.NavBar nav {
    justify-content: space-between;
}

main img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Homework 4 changes here */

output {
    font-weight: bold;
    color: red;
}

input:invalid {
    border: red solid 2px;
}

/* Homework 5 */

output {
    font-weight: bold;
    color: red;
}

/* Homework 6 */
th.sort-column { cursor: pointer; }
th.sort-asc::after { content: " \25b2"; }
th.sort-desc::after { content: " \25bc"; }