:root {
  --green: #7db10e;
  --red: #f0002f;
  --yellow: #ffc107;
  --blue: #2086f5;
  --black: #070606;
  --gray: #d6d6d6;
}

body {
  background-color: #0e0e0e;
  color: #a79344;
  color: var(--yellow);
}

.navbar {
  background-color: var(--black);
}

.navbar-light{
  background-color: var(--yellow);
}

.navTitle {
  color: #ffc107;
  font-weight: 600;
  font-size: 1.9rem;
}

.navTitle:hover {
  color: #dc965a;
  color: #ffc107;
  /* color: #F0002F; */
}

.searchbutton {
  color: #ffc107;
  border: 2px solid #ffc107;
  font-weight: 700;
}

.searchbutton:hover {
  color: var(--black);
  background-color: #ffc107;
  border: 2px solid #ffc107;
}

.inputnote {
  /* background-color: var(--gray); */
  background: transparent;
}

.addnotebtn {
  border: 2px solid #ffc107;
  border-radius: 15px;
  font-weight: 700;
  color: #ffc107;
}

.addnotebtn:hover {
  background-color: #ffc107;
  color: #0e0e0e;
}

.category {
  background: transparent;
}

.category input[type="radio"]:checked + label {
  border: 3px solid white;
}

.category label {
  border-radius: 20px;
  padding: 5px 15px;
  margin: 0 20px;
}

.card {
  border-radius: 25px;
}

footer{
  text-align: center;
  padding: 1rem 0;
  overflow: hidden;
  width: 100vw;
}

.footer-logo{
  margin-bottom: 2rem;
  width: 150px;   
}

.footer-socials{
  margin-right: -1rem;
}

.footer-socials img{
  width: 30px;
  height: 30px;
  filter: invert(1);
  margin-bottom: 2rem;
  margin-right: 1rem;
}

.tagline{
  font-size: 1.6rem;
  color: var(--turnary);
}