:root {
  
    /* small screen font-sizes */
    --fs-200: 0.75rem;
    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.375rem;
    --fs-600: 1.75rem;
    --fs-900: 2.125rem;
  
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-700: 700;
  
    --clr-neutral-100: #fff;
    --clr-neutral-200: #eef1f6;
    --clr-neutral-300: #a9afbc;
    --clr-neutral-400: #737b8c;
    --clr-neutral-500: #434956;
    --clr-neutral-900: #020203;
  
    --clr-primary-300: #f3f7ff;
    --clr-primary-400: #8ea8da;
  
    --br: 1rem;
  
    --lh-heading: 1rem;
    --lh-text: 1.5rem;
  }

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-heading);
}

* {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout */

body {
  line-height: var(--lh-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

nav.nav-muscle-groups ul {
  background-color: var(--clr-neutral-400);
}

nav.nav-equipment-list ul {
  background-color: var(--clr-neutral-300);
}

nav.nav-repranges ul {
  background-color: var(--clr-neutral-200);
}

nav ul li {
  margin: 0 1em;
  padding: 1em;
  cursor: pointer;
}

.nav-muscle-groups ul li {
  color: rgb(234, 234, 234);
  text-transform: uppercase;
}

li.selected {background-color: rgb(63, 63, 63);}

.nav-equipment-list ul li {
  color: rgb(242, 242, 242);
  text-transform: capitalize;
}

.nav-repranges ul li {
  color: rgb(60, 60, 60);
}

nav ul li:hover {
    text-decoration: underline;
    font-weight: var(--fw-400);
}

#wrapper {
  padding: 20px;
  display: flex;
}

.exercise-selector, .selected-exercises {
  padding: 32px;
}

.exercise-selector {
  flex: 2;
}
.selected-exercises {
  flex: 1;
}

h2, h3, h4 {margin: 8px;}

#exercise_list {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

#exercise_list > div {
  padding: 16px;
  background-color: rgb(76, 103, 139);
  color: rgb(234, 234, 234);
  margin: 8px;
  cursor: pointer;
}

.workout-list > li {
  padding: 16px;
  background-color: rgb(76, 103, 139);
  color:rgb(234, 234, 234);
  margin: 8px;
}

.warmup, .activation, .main, .cooldown, .stretch, .finnisher {padding: 16px;}
.warmup { background-color: #B0D1D9;}
.activation {background-color: #7AB8BF;}
.main {background-color: #5EBFAD;}
.cooldown {background-color: #7AB8BF;}
.stretch {background-color: #B0D1D9;}
.finnisher {background-color: #4E84A6;}


.selected-exercises li:hover:after {
  content: " (x)";
  color: #F04914;
  font-weight: bolder;
}

.selected_ex_wrapper {
  border-left: 5px solid whitesmoke;
}

.selected_movement {
  border: 1px solid red;
}

.ex-wrapper ol {
  margin-left: 3em;
}