:root {
  --primary: #9b4dca;
  --secondary: #606c76;
}

.header {
  background: #f4f5f6;
  padding-top: 25px;
  margin-bottom: 40px;
}

.logo {
  font-weight: bold;
  font-size: 2.7rem;
}

.mainnav {
  display: flex;
  justify-content: flex-end;
}

.mainnav-link {
  margin: 0 10px;
  line-height: 4.7rem;
  color: var(--secondary);
  border-bottom: 3px solid transparent;
}

.mainnav-link:hover {
  color: var(--primary);
}

.mainnav-link.mainnav-link--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.mainnav-number {
  background-color: var(--primary);
  color: #f4f5f6;
  padding: 0 5px;
  border-radius: 50%;
}

main .fav-btn {
  padding: 0;
  margin-bottom: -45px;
}

.fav {
  width: 100%;
  height: 100%;
}

.first-col {
  width: 5%;
}