*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  font-family: Montersat;
  font-size: 14px;
  font-weight:400;
  line-height: 1.6;  
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  background: #fff;
  color: black;
}

a { text-decoration: none; }

#navigation {
  font-family: "Open Sans", Arial, sans-serif;
  background: #173161; 
  height: 60px;
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
  box-shadow: 0px 2px 5px #959595;
}

/* override bootstrap 4 */
#navigation a {
  color: white;
}
#navigation a.dropdown-item {
  color: black;
}

/* override bootstrap 4 */
.navbar {
  padding: 0;
}
/* override bootstrap 4 */
.navbar-expand-md .navbar-nav .nav-link  {
  display: block;
  font-size: 18px;
  line-height: 1.0;
  padding: 21px 16px;
}

.navbar-nav a {
  display: block;
  color: white;
}
.navbar-nav > a:hover {
  display: block;
  background: linear-gradient(to bottom, #173161, #1883b5, #00a7cb, #00cad0, #3eebc5);
  color: #011; 
}

#navbar-mobile > .navbar-nav {
  display:none;
}
@media (max-width: 768px) {
  #navigation {
    height: 60px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
  }
  /* override bootstrap 4 */
  #navigation .navbar-collapse a {
    color: black;
    background: #fff; 
    border: 1px solid #eee;
    
  }
  #navigation .navbar-mobile a   {
    color: white;
    background:blue;
  }
  
  .navbar {
    justify-content: flex-start;
  } 
  #navbar-mobile > .navbar-nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  
  #navbar-mobile .navbar-toggler {
    color: rgba(255,255,255,1);
    border-color: rgba(255,255,255,.5);
  }
  #navbar-mobile > .navbar-nav {
    justify-content: center;
    align-content: center;
  }
  .navbar-dark .navbar-nav .active >.navlink {
    display: block;
    color: #173161;
  }
  .navbar-nav > a:hover {
    display: block;
    background: linear-gradient(to bottom, #173161, #1883b5, #00a7cb, #00cad0, #3eebc5);
    color: #011; 
  }
}
/* override bootstrap 4 */
.dropdown-menu {
  margin: 0;
  padding: 0;
  box-shadow: 0px 2px 5px #959595;
}


#myCanvas {
background-color: grey;
border:1px solid #d3d3d3;
}

// SCSS
#dropZone,
#animals {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 200px;
  margin-bottom: 20px;
}
#dropBox1,
#dropBox2,
#dropBox3,
#dropBox4 {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 250px;
  width: 250px;
  border: 1px solid #aaaaaa;
  padding: 1rem;
}
img {
  height: 200px;
  object-fit: cover;
  width: 200px;
}