/* -----------Blue Tools Note------------- */
.note {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/tools2.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  color: #1f5386;
  background-color: #bed3ec;
  border: solid 5px #dfedff;
  }
  
/* -----------Chatbot Tutor Note------------- */
.tutor {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/tutor.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  color: #114B5F; /* Dark, serious-but-soft teal for text */
  background-color: #E4FDE1; /* Very light, friendly green */
  border: 2px solid #84A98C; /* A gentle, muted green border */
  border-radius: 5px; /* Slightly rounded corners for a modern feel */
  }
  
/* -----------Purple Protip Note------------- */

.protip {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/protip.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  color: #75658c;
  background-color: #dbceefab;
  border: solid 5px #d8c1f7;
  }
  

/* -----------Opal FYI Note------------- */

.fyi {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/fyi.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  color: #326273;
  background-color: #b7ccccab;
  border: dashed 5px #82a7a6;
  }
  
  
  /* -----------Exercises Note------------- */
  
.exercises {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/brain.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  color: #264653;
  background-color: #D3D9D4AB;
  border: solid 3px #264653;
  }
  

  /* -----------Orange Learn More Note------------- */
.learnmore {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/magnifying-glass.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  background-color: #ffcc80;
  border: solid 5px #F28C28;
  }
  

/* -----------Grey Glossary Note------------- */

.glossary {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/glossary.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  min-height: 120px;
  color: #326273;
  background-color: #bdc7bfab;
  border: dashed 5px #869889;
  }  
  
/* -----------Navy Packages Note------------- */

.packages {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/boxes.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  min-height: 120px;
  color: #326273;
  background-color: #fff3e6;
  border: dashed 5px #869889;
  }  
    

/* -----------Peach Functions Note------------- */

.functions {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/function.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  min-height: 120px;
  color: #326273;
  background-color: #e6f7ff;
  border: dashed 5px #869889;
  }  

/* -----------red wanring Functions Note------------- */

.warning {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-image: url("../figs/warning.png");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  min-height: 120px;
  color: #fff;
  background-color: #FF0000;
  border:  5px #FFFF00;
  }     
960018