@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

:root {
    /* Color */
    --color-bg: #ffe4e3;
    --color-text: #653c3a;
    --color-text-faint: #906866;
    --color-surface: #fff2f2;
    --color-button: #ffffff;


    /* Border radius */
    --border-radius-small: 0.2rem;
    --border-radius-medium: 0.4rem;
    --border-radius-large: 0.8rem;
}

a, .icon-button {
    all: unset;
    cursor: pointer;
    color: inherit;
}

.icon svg {
    display: block;
}

.icon path {
    fill: var(--color-text);
}

body {
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: "Roboto Slab", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Slab", serif;
}

.hover-scale {
    transition: .2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.02);
}

input[type="search"] {
    all: unset;
    padding: .7em;
    color: var(--color-text);
    background-color: var(--color-button)
}

input[type="search"]::placeholder {
    all: unset;
    color: var(--color-text-faint);
}

.segmented-button-group {
    display: flex;
}

.segmented-button-group>* {
    all: unset;
    padding: 1.2em;
    color: var(--color-text);
    background-color: var(--color-button);
    cursor: pointer;
    display: block;
}

.segmented-button-group>*.active {
    color: var(--color-button);
    background-color: var(--color-text);
}

.hidden {
    visibility: hidden;
}

.faint-text {
    color: var(--color-text-faint)
}

@media (max-width: 600px) {
    body {
        font-size: 0.8rem;
    }
}

@media (max-width: 350px) {
    body {
        font-size: 0.75rem;
    }
}