body {
  font-family: "helvetica";
  color: #343a40;
}


#introduction {
  width: 820px;
  margin: 0 auto;
  padding: 48px 15px 26px;
  height: 100%;
}

#sub_head {
  color: #555;
  font-weight: lighter;
  font-size: 20pt;
}

#main {
  width: 820px;
  padding: 50px;
  height: 500px;
  margin: 0 auto; 
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.25);

}

#task_overview {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-gap: 60px 10px;
}

#source_target_wrapper {
  display: grid;
  grid-template-columns: 400px 200px;
  grid-template-rows: 300px;
  grid-gap: 50px 0px;
}

#footer {
  display: grid;
  grid-template-columns: 165px 800px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #efefef;
}

#footer a, #footer a:visited {
  color: #4a90e2;
  underline: none;
}

#footer_text {
  padding-top: 25px;
  font-size: 10pt;
}

#footer img {
  width: 130px;
  margin: 15px;
}



#task_overview div {
  width: 200px;
  height: 200px;
  background-color: #4a90e2;
  color: white;
  font-weight: bold;
  font-size: 14pt;
  text-align: center;
  vertical-align: middle;
  line-height: 200px;
  box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.25);
  border-radius: 3px;
  border: 1px solid transparent;
}

.button {
  width: 150px;
  height: 50px;
  background-color: #4a90e2;
  color: white;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.25);
  border-radius: 3px; 
  margin: 5px;
  border: 1px solid transparent;
}

.button:hover, #task_overview div:hover {
  background-color: white;
  border: 1px solid #4a90e2;
  color: #4a90e2;
  cursor: pointer;
}

#task_container, #task_results {
  display: none;
}

#task_instructions {
 color: #4a90e2;
 font-weight: lighter;
}

#task_source_wrapper {
  font-size: 15pt;
  width: 380px;
  height: 300px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background-color: white;
  text-align: center;
}

#task_source {
  margin: 60px 10px;
  height: 200px;
}

#counter {
  width: 820px;
  text-align: right;
  font-weight: bold;
}

#task_target {
  width: 200px;
  padding: 40px 130px;
  color: #4a90e2;
}

#reset {
  color: #4a90e2;
  cursor: pointer;
}