.dropdown_list {
  margin-left: -35px;
}
/* Home ---------------------------*/
.blue_text_bounding_box {
  text-align: left;
  cursor: default;
}
.dropdown_item_blue {
  text-align: left;
  margin-left: 45px;
  margin-top: -17px;
  font-size: 0px;
  cursor: default;
  transition: 
    font-size 0.25s ease, 
    height 0.25s ease;
}
.dropdown_item_blue.active {
  font-size: 1.7rem;
  height: 100%
}


.blue_checkbox {
  width: 25px;
  height: 0px;
  background: #474aff;
  border: 0px solid #474aff00;
  position: absolute;
  top:0;
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 5px;
  transition: 
    scale(1.1), 
    height 0.25s ease, 
    border 0.25s ease;
  cursor: default;
}
.blue_checkbox.active {
  height: 25px;
  border: 2px solid #474aff;
}


/* Learned from geeksforgeeks.org - borders act as lines of check mark because there is no background*/
.blue_tick_icon {
  height: 0px;
  width: 0px;
  margin-left: 4.5px;
  margin-top: 0.5px;
  border-bottom: 0px solid #ffffff00;
  border-right: 0px solid #ffffff00;
  transform: rotate(45deg) translateY(-2px);
  top: 0;
  position: absolute;
  transition: 
    height 0.35s ease,
    width 0.35s ease,
    border-bottom 0.35s ease,
    border-right 0.35s ease;
}
.blue_tick_icon.active {
  height: 17px;
  width: 7px;
  border-bottom: 6px solid #ffffff;
  border-right: 6px solid #ffffff;
}

/* Chemistry ---------------------------*/
.purple_text_bounding_box {
  position: absolute;
  top: 0;
  height: 0px;
  width: 538px;
  margin-left: 1px;
  margin-top: 35px;
  background: #ff000000;
  transform: scale(0);
  cursor:pointer;
  transition: 
    transform 0.25s ease, 
    height 0.35s ease;
  transform-origin: left;
}
.purple_text_bounding_box.active {
  height: 55px;
  transform: scale(1);
}
.purple_text_bounding_box:hover {
  transform: scale(1.1);
}


.dropdown_item_purple {
  text-align: left;
  margin-left: 45px;
  margin-top: -1px;
  font-size: 0px;
  transition: 
    font-size 0.25s ease, 
    height 0.25s ease,
    transform 0.25s ease;
  transform-origin: left;
}
.dropdown_item_purple.active {
  font-size: 1.7rem;
  height: 100%
}
.purple_text_bounding_box:hover .dropdown_item_purple {
  transform: scale(1);
}


.purple_checkbox {
  width: 25px;
  height: 25px;
  background-color: #474aff00;
  border: 0px solid #7145f500;
  position: absolute;
  top:0;
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 5px;
  transition: 
    transform 0.2s ease, 
    background-color 0.25s ease-in, 
    height 0.35s ease;
}
.purple_checkbox.active {
  border: 2px solid #7045f5;
}
.purple_text_bounding_box:hover .purple_checkbox {
  background-color: #7145f5;
  transform: scale(1);
}


.purple_tick_icon {
  height: 17px;
  width: 7px;
  margin-left: 4.5px;
  margin-top: 0px;
  border-bottom: 6px solid #ffffff00;
  border-right: 6px solid #ffffff00;
  transform: rotate(45deg) translateY(-2px);
  top: 0;
  position: absolute;
  transition: 
    border 0.05s ease-in, 
    height 0.35s ease;
}
.purple_text_bounding_box:hover .purple_tick_icon {
  border-bottom: 6px solid #ffffff;
  border-right: 6px solid #ffffff;
}