@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 10;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    --gray0: hsl(0, 0%, 0%);
    --gray1: hsl(0, 0%, 10%);
    --gray2: hsl(0, 0%, 20%);
    --gray3: hsl(0, 0%, 30%);
    --gray4: hsl(0, 0%, 40%);
    --gray5: hsl(0, 0%, 50%);
    --gray6: hsl(0, 0%, 60%);
    --gray7: hsl(0, 0%, 70%);
    --gray8: hsl(0, 0%, 80%);
    --gray9: hsl(0, 0%, 90%);
    --gray10: hsl(0, 0%, 100%);
    --transparent: rgba(0, 0, 0, 0);
    --green1: rgb(47, 219, 47);
    --green2: rgb(31, 151, 31);
    --purple1: rgb(150, 47, 219);
    --purple2: rgb(123, 31, 151);
}

body {
    background-color: var(--gray1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "add count filter" "text text text";
    justify-items: center;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100px;
}

header button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: 3px var(--transparent) solid;
    cursor: pointer;
    transition: 0.7s;
    color: var(--gray5);
    background-color: var(--gray2);
}

header button:hover,
header button:focus {
    background-color: var(--gray3);
    color: var(--gray10);
    border: 3px var(--gray7) solid;
}

header input {
    grid-area: text;
    outline: none;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 20px;
    padding: 0 12px;
    width: 100%;
    color: var(--gray10);
    background-color: var(--gray3);
    border: 3px var(--transparent) solid;
    transition: 0.7s;
}

header input:focus {
    border: 3px var(--gray7) solid;
}

header h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray10);
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 20px;
    background-color: var(--gray2);
    width: 100%;
    height: 100%;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog[open] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: unset;
    max-height: unset;
    border: none;
    height: 100vh;
    width: 100vw;
    background: none;
}

dialog.filter div {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.5fr 1fr;
    grid-template-areas: "close close" "category section";
    height: 170px;
    width: 90%;
    row-gap: 20px;
    column-gap: 10px;
    padding: 20px;
    background-color: var(--gray3);
    border-radius: 20px;
    border: solid 3px var(--gray2);
}

dialog.filter select {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-color: var(--gray4);
    outline: none;
    border: none;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 0 10px;
    color: var(--gray1);
    text-align: center;
}

dialog.filter select.category {
    grid-area: category;
}

dialog.filter select.section {
    grid-area: section;
}

dialog.filter button.close {
    height: 100%;
    aspect-ratio: 1/1;
    grid-area: close;
    justify-self: left;
    border-radius: 100%;
    background-color: var(--gray4);
    outline: none;
    border: none;
    padding: 0 10px;
    color: var(--gray2);
    transition: 0.7s;
    cursor: pointer;
}

dialog.filter button:hover,
dialog.filter button:focus {
    background-color: var(--gray6);
}

dialog.add div {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.5fr 1fr 1fr;
    grid-template-areas: "close close" "name name" "category add";
    height: 230px;
    width: 90%;
    row-gap: 20px;
    column-gap: 10px;
    padding: 20px;
    background-color: var(--gray3);
    border-radius: 20px;
    border: solid 3px var(--gray2);
}

dialog.add input {
    outline: none;
    grid-area: name;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 20px;
    padding: 0 20px;
    width: 100%;
    color: var(--gray1);
    background-color: var(--gray4);
    border-radius: 20px;
    height: 100%;
    border: 2px var(--transparent) solid;
    transition: 0.7s;
}

dialog.add input:focus {
    border-color: var(--gray6);
}

dialog.add select {
    height: 100%;
    width: 100%;
    grid-area: category;
    border-radius: 20px;
    background-color: var(--gray4);
    outline: none;
    border: none;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 0 10px;
    color: var(--gray1);
    text-align: center;
}

dialog.add button.add {
    height: 100%;
    width: 100%;
    grid-area: add;
    border-radius: 20px;
    background-color: var(--gray4);
    outline: none;
    border: none;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    font-size: 20px;
    padding: 0 10px;
    color: var(--gray1);
    transition: 0.7s;
    cursor: pointer;
}

dialog.add button.close {
    height: 100%;
    aspect-ratio: 1/1;
    grid-area: close;
    justify-self: left;
    border-radius: 100%;
    background-color: var(--gray4);
    outline: none;
    border: none;
    padding: 0 10px;
    color: var(--gray2);
    transition: 0.7s;
    cursor: pointer;
}

dialog.add button:hover,
dialog.add button:focus {
    background-color: var(--gray6);
}

section.list {
    width: 95%;
}

section.list ul {
    width: 100%;
    list-style-type: none;
}

section.list li {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid var(--accent);
    background: linear-gradient(90deg, var(--accent) 0%, var(--gray3) 100%);
}

section.list h2 {
    outline: none;
    border: none;
    word-wrap: break-word;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--gray2);
    width: 100%;
}

section.list input[type="checkbox"]:checked + h2 {
    text-decoration: line-through;
}

section.list input[type="checkbox"] {
    cursor: pointer;
}

section.list button {
    display: flex;
    background-color: unset;
    border: unset;
    justify-content: center;
    align-items: center;
    min-height: 20px;
    color: var(--gray10);
    cursor: pointer;
    border-radius: 10px;
    font-size: 0.2px;
}

/* Misc */
section.list li[data-category="0"] {
    --accent: var(--gray5);
}

/* Movies */
section.list li[data-category="1"] {
    --accent: hsl(0, 100%, 75%);
}

/* Games */
section.list li[data-category="2"] {
    --accent: hsl(34, 100%, 75%);
}

/* Restaurants */
section.list li[data-category="3"] {
    --accent: hsl(125, 100%, 75%);
}

/* Activities */
section.list li[data-category="4"] {
    --accent: hsl(204, 100%, 75%);
}

/* Places */
section.list li[data-category="5"] {
    --accent: hsl(263, 100%, 75%);
}