@media (min-width: 320px) {
  /* smartphones, iPhone, portrait 480x320 phones */

  #msg-Holder {
    position: fixed;
    top: 2vh;
    width: 70%;
    z-index: 9999;
    text-align: left;
    right: 0;
    left: 0;
    margin: 0 auto;
  }
  #msg-Holder .msg-Error,
  #msg-Holder .msg-Success {
    padding: 1.5rem 2rem;
    margin: 0.5rem 0;
    border-radius: 5px;
  }
  #msg-Holder .msg-Error:before,
  #msg-Holder .msg-Success:before {
    font-weight: bold;
  }
  #msg-Holder .msg-Error:before {
    content: "ERROR: ";
  }
  #msg-Holder .msg-Success:before {
    content: "SUCCESS: ";
  }
  #msg-Holder .msg-Error {
    background-color: var(--error-bg);
  }
  #msg-Holder .msg-Success {
    background-color: var(--success-bg);
  }
}
@media (min-width: 481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}
@media (min-width: 641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}
@media (min-width: 961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
}
@media (min-width: 1025px) {
  /* big landscape tablets, laptops, and desktops */
}
@media (min-width: 1281px) {
  /* hi-res laptops and desktops */
}