:root {
    --bg-botao-toggle-ordenacao-cards-desabilitado: #1d1d1d;
    --bg-botao-toggle-ordenacao-cards-habilitado: #04abd7;
    --border-color-botao-toggle-ordenacao-cards: black;
    --text-color-botao-toggle-ordenacao-cards: black;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

.bg-botao-toggle-ordenacao-cards-desabilitado {
    background-color: var(--bg-botao-toggle-ordenacao-cards-desabilitado);
}

.bg-botao-toggle-ordenacao-cards-habilitado {
    background-color: var(--bg-botao-toggle-ordenacao-cards-habilitado);
}

.border-color-botao-toggle-ordenacao-cards {
    border-color: var(--border-color-botao-toggle-ordenacao-cards);
}

.text-color-botao-toggle-ordenacao-cards {
    color: var(--text-color-botao-toggle-ordenacao-cards);
}

.bg-botao-toggle-ordenacao-cards:not(.text-color-botao-toggle-ordenacao-cards) {
    color: white;
}

.materia {
	border-bottom: 1px solid #00000047;
	background-color: #d3d3d35c;	
  border-radius: 10px;
	padding: 7px 14px;
  margin-top: 100px;
  margin-right: 10px;
}

.materia.primeira {
  margin-top: 20px;
}

.links-materia {
	display: flex;
	flex-wrap: wrap;
}

.links-quimica {
    margin-bottom: 80px;
}

.assunto {
	margin: 15px 10px 10px 10px;
}

.assunto:hover {
	transform: translateY(-6px);
}

/* The container <div> - needed to position the dropdown content */
.lista-ferramentas {
  position: relative;
  display: inline-block;
}

.custom-popover {
  border-color: #de00c0 !important;
  background-color: #f4f4f4 !important;
}

/* Dropdown Content (Hidden by Default) */
.ferramentas {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.ferramentas a {
  color: black;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 16px;
	padding-bottom: 10px;
	padding-top: 6px;
  display: block;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


@media (min-width: 992px) {
  .materia.primeira:first-child {
    margin-top: 100px;
  }
}