/* 
Student Name 	: Darian Byrne
Student Id Number: C00296036
Date 			: 13/02/2025
Styles */

/* CSS constants */
:root {
    --sidebar-bg-color: #78569F;
    --content-bg-color: #EED7FB;
}

form {
    /* adds space above the form */
    margin-top: 6em;
    /* sets a light purple background colour */
    background-color: var(--content-bg-color);
    /* thin purple border */
    border: solid var(--sidebar-bg-color) 2px;
    /* rounded borders */
    border-radius: 16px;
    /* space around the form's elements */
    padding: 16px;
}

/* styles the input labels */
.inputbox > label {
    /* slightly larger than the common styles width */
    width: 210px;
}

/* styles the inputs */
.inputbox > input, select {
    /* I'm using !important because the nav menu conflicts with my styles */
    /* thin purple border */
    border: solid var(--sidebar-bg-color) 2px !important;
    /* slight rounded border */
    border-radius: 8px !important;
    /* horizontal padding */
    padding: 0 8px !important;
}

.myButton {
    /* slightly spaces the row of buttons away from the form's content */
    margin-top: 1em;
    /* flexbox so that the buttons can be centred and evenly spaced */
    display: flex;
    justify-content: space-evenly;
}

.button {
    /* thin purple border */
    border: solid var(--sidebar-bg-color) 2px;
    /* slight rounded border */
    border-radius: 8px;
    /* makes the button larger */
    padding: 16px;
    /* makes the button look like it is popping out of the page */
    border-bottom-width: 4px;
}

.button:hover {
    /* highlights the button when it is hovered */
    background-color: var(--sidebar-bg-color);
    color: white;
}

/* styles the small display message at the bottom of each form */
.display {
    /* adds some spacing between the message and the form's buttons */
    margin-top: 1em;
}

/* styles the button within the display message */
.display > span {
    /* changes the color of the text to blue */
    color: blue;
    /* sets a pointer cursor, so the user knows this is clickable */
    cursor: pointer;
}

/* styles the large error message shown below each form */
.errorDisplay {
    /* changes the color of the text to red */
    color: red;
    /* increases the font size */
    font-size: 2em;
    /* centres the text */
    text-align: center;
}

/* styles the heading on the main content of the page */
main > h2 {
    /* add some spacing around the heading */
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
    /* same font size as form */
    font-size: 1.6em;
}

/* styles a table */
table {
    /* same widths as the form */
    min-width: 600px;
    width: 60%;
    max-width: 1000px;
    /* centres the table */
    margin: auto;
    /* background colour for the table */
    background-color: var(--content-bg-color);
    /* border for the table */
    border: solid var(--sidebar-bg-color) 2px;
    border-spacing: 0;
    border-radius: 16px;
}

/* styles all cells in a table */
th, td {
    /* spaces out the cells and aligns them nicely */
    padding: 4px 24px;
    text-align: center;
    /* border in between the cells */
    border-left: solid black 1px;
}

/* styles the first cells in a table row */
th:first-child, td:first-child {
    /* the first cell doesnt have a neighbor on it's left */
    border-left: none;
}