.light-text { color: #2c373a }
.dark-text { color: #dedfe3 }
.light-mode { background-color: #f9f7f1 }
.dark-mode { background-color: #1f222b }

/*------ navbar ------*/
.light-mode nav { background-color: #3F51B5 }
.dark-mode nav { background-color: #3849a0 }
.light-mode .modal-box { background: #f9f7f1; color: #2c373a }
.dark-mode .modal-box { background: #3d4051; color: #dedfe3 }

/*------ footer ------*/
.light-mode .footer { background-color: #54576f }
.dark-mode .footer { background-color: #12131c }

/*------ top notes ------*/
.light-mode .topnotes { background-color: #f9edbe; }
.dark-mode .topnotes { background-color: #d7cb9a }

/*------ test card ------*/
.light-mode .card {
  background: radial-gradient(ellipse at center, #BDCAD1 0%, #B5C4CC 100%);
}
.dark-mode .card {
  background: radial-gradient(ellipse at center, #343951 0%, #2f3349 100%);
}