body {
    font-family: 'Noto Serif', serif;
    background-color: hsl(33, 70%, 85%);
    font-size: 18px;
}

.btn {
    background-color: hsl(0, 49%, 41%);
}

#sidebar {
    width: 70px;
}

.input {
    background-color: hsl(220, 23%, 96%);
}

.input-dropdown {
    background-color: #eff1f5;
}

.grid-line {
    stroke-width: 2;
    stroke: rgba(96, 96, 96, 0.1);
}

.title {
    font-family: 'Noto Serif';
    font-style: normal;
    font-size: 1.7rem;
}

.svg-background {
    fill: transparent;
}

.chart-container {
    background-color: hsl(220, 23%, 96%);
}

.sh {
    box-shadow: 5px 5px 0 hsl(0, 10%, 57%);
}

.blue {
    background-color: hsl(225, 53%, 52%);
}

.blue-sh {
    box-shadow: 5px 5px 0 hsl(235, 13%, 42%);
    transform: translate(0);
    transition: box-shadow 100ms, transform 100ms;
}

.blue-sh:active {
    box-shadow: 2px 2px 0 hsl(235, 13%, 42%);
    transform: translate(3px, 3px);
}

.text-2-5xl {
    font-size: 1.7rem;
}