/* ============================================================
   BLUE THEME --> Default
   ============================================================ */
body.blue {
  /*PAGE*/
  --bg-main:  #227bd3bd;
  --text-main: #000000;

  /*NAVBAR*/
  --bg-nav: rgba(255, 255, 255, 0.8);
  --shadows-nav: 0 2px 8px rgba(0, 0, 0, 0.08);
  --text-nav: #000000;
  /*NAVBAR - BUTTON*/
  --bg-btn-nav:rgba(255,255,255,0.8);
  --bg-btn-nav-hover:#185a9d;
  --text-btn-nav: #000000;
  --text-btn-nav-hover: #ffffff;
  --shadows-btn-nav: 0 2px 6px rgba(0,0,0,0.3);
  --shadows-btn-nav-hover:0 2px 6px rgba(0,0,0,0.3);
  /*DROPDOWN - BUTTON*/
  --bg-dropdown:rgba(255, 255, 255, 0.90);
  --bg-dropdown-hover:#87abf1;
  /*MODALES*/
  --bg-modal:rgba(255,255,255,1);
  --bg-modal-backdrop:rgba(255,255,255,0.2);

  /*FOOTER*/
  --text-footer-col:#ffffff;
  --text-footer-col-hover:#a8a8a8;
  --text-footer-shadows: 0 0 4px rgba(0,0,0,0.7);

}



/* ============================================================
    LIGHT THEME
   ============================================================ */
body.light {
  /*PAGE*/
  --bg-main:  #ffffffbd;
  --text-main: #000000;

  /*NAVBAR*/
  --bg-nav: rgba(218, 218, 218, 0.534);
  --shadows-nav: 0 2px 8px rgba(0, 0, 0, 0.08);
  --text-nav: #000000;
  /*NAVBAR - BUTTON*/
  --bg-btn-nav:rgba(255,255,255,0.8);
  --bg-btn-nav-hover:#8b8b8b;
  --text-btn-nav: #000000;
  --text-btn-nav-hover: #ffffff;
  --shadows-btn-nav: 0 2px 6px rgba(0,0,0,0.3);
  --shadows-btn-nav-hover:0 2px 6px rgba(0,0,0,0.3);

  /*MODALES*/
  --bg-card:rgba(255,255,255,0.8);

  /*FOOTER*/
  --text-footer-col:#000000;
  --text-footer-col-hover:#3d3d3d;
  --text-footer-shadows: 0 0 4px rgba(0, 0, 0, 0.253);

}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
}