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

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

form h2 {
  color: black;
}


/* 
    Referenced the following video for help with structuring the HTML and CSS to create tabs 
    https://www.youtube.com/watch?v=oLqdy95LZSw&ab_channel=iEatWebsites
  */

section.tabs {
  display: flex;
  flex-wrap: wrap;
}

section.tabs input[type="radio"].radBlockWeekRadioButton {
  display: none;
}

section.tabs label.radBlockWeekLabel {
  padding: 3%;
  background: white;
  border: .1em solid var(--kiloRed);
  font-weight: bold;
}

section.tabs label.radBlockWeekLabel:hover {
  background-color: lightgrey;
}

section.weekRadioButton p {
  padding: 1%;
  margin-bottom: 1%;
  background: white;
  border: .1em solid var(--kiloRed);
  font-weight: bold;
}

section.tabs fieldset.tabBlockWeek {
  width: 100%;
  order: 1;
  display: none;
}

section.tabs input[type="radio"]:checked.radBlockWeekRadioButton+label.radBlockWeekLabel+.tabBlockWeek {
  display: block;
}

section.tabs input[type="radio"]:checked+label.radBlockWeekLabel {
  background-color: var(--kiloRed);
  color: white;
  border: .1em solid var(--blackish);
}

.formButtons {
  margin-left: var(--margins);
}

input.formButton {
  font-size: 1.15em;
}

.formButton {
  background-color: var(--kiloRed);
  border: .1em solid black;
  color: white;
  padding: .5em;
  font-weight: bold;
  border-radius: 1em;
}

.formButton:hover {
  background-color: lightgrey;
  border: .1em solid var(--kiloRed);
  color: black;
}

table.displayBlockWorkouts,
table.displayBlock {
  text-align: center;
}

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

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;
}

td.button {
  padding: 10%;
  color: white;
}