/*
- Soft red: hsl(10, 79%, 65%)
- Cyan: hsl(186, 34%, 60%)

### Neutral

- Dark brown: hsl(25, 47%, 15%)
- Medium brown: hsl(28, 10%, 53%)
- Cream: hsl(27, 66%, 92%)
- Very pale orange: hsl(33, 100%, 98%)
*/

* {
    font-family: "DM Sans", sans-serif;
    --dark-brown: hsl(25, 47%, 15%);
    --medium-brown: hsl(28, 10%, 53%);
    --cream: hsl(27, 66%, 92%);
    --very-pale-orange: hsl(33, 100%, 98%);
    --soft-red: hsl(10, 79%, 65%);
    --cyan: hsl(186, 34%, 60%);
}

body {
    background-color: var(--cream);
    margin: 0;
    padding: 0;
    max-width: 100vw;
}

header {
    background-color: var(--soft-red);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2em;
    padding-left: 1.35em;
    border-radius: 0.7em;
}

header h2 {
    margin-top: 0;
    margin-bottom: 0.2em;
    color: var(--very-pale-orange);
}

header p {
    margin-top: 0;
    padding: 0;
    margin-bottom: 0.3em;
    color: var(--cream);
}

header img {
    margin-right: 0.4em;
}
.wrapper {
    margin: auto;
    padding: 1.1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 95vh;
    max-width: 26em;
}

.main {
    margin: 1px;
    margin-top: 1.1em;
    background-color: var(--very-pale-orange);
    border-radius: 0.7em;
    padding: 1.35em;
}

.main h3 {
    margin-top: 0.25em;
    margin-left: 0.05em;
    color: var(--dark-brown);
    font-size: 1.6em;
}

#graph {
    margin-top: 3.5em;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 1em;
    width: 100%;
    justify-content: space-between;
    text-align: center;
    color: var(--medium-brown);
}

.tool-tips {
    display: none;
}
.bar {
    width: 100%;
    background-color: var(--soft-red);
    border-radius: 0.2em;
}

#graph > div:nth-child(3) > div > div {
    background-color: var(--cyan);
}

.bar-container {
    height: 10.22rem;
    display: flex;
    align-items: flex-end
}

.day {
    font-size: 0.8em;
}

hr {
    margin-top: 0.9em;
    border-color: var(--cream);
    border: none;
    height: 3px;
    background-color: var(--cream);
}

footer {
    margin-top: 0.7em;
    margin-bottom: 0.3em;

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

.left p {
    color: var(--medium-brown);
    margin-bottom: 0.3em;
}

.left h1  {
    margin: 0;
    padding: 0;
    color: var(--dark-brown);
    font-size: 1.9em;
}

.right p  {
    text-align: right;
    margin: 0;
    color: var(--medium-brown);
}

span {
    font-weight: 700;
    margin-bottom: 0;
    color: var(--dark-brown);
}

.bar:hover {
    cursor: pointer;
    background-color:hsla(10, 79%, 65%, 0.808) ;
}

/* select tool-tips when bar is hovered */
.bar {
    position: relative;
}

.bar::before {
    display: none;
    position: absolute;
    background-color: var(--dark-brown);
    margin-top: -2.7em;
    left: -30%;
    font-size: 0.8em;
    color: var(--very-pale-orange);
    border-radius: 0.2em;
    padding: 0.5em;
    content: "$52.36";
}

.bar:hover::before {
    opacity: 1;
    display: block;
}

#graph > div:nth-child(3) > div > div:hover {
    background-color: hsla(186, 34%, 60%, 0.808);
}