body {
  font: 14px "Roboto", Helvetica, Arial, sans-serif;
  background-color: rgb(84, 121, 128);
  height: 100vh;
  width: 100vw;
  margin: 0;
}

a {
  color: rgb(21, 54, 68);
}

p.lead {
  font-size: 1rem;
}

div.container-fluid {
  background-color: rgb(84, 121, 128);
  display: grid;
  grid-template-rows: 1fr 8fr;
  height: 100vh;
  width: 100%;
  position: relative;
}

ul > li > a,
ul > li {
  text-decoration: none;
  list-style: none;
  padding: .25rem;
  font-size: 1.5rem;
}

ul > li > a:hover {
  color: white;
}

.episode-list {
  margin: auto;
  width: content;
}
div.header {
  margin-bottom: 1.25rem;

}


div.videoPlayer {
text-align: center; 
}

div.row {
  background-color: white;
  border-radius: .5rem;
  width: 85vw;
  margin: auto;
  padding: 1rem;
  grid-area: 1 / 1 / 3 / 2;
  height: 100%;
  display: block;
}

.sidebar-nav {
  width: 12vw;
  padding: 1rem;
  background-color: #6fb5d0;
  float: left;
  margin-bottom: -1rem;
}


.sidebar-nav li {
  list-style: none;
  padding: .25rem;
  margin: 0;
}

.container-fluid {
  padding: 2rem;
}

input,
textarea,
select {
  box-shadow: 2px 2px 6px rgba(0,0,0,.25);
}

label {
  padding: .10rem;
}

h1 {
  background-color: rgba(102, 51, 153, 0.752);
  padding: .25rem;
  position: sticky;
  top: 0;
  margin: auto;
}

div.col-sm-10 {
  height: 100%;
  position: static;
  overflow: auto;
}

.media-form {
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  width: fit-content;
  border: 1px solid;
  border-radius: 5px;
  background-color: rebeccapurple;
  box-shadow: 1px 1px 2px 0px rgba(0,0,0,.4);
  margin: auto;
  position: relative;
  top: 100px;
  padding: 1rem;
  align-content: space-between;
}

.media-form > div {
  flex-grow: 1;
  border: none;
  width: 100%;
  margin: .75rem;
}


.media-form > div > label {
  font-weight: 700;
}

.media-form > input[type=submit] {
  color: white;
  background-color: teal;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 5px;
}