*{
  padding:0px;margin:0px;
}

body{
  background-color: #363636;;
  color : white;
}
.menu{
  margin-bottom: 20px;
  font-size: 2rem;
  margin-top: 15px;
  margin-left: 15px;

}
a{
  text-decoration: none;
  color: #b74adbdd;
  margin-left: 5rem;

}
a:hover{
  text-decoration: underline;
}

a:nth-child(2n){
  color: #d8aae7dd;
}

html, body{
  height:100%;
  width:100%;
  font-size: 1.15rem;
  font-family: Roboto, "Helvetica Neue";
}

.filter{
  display: flex;
  width: 100%;
}

.filter input{
  flex-grow: 1;
  margin-left: 20px;
  font-size: 1.2rem;

}
canvas{
  padding-bottom: 155px;
}

.timeline{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 60px;
  position: fixed;
  bottom: 15px;
  background-color: #000000d6;
  color: white;
  border-radius: 5rem;
  font-size: 1.5rem;
  left: 15px;
  right:15px;
}

#dateRange{
  width : 100%;
  height: 50px;
}

.content{
  display:flex;
  flex-direction: row;
}

#factions{

  margin-left: 30px;
  font-size: 1.5rem;
  max-height: 999px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: black;
  padding: 15px;
  width: 500px;
}