:root {
--background: #fdf8f7;
--on-background: #201a19;

```
--icon-background: #f1e9e7;
--icon-color: #514542;

--primary-container: #ffdad2;
--on-primary-container: #3a0b04;

--primary: #8c4a3c;
--on-primary: #ffffff;

--icon-size: 56px;
--icon-symbol-size: 34px;

--item-width: 72px;
--column-gap: 12px;
--row-gap: 28px;

--section-gap: 52px;
```

}

@media (prefers-color-scheme: dark) {
:root {
--background: #201a19;
--on-background: #ede0dd;

```
    --icon-background: #2b2321;
    --icon-color: #d8c2bd;

    --primary-container: #723529;
    --on-primary-container: #ffdad2;

    --primary: #ffb4a4;
    --on-primary: #561f15;
}
```

}

* {
  box-sizing: border-box;
  }

html {
min-height: 100%;
background: var(--background);
}

body {
margin: 0;
min-height: 100%;

```
background: var(--background);
color: var(--on-background);

font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

-webkit-font-smoothing: antialiased;
```

}

#app {
width: min(100%, 1100px);
margin: 0 auto;
padding: 52px 24px 72px;
}

.section {
margin-bottom: var(--section-gap);
}

.section:last-child {
margin-bottom: 0;
}

.section-title {
margin: 0 0 22px;

```
font-size: 20px;
line-height: 28px;
font-weight: 600;
letter-spacing: 0;

color: var(--on-background);
```

}

.bookmarks {
display: grid;

```
grid-template-columns:
    repeat(auto-fill, var(--item-width));

column-gap: var(--column-gap);
row-gap: var(--row-gap);

justify-content: start;
```

}

.bookmark {
width: var(--item-width);

```
display: flex;
flex-direction: column;
align-items: center;

gap: 8px;

padding: 0;
margin: 0;

border: 0;

background: transparent;
color: inherit;

font: inherit;

cursor: pointer;
text-decoration: none;
```

}

.icon {
width: var(--icon-size);
height: var(--icon-size);

```
flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--icon-background);

transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 100ms ease;
```

}

.icon-svg {
display: block;

```
width: var(--icon-symbol-size);
height: var(--icon-symbol-size);

flex-shrink: 0;

object-fit: contain;
```

}

.label {
width: 100%;

```
font-size: 13px;
line-height: 18px;

text-align: center;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

color: var(--on-background);
```

}

.bookmark:hover .icon {
background: var(--primary-container);
}

.bookmark:active .icon {
background: var(--primary);

```
transform: scale(0.94);
```

}

.bookmark:focus-visible {
outline: none;
}

.bookmark:focus-visible .icon {
outline: 2px solid var(--primary);
outline-offset: 3px;
}

@media (max-width: 600px) {
#app {
width: 100%;
padding: 36px 18px 56px;
}

```
.section {
    margin-bottom: 48px;
}

.section-title {
    margin-bottom: 20px;

    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.bookmarks {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    column-gap: 8px;
    row-gap: 28px;
}

.bookmark {
    width: 100%;
}
```

}