@font-face {
    font-family: 'Fira-Sans';
    src: url("./media/fonts/FiraSans-Regular.ttf") format("truetype");
}

html {
    font-size: 20px;
    box-sizing: border-box;
}

* {
    font-family: 'Fira-Sans', sans-serif;
}

.container {
    margin: auto;
    border-radius: 1em;
    corner-shape: squircle bevel;
    width: clamp(400px, 60vw, 800px);
}


.aufgaben-app {
    margin: 10px;
    padding: 10px;
    border-radius: 1em;
    corner-shape: squircle bevel;
    background-color: ivory;
}

.aufgaben-app h2 {
    font-size: 2rem;
}

.aufgaben-app h2 img {
    max-height: 1em;
}

.input-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
}

.input-container #input-box {
    flex-grow: 1;
}

.input-container button {
    cursor: pointer;
    background-color: lightskyblue;
    border-radius: 100%;
    corner-shape: squircle;
}


.schatten-farbverlauf {
    background: linear-gradient(45deg, red, orange, yellow, green, blue, violet, pink);
    padding: 3px;
}

.checked-list-item
{
    text-decoration: line-through;
    color: lightslategrey;
}

ul {
    list-style: none;
}

li {
    display: flex;
    gap: .7em;
}

label {
    flex-grow: 1;
}