/** @format */

:root {
  height: 100%;
  background-repeat: no-repeat;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  color: var(--color-base-content);
  transition: all 300ms;
}

.border {
  outline: 1px solid black;
}

.list-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  width: 100%;
  max-width: 1200px;
  border-radius: var(--radius-box);
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 16px var(--color-base-300);
  padding: 1rem;
  gap: 1rem;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-header {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  align-self: center;
  background-color: transparent;
}

.list-item {
  display: flex;
  align-items: center;
}

.list-item::before {
  content: "✨";
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-accent);
  padding: 0 1rem;
}

.list-item-input {
  width: 100%;
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius-field);
  transition: 100ms ease-in-out;
}
.list-item-input:hover {
  background-color: rgba(255, 255, 255, 0.25);
  cursor: text;
}
.list-item-input:focus {
  background-color: rgba(255, 255, 255, 0.15);
  outline: 2px solid var(--color-accent);
}

body {
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  grid-template-areas: "sidebar main";
  width: 100%;
  height: 100%;
  transition: 300ms ease-in-out;
  background-image: linear-gradient(
    to bottom right,
    #9e6cdf9c,
    #e7aa64bb /* #f45b237e, */ /* #f3de8a7e */
  );
}

main {
  width: 100%;
  padding: 4rem 2rem;
  grid-area: main;
}

aside {
  grid-area: sidebar;
  width: 18.75rem;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  gap: 1rem;
  background-color: #dbdae170;
  transition: 300ms ease-out;
  box-shadow: inset -4px 0 12px #f9f8f825;
}

@media screen and (max-width: 600px) {
  aside {
    opacity: 0;
    /* visibility: hidden; */
    width: 0px;
  }

  body {
    grid-template-columns: 0px 1fr;
  }
}

.sidebar-head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-inline: 0.5rem;
}

.sidebar-list {
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-title {
  font-size: 1.5rem;
}
.title {
  font-size: 1.5rem;
}

.list-button {
  width: 100%;
  height: 3rem;
  text-align: left;
  padding: 0.5rem;
  border-radius: var(--radius-field);
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}

.list-input {
  border: none;
  border-radius: var(--radius-field);
  background-color: var(--color-base-200);
  padding: 0.5rem;
  margin: 0 2.5rem;
}