main {
    background-color: white;
    margin: var(--margins);
    padding: var(--padding);
    border: 0.1em solid var(--kiloRed);
}

main.grid-layout {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
    "back back"
    "previous-workouts next-workouts"
    "add-exercise add-exercise"
    "edit-prescribed-exercises edit-prescribed-exercises";
}

.back {
    grid-area: back;
    position: relative;
}

.previous-workouts {
    grid-area: previous-workouts;
    position: relative;
    word-wrap: anywhere;
    text-align: center;
}

.previous-workouts a {
    border: .1em solid black;
    margin: var(--quarterMargins);
}

.next-workouts {
    grid-area: next-workouts;
    position: relative;
    word-wrap: anywhere;
    text-align: center;
}

.next-workouts a {
    border: .1em solid black;
    margin: var(--quarterMargins);
}

.add-exercise {
    grid-area: add-exercise;
    position: relative;
}

.edit-prescribed-exercises {
    grid-area: edit-prescribed-exercises;
    position: relative;
}

form.grid-layout {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-areas: 
        "workoutHeader workoutHeader"
        "prescribedExercises updateButtons";
}

table.tab {
    width: 66%;
    margin-bottom: var(--halfMargins);
}

table.tab td, table.tab th {
    height: 1.5em;
    padding: var(--quarterPadding);
    text-align: center;
}

.workoutHeader {
    float: left;
    text-align: center;
    grid-area: workoutHeader;
    position: relative;
    font-size: 1.25em;
    padding: var(--quarterPadding);
}

.workoutHeader th, .workoutHeader td {
    padding: var(--quarterPadding);
}

section {
    margin: var(--quarterMargins);
}

table.editPrecribedExercises {
    text-align: center;
}

table.editPrecribedExercises th, table.editPrecribedExercises td {
    padding: var(--quarterPadding);
    font-weight: bold;
    word-wrap: break-word;
    width: 15em;
    height: 3em;
}

table.editPrecribedExercises input {
    width: 66%;
}

tr:nth-child(even) {
    background-color: maroon;
    color: white;
}

tr:nth-child(odd) {
    background-color: var(--darkGrey);;
    color: white;
}

tr:first-child {
    background-color: var(--blackish);
    color: white;
}

.prescribedExercises {
    grid-area: prescribedExercises;
}

.updateButtons {
    grid-area: updateButtons;
    margin: auto 0% auto 0%;
    text-align: center;
    
}

.updateButtons input {
    width: 66%;
    /*! margin: var(--margins) 0% var(--margins) 0%; */
    white-space: normal;
    font-size: 1em;
}

fieldset {
    margin: 3% 0% 3% 0%;
}

section h2 {
    color: black;
}

input[type="submit"] {
    color: white;
    padding: .5em 1em .5em 1em;
    background-color: var(--kiloRed);
    box-shadow: .1em .1em black;
}

input[type="submit"]:hover {
    background-color: lightgrey;
    border: .1em solid var(--kiloRed);
    color: black;
}