:root {
  --background-color-light: #ffffff;
  --text-color-light: #000000;
  --background-color-dark: #121212;
  --text-color-dark: #ffffff;
}

body {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
  font-family: 'Inter', sans-serif;
}

.main-content {
  background-image: url("../images/ufma/Group.png");
  background-repeat: no-repeat;
  background-color: #F5F7FA;
  background-position: top -200px right;
  margin-top: 105px
}

.dark-mode {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);

  #page-topbar,
  .uv-section,
  .uv-course-section,
  .uv-title,
  .uv-info-section,
  .uv-partners-section,
  .container,
  .footer,
  .main-content,
  .uv-card,
  .uv-card-horizontal,
  .uv-course-content-info>span,
  .accordion-item,
  .accordion-header,
  .accordion-button,
  .accordion-button::before,
  .uv-card-accordion-rounded,
  .staticpage-title {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
  }

  .uv-button {
    background-color: var(--background-color-light);
    color: var(--text-color-light);
  }

  .uv-card,
  .uv-card-horizontal,
  .uv-course-info,
  .accordion-button::before,
  .uv-card-accordion-rounded {
    border: 1px solid white;
  }

  a {
    text-decoration: underline;
    color: #FFFF00;
  }

  a:hover,
  h3,
  h5,
  h6,
  p,
  i {
    color: var(--text-color-dark);
  }

  .uv-course-info-buton:hover {
    color: #000;
  }

  a:focus,
  button:focus {
    outline: 2px solid #FFF333 !important;
  }
}