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

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

body {
 background-color: #f2e1cbc5;
 font-family: 'Work Sans', sans-serif;
}




/* Header */

header {
 background-color: #fb5f3fc9;
 color: #faebd7;
 border-radius: 10px;
 padding: 0.65rem 1.2rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 4em auto 1rem;
 max-width: 270px;
}

h1 {
 font-size: 0.4rem;
 font-weight: lighter;
 line-height: 2.5;
}

.header .balance p {
 font-size: 0.75rem;
 font-weight: bold;
}

.circles, .circles::after {
 width: 1.3rem;
 height: 1.3rem;
}

.circles {
 position: relative;
 background-color: #000000c0;
 border-radius: 50px;
}

.circles::after {
 content: "";
 position: absolute;
 border: 0.1px solid white;
 left: -10px;
 border-radius: 50px;
}



/* White lower section */

main {
 background-color: white;
 border-radius: 10px;
 padding: 0.9rem 1.2rem;
 max-width: 270px;
 margin: 1em auto;
}

h2 {
 font-size: 0.9rem;
}

.bars {
 display: grid;
 justify-content: space-around;
 align-items: flex-end;
 grid-template-columns: repeat(7, 1fr);
 gap: 0.5rem;
 max-width: 100%;
 margin-top: 1.5rem;
}

.bars>* {
 border-radius: 3px;
 min-width: 1.7rem;
 position: relative;
}

/* .bars>*::before {
 font-size: 0.35rem;
 content: "";
 width: 100%;
 position: absolute;
 top: -0.75rem;

} */

.bars>a:hover::before {
 font-size: 0.35rem;
 content: "";
 /* max-width: 100%; */
 width: 100%;
 position: absolute;
 top: -1rem;
 margin: 0 auto;
 transform: scale(1.2);
 background: #302f2f;
 color: #fff;
 height: 0.7rem;
 border-radius: 2px;
 padding: 0.15rem;
 text-align: center;
}

.bars>*::after {
 font-size: 0.4rem;
 content: "";
 width: 100%;
 position: absolute;
 bottom: -0.75rem;
 text-align: center;
}

.bars .mon {
 height: 2rem;
 background-color: #fb5f3fc9;
}

.bars>.mon:hover::before {
  content: "$17.45";
}

.bars>.mon::after {
 content: "mon";
}

.bars .tue {
 height: 4rem;
 background-color: #fb5418b5;
}

.bars>.tue:hover::before {
  content: "$34.91";
}

.bars>.tue::after {
 content: "tue";
}

.bars .wed {
 height: 6rem;
 background-color: #bae3fd;
}

.bars>.wed:hover::before {
  content: "$52.36";
}

.bars>.wed::after {
 content: "wed";
}

.bars .thu {
 height: 3.5rem;
 background-color: #f7907bc9;
}

.bars>.thu:hover::before {
  content: "$31.07";
}

.bars>.thu::after {
 content: "thu";
}

.bars .fri {
 height: 2.5rem;
 background-color: #fb5f3fc9;
}

.bars>.fri:hover::before {
  content: "$23.39";
}

.bars>.fri::after {
 content: "fri";
}

.bars .sat {
 height: 4.5rem;
 background-color: #fb5f3fc9;
}

.bars>.sat:hover::before {
  content: "$43.28";
}

.bars>.sat::after {
 content: "sat";
}

.bars .sun {
 height: 2.8rem;
 background-color: #fb5f3fc9;
}

.bars>.sun:hover::before {
  content: "$25.48";
}

.bars>.sun::after {
 content: "sun";
}

.divider {
 margin: 2rem auto 1rem;
 border: 0.01px solid #d3d3d3;
 background-color: #d3d3d3;
}

/* Summary (Footer) - (White lower section) */

h3 {
 font-size: 0.5rem;
 font-weight: lighter;
 line-height: 1rem;
}

.total_section .summary {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.total_section .summary .sum_total {
 font-weight: bold;
}

.total_section .summary .progress {
 text-align: right;
 font-size: 0.5rem;
}

.total_section .summary .progress :first-child {
 font-weight: bold;
}





/* Frontend mentor custom attribution styling */

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }




/* Screen increment (Responsiveness) */


@media screen and (min-width: 768px) {
 body {
  transform: scale(1.3);
  position: relative;
  top: 4em;
 }
}

@media screen and (min-width: 1200px) {
 body {
  transform: scale(1.6);
  position: relative;
  top: 8em;
 }
}