:root{
     --color-accent-tools: #a9714b;
    --color-accent-tools-medium: #cca27c;
    --color-accent-tools-light: #dfc3a3;
 }
/*nav*/
nav{
  background-color: var(--color-accent-tools-light);
  width: 95%;
  margin: .5em auto;
  border-radius: 6px;
  border: 2px solid var(--color-accent-tools-medium);
}
nav ul {
  display: flex;
  gap: 1rem;          /* replaces margin hacks */
  padding: .75em .25em;
  margin: 0;
  list-style: none;
  align-items: center;
}
nav a{
  text-decoration: none;
  color: var(--color-main-dark);
  font-weight: 400;
  padding: .25em .5em
}
nav a:hover{
  text-decoration: underline;
}

/* form elements */
input[type=text], input[type=password], input[type=number]{
  border-radius: 3px;
  border:solid 2px var(--color-main);
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus{
  border: solid 2px var(--color-accent-tools);
  outline: none;
}
input[type=radio], input[type=checkbox]{
  accent-color: var(--color-main);
}
input[type=radio]:checked, input[type=checkbox]:checked{
  accent-color: var(--color-accent-tools);
  outline: none;
}
input[type=submit]{
  background-color: var(--color-accent-tools-light);
  border: 2px solid var(--color-accent-tools-medium);
  padding: .5em .75em;
  border-radius: 6px;
}
input[type=submit]:hover{
  background-color: var(--color-accent-tools);
}