@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

:root {
  --bg: hsl(27, 66%, 92%);

  --bg-main: hsl(33, 100%, 98%);

  --txt-medium: hsl(28, 10%, 53%);
  --txt-dark: hsl(25, 47%, 15%);

  --clr-bar: hsl(10, 79%, 65%);
  --clr-bar-hi: hsl(186, 34%, 60%);

}

html {
  box-sizing: border-box;
  font-size: 18px;
  font-family: 'DM Sans', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  max-width: 600px;
  margin: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
}

p {
  margin: 0;
  padding: 0;
}

hr {
  margin: 1.5rem 0;
  padding: 2px;
  background-color: var(--bg);
  border: none;
}

.txt__light {
  color: var(--bg);
}

.txt__medium {
  color: var(--txt-medium);
}

.txt__dark {
  color: var(--txt-dark);
}

.header {
  background-color: var(--clr-bar);
  padding: 1rem;
  border-radius: .8rem;
  margin: 1rem;
  background-image: url(images/logo.svg);
  background-repeat: no-repeat;
  background-position: right 1rem top 50%;
}

.balance {
  font-size: .8rem;
}

.balance__total {
  color: var(--bg-main);
  font-weight: 700;
  font-size: 1.3rem;
}

.main {
  background-color: var(--bg-main);
  padding: 1.5rem 1rem;
  margin-top: 1rem;
  border-radius: .8rem;
  margin: 1rem;
}

.total {
  font-size: .9rem;
}

.total__spend {
  font-weight: 700;
  font-size: 1.8rem;
  float: left;
}

.last-container {
  text-align: right;
}

.last {
  font-size: .8rem;
}

.last__percent {
  font-weight: 700;
  font-size: .8rem;
}

.day-container {
  display: flex;
  flex-direction: row-reverse;
  transform: rotate(180deg);
  margin-top: 1rem;
}

.day-container>div {
  flex: 1;
  min-width: 0;
}

.day-container>*>* {
  color: var(--txt-medium);
}

.day {
  transform: rotate(180deg);
  text-align: center;
}

.day__bar:hover,
.day__bar-highest:hover {
  opacity: .5;
  cursor: pointer;
}

.day__bar {
  background-color: var(--clr-bar);
}

.day__bar-highest {
  background-color: var(--clr-bar-hi);
}

.day__bar,
.day__bar-highest {
  border-radius: .2rem;
  margin: .3rem .3rem;
}

.day__bar:hover+.day__spend,
.day__bar-highest:hover+.day__spend {
  visibility: visible;
}

.day__spend {
  visibility: hidden;
  transform: rotate(180deg);
  background-color: var(--txt-dark);
  color: var(--bg-main);
  font-size: .6rem;
  padding: .5rem;
  border-radius: .2rem;
  text-align: center;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}