/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin:0px
}

main {
  margin-left:8px;
  margin-right:8px;
}

.character-container {
  max-width:1200px;
  margin: 0 auto
}

.navbar ul {
  list-style-type:none ;
  background-color: #10b3e0;
  padding: 0px;
  margin: 0px auto;
  overflow: hidden;
}

.navbar a {
  color:white;
  text-decoration:none;
  padding:15px 0px;
  margin: 0px;
  width:100%;
  display:block;
  text-align: center;
  overflow: hidden;
}

.navbar li {
    width:33.33%;
}

.navbar a:hover {
  background-color: #2dc1eb;
}

.navbar li {
  float: left;
}

/* characters table*/
.characters_table{
  table-layout:fixed;
  margin:50px;
  text-align: center;
  overflow: hidden;
}

.characters_table ul li{
  list-style:none;
}

.characters_table ul {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin:0 20px;
    padding:0;
    display: inline-block;
    max-width: 700px;
}

.characters_table li {
  width:200px;
  display:inline-block;
  padding: 10px 10px;
}

.characters_table img{
  width:100%;
}

.characters_table td{
  cursor: pointer;
}

.characters_table a{
  text-decoration:none;
  color:black;
}

.character_selection {
  height:280px;
}

.character_selection_text {
  font-size:15px;
  height:50px;
  overflow:hidden;
}




.episode{
  display: flex;
  padding-right:50px;
  padding-left:50px;
}

.episode img{
  width:100%;
  float:left;
}

.episode_text h3{
  font-size:25px
}

.episode_text{
  margin-top:-25px;
  margin-left:15px;
  float: left;
  width:75%;
  
}

.episode_thumbnail{
  float: left;
  width:25%;
  height:100%;
}

/* latest_episode*/
.latest_episode{
  display: flex;
  margin-right:50px;
  margin-left:50px;
  padding-top:10px;
}

.latest_episode_thumbnail{
  float: left;
  width:40%;
}

.latest_episode img{
  width:100%;
}

.latest_episode_text{
  width:60%;
  padding-left:30px;
  float:left;
}

.latest_episode_text h3{
  font-size:40px;
  margin-top:-3px;
  margin-bottom:0px;
}

.latest_episode_text p{
  font-size:20px;
}

.latest_episode_uploadDate{
  font-size:10px;
  color:grey;
  margin-top:5px
}

.latest_episode h2{
  text-align:center
}

.flex{
  display: flex;
  flex-wrap: wrap;
  margin: 50px auto;
  max-width:1200px;
  box-sizing: border-box;
}

.character_img{
    float:left;
    width: 500px;
    text-align:center
}

.character_img img{
    width: 400px;
}

.character_text{
  max-width: 600px;
  font-size:20px;
  float: none;
  flex: 1;
}

.character_text h1{
  font-size:50px
}

.character_text h2{
  font-size:30px
}