/* Phase 2 - Typography*/
* { font-family: "IBM Plex Sans", serif; line-height: 125%;}
code {font-family:"IMB Plex Mono", serif;}
table {line-height: 150%;}
nav {
    link {
        color: rgb(90, 90, 90);
    }
    font-size: 125%;

}
.bolded {
    font-weight: 900;
}
title {
    font-size: default * 1.5;
}
form {
    font-size: default * 1.25;
}
/* Phase 3 - links, forms and tables */
nav {
    a:hover{
        text-decoration: underline;
    }
    a {
        text-decoration: none;
    }
}
table {
    width: 100%;
}
th {
    text-align: left;
}
.right-align-text {
    text-align: right;
}
.right-align-element{
    float: right;
}
.center-align-element{
    text-align: center;
}
.login section {
    margin-bottom: 1rem;
    .half {
        width: 50%;
    }
}
/* Phase 4 */
html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
}
nav {
    background-color: rgb(228, 228, 228);
    a:visited {
        color: rgb(39, 39, 39);
      }
    box-shadow: 0px 0px 5px 1px /*the 1px is to match reference photos exactly*/ rgb(156, 156, 156);
    padding: 0.5rem 1rem 0.5rem 1rem;
}
h1 {
    margin-top: 3rem;
    margin-bottom: 0;
}
main{
    
    section {
        margin-top: 1rem;
    }
    button {
        margin-top: 1rem;
        margin-right: 4px;
    }
    table {
        margin-top:1rem;
    }
    hr {
        margin-top: 1rem;
    }
    padding-left: 1rem;
    padding-left: 1rem;
    /* Homework 4 changes here */
    output.error {
        color: red;
        font-weight: bold;
    }
    input {
        width: 3.5rem;
    }
    input:invalid {
        border: 2px solid red;
    }
    /* End Homework 4 changes */
}
.line {
    height: 1px;
    background-color: lightgray;
    width: 100%;
  }
.action-box{
    background-color: #b1c3de;
    border: 2px solid #204a87;
    padding: 0rem 1rem 1rem 1rem;
}
/* Phase 5 */
.flex-container{
    display: flex;
    gap: 1rem;
}
.flex-end{
    justify-content: flex-end;
}
.flex-spaced{
    justify-content: space-between;
}
.flex-start{
    justify-content: flex-start;
}
.max-52{
    max-width: 50rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
th.sort-column { cursor: pointer; }
th.sort-asc::after { content: " \25b2"; }
th.sort-desc::after { content: " \25bc"; }