html {
    background-image: url('backgrounds/light_3.jpg');
    background-size: cover;
}

body {
    display: flex;
    flex-direction: column;
    max-width: 30rem;
    margin: auto;
    height: 100vh;
}

.app-title {
    text-align: center;
}

.app-title>span {
    background-color: whitesmoke;
    padding: 0.3rem;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.content {
    overflow: auto;
    flex-grow: 1;
}

.footer {
    text-align: end;
}

.footer>.background {
    background-color: whitesmoke;
    width: fit-content;
}

#result,
.actions {
    padding: 0 40px;
}

.exercise-item {
    background-color: whitesmoke;
    padding: 0.3rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.exercise-content-wrapper {
    display: flex;
}

.exercise-item-text {
    flex-grow: 1;
}

.actions {
    text-align: center;
    margin-top: 2rem;
}

.actions>button {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.exercise-form_field {
    margin-bottom: 1rem;
}

.exercise-form__actions {
    text-align: center;
}