/* I tried to organize my css into sections separated by phases, but there's some places where I had to specify separate phases within another phase's section. Hope that works! */

/* START PHASE 2*/

code {
    font-family: "IBM Plex Mono", sans-serif;
}

* { 
    color: black;
    line-height: 1.25;
    font-family: "IBM Plex Sans", sans-serif;
}

h2 {
    font-size: 1rem;
    margin-top: 1rem; /* PHASE 4 */
    margin-bottom: 1rem; /* PHASE 4 */
}

/* END PHASE 2*/

/* START PHASE 3 */

table {
    line-height: 1.5; /* PHASE 2 */
    width: 100%; 
    margin-top: 1rem; /* PHASE 4 */
    margin-bottom: 1rem; /* PHASE 4 */
    th {
        text-align: left;
    }
    td {
        text-align: left; /* SCREENSHOT ADHERENCE */
    }
    .table-num {
        text-align: right; /* "Make table columns that contain numbers right-aligned" */
    }
}

/* The behavior of the login form is specific to that form, which is why I'm not defining any rules for the form in submissions.html. */
form.login {
    margin-top: 1rem;
    font-size: 1.25rem; /* PHASE 2 ("Set all texty inside the login form to be 25% larger than the default font size") */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    button {
        font-size: 1.25rem; /* PHASE 2 */
        width: 50%;
    }
    .login-input {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        input {
            width: 50%;
        }
    }
}

/* Minor note: The submissions.html screenshot shows the number input controls at all times, but everything I could find on how to achieve that is beyond the scope of what we've learned, so I'm leaving that out! */

/* END PHASE 3 */

/* START PHASE 4 */

html {
    margin: 0%;
    padding: 0;
}

main {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
}

body {
    margin: 0%;
    padding: 0;
}

h1 {
    font-size: 1.5rem; /* PHASE 2 ("...set the title to be 50% larger than the default font size") */
    margin-top: 0rem;
    margin-bottom: 0rem;
    border-bottom: 1px solid #ddd;
}

img {
    margin-top: 1rem;
    margin-bottom: 1rem; 
    border: 1px solid black; /* SCREENSHOT ADHERENCE */
    /* The following 4 lines were necessary to shrink the assignment.html image as the window gets smaller; otherwise, it would extend past the div and create a horizontal scroll bar. */
    max-width: 100%; /* PHASE 5 */
    max-height: 100%; /* PHASE 5 */
    height: auto; /* PHASE 5 */
    width: auto; /* PHASE 5 */
}

p {
    margin-bottom: 1rem;
}

/* Homework 4 changes */

output {
    font-weight: bold;
    color: red; /* I'm assuming 'make <output> elements bold and red' means to make the text red. */
}

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

/* Not stated in the assignment, but I think the 2px solid red border from the submissions.html invalid input looks bad when the user has yet to submit a file in assignment.html. */
.file-input:invalid {
    border: none;
}

/* End homework 4 changes */

/* Homework 5 changes */

tfoot {
    font-weight: bold;
}

/* End homework 5 changes */

/* Homework 6 changes */

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

/* End homework 6 changes */

.action-card {
    display: flex;
    background-color: #b1c3de;
    border-style: solid;
    border-color: #204a87;
    padding: 1rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    p {
        margin-top: 0rem;
        margin-bottom: 0rem;
    }
}

p.subtitle {
    margin-top: 0rem; /* SCREENSHOT ADHERENCE */
    margin-bottom: 2rem; /* The assignment says to use 1rem here, but the screenshots seemingly have more than 1rem; possibly because of margin-collapsing? */
}

/* Piazza @105 says to match the screenshots over having the assignment's required 1rem of space between list items, so I'm removing that rule. */

/* END PHASE 4 */

/* START PHASE 5 */

.page {
    max-width: 50rem;
    width: 100%;
}

/* There's so much going on in the navbar across this assignment, so I'm just going to annotate each line's origin phase and stick it down here. Sorry! */
nav {
    display: flex;
    background-color: #ddd; /* PHASE 4 */
    box-shadow: 0px 0px 5px gray; /* PHASE 4 */
    justify-content: center;  /* PHASE 5 */
    align-items: center; /* PHASE 5 */
    margin-bottom: 3rem; /* PHASE 4 */
    padding-top: 0.5rem; /* PHASE 4 */
    padding-bottom: 0.5rem; /* PHASE 4 */
    padding-left: 1rem; /* PHASE 4 */
    padding-right: 1rem; /* PHASE 4 */
    .navigation-banner {
        display: flex; /* PHASE 5 */
        flex-direction: row; /* PHASE 5 */
        justify-content: space-between; /* PHASE 5 */
        font-size: 1.25rem; /* PHASE 2 */
        max-width: 50rem; /* PHASE 5 */
        width: 100%; /* PHASE 5 */
        /* I received specific feedback to use the <strong> tag on A1, so that's why I'm using it here instead of <b>. */
        strong {
            color: black; /* PHASE 4 */
        }
        a {
            text-decoration:none; /* PHASE 3 */
            color: #444; /* PHASE 2 */
        }
        a:hover  {
            text-decoration: underline; /* PHASE 3 */
        }
        div {
            display: flex; /* PHASE 5 */
            justify-content: space-between; /* PHASE 5 */
            gap: 1rem; /* PHASE 5 */
        }
    }
}

/* END PHASE 5 */

/* START SCREENSHOT ADHERENCE */

a:link {
    /* This (and the color in a:visited) are not listed as usable on the assignment page, but I had to use them to match the screenshots. */
    color: #0000EE;
}

a:visited {
    color: #551A8B;
}

/* END SCREENSHOT ADHERENCE */