@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
  @apply px-4 py-2 bg-blue-600
    text-white rounded;
}

.nav-item {
  border: none;
  padding: 0;
}
.navbar {
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  margin-left: 0.5rem;
  margin-top: 0;
}
summary::marker,
details[open] summary::-webkit-details-marker,
summary::-webkit-details-marker{
  color: rgba(112, 162, 46, 0);
}

@media screen and (max-width: 780px) {
  .open {
    transform: translateX(0px);
  }
  .closed {
    transform: translateX(200px);
  }
  #navbar {
    display:none;
    flex-direction: column;
    margin-top: 3.2rem;
    margin-left: 0;
    right: 0;
    position: absolute;
    z-index: 100;
    transition: all 800ms cubic-bezier(0.8, 0, 0.22, 0.5);
    background-color: white;
    text-align: left;
  }
  .nav-item{
    border-bottom: 1px solid rgb(229 231 235);
    border-top: 1px solid rgb(229 231 235);
    /* padding-bottom: 3px; */
    padding: 0.5rem 0.5rem 0.8rem 0.8rem;
  }
}