* {
 box-sizing: border-box;
}
:root {
 --highlight-color: hsl(25, 47%, 15%);
 --accent-color: hsl(10, 79%, 65%);
 --primary-color: hsl(27, 66%, 92%);
 --light-color: hsl(33, 100%, 98%);
 font-size: 10px;
}

body {
 font-family: 'DM Sans', sans-serif;
 margin: 0;
 font-size: 1.8rem;
 background-color: var(--primary-color);
 color: hsl(28, 10%, 53%);
}

.widget {
 max-width: 36rem;
 margin: 5rem auto;
}

.widget-header {
 background-color: var(--accent-color);
 color: var(--light-color);
 border-radius: 1rem;
 padding: 1rem 1.5rem;
 margin-bottom: 2rem;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 height: 10rem;
 justify-content: center;
 align-content: space-between;
}

.widget-balance-text {
 margin: 0;
 margin-bottom: .5rem;
}
.widget-balance-amount {
 font-size: 2.2rem;
 font-weight: 700;
 margin: 0;
}
.widget-balance-icon {
 align-self: center;
}

.widget-main {
 background-color: var(--light-color);
 border-radius: 1rem;
 padding: 1rem 1.5rem;
}

.widget-main-section {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-end;
 justify-content: space-between;
 gap: 2px;
}

.day {
 flex-basis: calc(1 / 7 * 100% - 12px);
 font-size: 1.3rem;
 position: relative;
 display: flex;
 flex-direction: column;
}

.day-bar {
 flex-grow: 1;
 border-radius: 3px;
 display: block;
 margin-bottom: 1.5rem;
 cursor: pointer;
}

.tooltip {
 background: var(--highlight-color);
 color: var(--light-color);
 padding: 4px;
 border-radius: 3px;
 position: absolute;
 top: -2.5rem;
 align-self: center;
 font-weight: 700;
 display: none;
 opacity: 0;
}

.day:hover .tooltip {
 display: block;
 opacity: 1;
 transition: opacity 2s ease-in;
}

.day-name {
 align-self: center;
}

.widget-main-heading {
 color: var(--highlight-color);
 flex-basis: 100%;
}

.widget-footer {
 border-top: 2px solid var(--primary-color);
 display: flex;
 flex-direction: column;
 height: 10rem;
 flex-wrap: wrap;
 align-content: space-between;
 justify-content: center;
}

.widget-total-amount {
 font-weight: 700;
 color: var(--highlight-color);
 font-size: 2.5rem;
 margin: 0;
}

.widget-total-text {
 margin: 0;
 margin-top: .5rem;
}

.widget-total-extra {
 text-align: right;
}

.widget-total-extra small {
 color: var(--highlight-color);
 font-weight: 700;
}






.attribution {
 font-size: 10px;
 text-align: center;
 margin-top: 4rem;
}