:root {
  --light-grey: #f5f6f7;
  --dark-grey: #0a0a23;
  --yellow: #f1be32;
  --golden-yellow: #feac32;
}

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

body {
  background-color: var(--dark-grey);
  min-height: 100vh;
}

main {
  display: flex;
  justify-content: center;
  padding: 20px;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  margin-top: 60px;
  border: 2px solid var(--golden-yellow);
  border-radius: 10px;
  padding: 10px 20px;
}

h1,
h2 {
  margin-top: 20px;
  text-align: center;
  color: var(--light-grey);
}

label {
  color: var(--light-grey);
}

button {
  width: 100px;
  margin: 10px;
  padding: 5px;
  border-width: 3px;
  border-color: var(--golden-yellow);
  cursor: pointer;
  color: var(--dark-grey);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
}

button:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

.hidden {
  display: none;
}

#dropdown,
#buttons,
#form-section form > div,
#bookmark-list-section > div:last-child {
  display: flex;
  justify-content: center;
  padding: 20px;
}

#dropdown,
#form-section form > div {
  align-items: center;
  gap: 10px;
}

#close-form-button {
  border: none;
  cursor: pointer;
  background: none;
}

#category-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  width: 80%;
  margin-top: 15px;
  padding: 20px;
  border-radius: 10px;
  list-style: none;
  text-align: left;
  background-color: var(--light-grey);
}

.bookmark-item,
.empty-state {
  color: var(--dark-grey);
}

.bookmark-item {
  margin-bottom: 10px;
}

.bookmark-item label {
  color: var(--dark-grey);
  margin-left: 8px;
}

.bookmark-item a {
  color: inherit;
}

#name,
#url,
#category-dropdown {
  padding: 4px;
}