html,body
{
  height: 100%;
  margin: 0;
  text-align: center;
  font-family: 'Arima', cursive;
}

.nav-bar
{
  height: 20%;
  width: 100%;
  background-color: #916BBF;
}

.title h1
{
  color: black;
  margin: 0 auto;
}

.flex-buttons
{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.drop-down
{
  height: 35px;
  border: 1px solid black;
  background-color: #916BBF;
}

.round
{
  height: 60px;
  width: 60px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid black;
  transition-duration: .5s;
}

.round:hover
{
  box-shadow: 3px 2px 5px black;
}

.flex-row
{
  display: flex;
  flex-direction: row;
  align-items:center;
  width: 100%;
  height: 100%;
}

.cell
{
  height: 26px;
  width: 100%;
  border: .5px solid #112B3C;
}

.cell:hover
{
  background-color: #C4D7E0;
}

.SD
{
  background-color: #C4D7E0;
}
.blockingAnimation
{
  animation-name: keyFrameBlock;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
@keyframes keyFrameBlock
{
  from
  {
    transform: scale(.3);
    background-color: #06283D;
    border-radius: 100%;
  }
  to
  {
    transform: scale(1);
    background-color: #06283D;
  }
}


.bfsAnimation
{
  animation-name: keyFrameBFS;
  animation-duration: .9s;
  animation-fill-mode: forwards;
  animation-timing-function:linear;
}
@keyframes keyFrameBFS
{
  0%
  {
    background-color: rgba(0,110,255,.75);
    border-radius: 100%;
    transform: scale(0);
  }
  25%
  {
    background-color: rgba(0,110,255);
    border-radius: 100%;
    transform: scale(0.5);
  }
  50%
  {
    background-color: rgba(0,110,255);
    border-radius: 50%;
    transform: scale(1);
  }
  75%
  {
    background-color: rgba(25,217,0);
    border-radius: 20%;
    transform: scale(1.3);
    opacity: .5;
  }
  100%
  {
    background-color: rgba(0,218,160);
    transform: scale(1);
  }
}

.shortestPath
{
  animation-name: keyFrameBacktracking;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes keyFrameBacktracking {
  from
  {
    background-color: red;
  }
  to
  {
    background-color: orange;
  }
}