*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --primary-1: hsl(10, 79%, 65%);
    --primary-2: hsl(186, 34%, 60%);

    --neutral-1: hsl(25, 47%, 15%);
    --neutral-2: hsl(28, 10%, 53%);
    --neutral-3: hsl(27, 66%, 92%);
    --neutral-4: hsl(33, 100%, 98%);

    /* Fonts */
    --ff-primary: 'DM Sans', sans-serif;

    --fs-body: 1.125rem;
    --fw-regular: 400;
    --fw-bold: 700;
}

body {
    padding-inline: .6rem;
    min-height: 100vh;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    background-color: var(--neutral-3);

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

body > * {
    flex-grow: 1;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* Utilities Classes */


.flow-content > * + * {
    margin-top: var(--flow-space, 1em);
}


/* General styling */

.container {
    max-width: 23rem;
}

.balance {
    padding: 1.3rem;
    background-color: var(--primary-1);
    color: var(--neutral-4);
    border-radius: 1rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balance__title {
    margin-bottom: .3em;
    font-size: .8rem;
    font-weight: var(--fw-regular);
}

.balance__money {
    font-size: 1.3rem;
    font-weight: var(--fw-bold);
}

.spendings {
    padding: 1.3rem;
    background-color: var(--neutral-4);
    border-radius: 1rem;
}

.spending__title {
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    color: var(--neutral-1);
}

.spending__month {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 2px solid var(--neutral-3);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.total__title,
.last-month__title {
    font-size: .9rem;
    color: var(--neutral-2);
}

.total__title {
    margin-bottom: .7em;
}

.spending__month--last-month {
    text-align: end;
    display: flex;
    flex-direction: column;
}

.last-month__title {
    order: 2;
}

.total__price {
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--neutral-1);
}

.last-month__percentage {
    font-weight: var(--fw-bold);
    color: var(--neutral-1);
}

.chart {
    margin-top: 1rem;
    padding-top: 1.7rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bar-wrapper .bar {
    display: block;
    width: 33px;
    background-color: var(--primary-1);
    border-radius: 3px;
    position: relative;
    transition: opacity 250ms;
}

.bar-wrapper .bar:hover {
    background-color:hsla(10, 79%, 65%, .8);
}

.bar-wrapper:hover .bar::before {
    opacity: 1;
}

.bar-wrapper .bar::before {
    content: '$' attr(data-month-spending);
    position: absolute;
    top: -35px;
    right: -27%;
    padding: .4em .4em;
    font-size: .8rem;
    font-weight: var(--fw-bold);
    background-color: var(--neutral-1);
    color: var(--neutral-4);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 250ms;
}

.bar-wrapper .month {
    margin-top: .8em;
    font-size: .8rem;
    color: var(--neutral-2);
}

.chart .bar-wrapper:nth-child(1) .bar {
  height: 60px;
}

.chart .bar-wrapper:nth-child(2) .bar {
  height: 110px;
}

.chart .bar-wrapper:nth-child(3) .bar {
  height: 160px;
  background-color: var(--primary-2);
}

.chart .bar-wrapper:nth-child(4) .bar {
  height: 100px;
}

.chart .bar-wrapper:nth-child(5) .bar {
  height: 67px;
}

.chart .bar-wrapper:nth-child(6) .bar {
  height: 126px;
}

.chart .bar-wrapper:nth-child(7) .bar {
  height: 70px;
}