.question {
  text-align: center;
  font-size: 36pt!important;
  padding-left:17%;
  padding-right:10%;
  padding-top: 40px;
  background-color:#0066cc;
  background-image: url("../images/question.png");
  background-position: 5% 90%;
  background-size: 150px;
  color: white;
}

.info {
  margin: auto;
  padding: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  text-align: center;
  background-color: #abdff7;
  color: #0081c7;
  border: double 5px #0081c7;
}

.color-box {
  position: absolute;
  bottom:10%;
  left: 0;
  right: 0;
  margin: auto;
  width:70%;
  text-align:center;
  color: #0081c7;
  border-radius: 5px;
  border: double 5px #0081c7;
  background-color: #abdff7;
  padding: 20px;
}

.challenge {
  text-align: left;
  padding-left:20%;
  padding-top: 40px;
  font-size: 40pt!important;
  background-color:#ffa500;
  background-image: url("../images/coding.png");
  background-position: 5% 90%;
  background-size: 150px;
  color: white;
}

.output {
  border: solid 3px black;
  background-color:white;
  padding-top: 0.5em;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}

.output:before {
  position: absolute;
  content: "output";
  padding: 5px;
  margin-top: -1.5em;
  margin-left: 0.5em;
  background-color: #003366;
  font-size: 12pt;
  color: white;
}

.text {
  border: solid 3px black;
  background-color:white;
  padding-top: 0.5em;
  margin-top: 10px;
}

.text:before {
  position: absolute;
  content: "text";
  padding: 5px;
  margin-top: -1.5em;
  margin-left: 0.5em;
  background-color: #003366;
  font-size: 12pt;
  color: white;
}



.info-box {
  position: relative;
  border: solid 3px black;
  background-color:white;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 18pt;
  border-radius: 7px;
}

.info-box:before {
  position: absolute;
  content: url("../images/info-circle.png");
  top: 0;
  left: 0;
  border-radius:20px;
  margin-left: -10px;
  margin-top: -10px;
  font-size: 12pt;
  background-color: #f2f2f2;
}

.code-box {
  position: relative;
  border: solid 3px black;
  background-color:white;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 18pt;
  border-radius: 7px;
}

.code-box:before {
  position: absolute;
  content: url("../images/code.png");
  top: 0;
  left: 0;
  margin-left: -10px;
  margin-top: -10px;
  border-radius:20px;
  font-size: 12pt;
  background-color: inherit;
}



.html-box {
  border: solid 3px black;
  background-color:white;
  padding-top: 0.5em;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}

.html-box:before {
  position: absolute;
  content: "html";
  padding: 5px;
  margin-top: -1.5em;
  margin-left: 0.5em;
  background-color: #003300;
  font-size: 12pt;
  color: white;
}


.css-box {
  border: solid 3px black;
  background-color:white;
  padding-top: 0.5em;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}

.css-box:before {
  position: absolute;
  content: "css";
  padding: 5px;
  margin-top: -1.5em;
  margin-left: 0.5em;
  background-color: #003300;
  font-size: 12pt;
  color: white;
}


.model-box {
  border: solid 3px black;
  background-color:white;
  /*padding-top: 0.5em;*/
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-right:5px;
}

.model-box:before {
  position: absolute;
  content: "planned analysis";
  padding: 5px;
  margin-top: -0.5em;
  margin-left: 0.5em;
  background-color: #250033;
  font-size: 12pt;
  color: white;
}


.plot-box {
  border: solid 3px black;
  background-color:white;
  /*padding-top: 0.5em;*/
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-right:5px;
}

.plot-box:before {
  position: absolute;
  content: "design sketch";
  padding: 5px;
  margin-top: -0.5em;
  margin-left: 0.5em;
  background-color: #250033;
  font-size: 12pt;
  color: white;
}