@import"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,700&display=swap";#root{width:100%;min-height:100vh;background:var(--color-site-1);display:grid;place-content:center;padding:2rem}main{width:100%;background-color:var(--color-brand-2);padding:2rem 2rem 4rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.Title{font-size:2.7rem;color:var(--color-brand-1);margin-bottom:3.5rem}.ChartBox{list-style:none;display:flex;align-items:flex-end;justify-content:center;gap:1.25rem}.ChartBox>li{width:3rem;height:4rem;position:relative}.ChartBox-Chart{width:100%;height:100%;border-radius:.5rem;background-color:var(--color-site-2);cursor:pointer}.ChartBox>li:first-of-type{height:3rem}.ChartBox>li:nth-of-type(2){height:6rem}.ChartBox>li:nth-of-type(3){height:9rem}.ChartBox>li:nth-of-type(3) .ChartBox-Chart{background-color:var(--color-site-3)}.ChartBox>li:nth-of-type(4){height:5rem}.ChartBox>li:nth-of-type(5){height:4rem}.ChartBox>li:nth-of-type(6){height:7rem}.ChartBox>li:nth-of-type(7){height:4rem}.ChartBox>li:hover .ChartBox-Chart{opacity:.7}.ChartBox-Val{display:block;background:var(--color-brand-1);color:var(--color-brand-2);padding:.25rem .5rem;border-radius:.25rem;font-size:1.2rem;position:absolute;top:-2.5rem;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s ease-in-out}.ChartBox>li:hover .ChartBox-Val{opacity:1}.ChartBox-Day{position:absolute;bottom:-2rem;left:50%;transform:translate(-50%);font-size:1.6rem;color:var(--color-site-4)}footer{background-color:var(--color-brand-2);display:flex;align-items:center;justify-content:space-between;padding:2rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;position:relative}footer:before{position:absolute;content:"";top:0;left:2rem;right:2rem;display:block;height:1px;background-color:var(--color-site-4)}.ThisMonth>p{font-size:1.6rem;color:var(--color-site-4);margin-bottom:1rem}.ThisMonth>h1{font-size:2.6rem;color:var(--color-brand-1)}.LastMonth>p:first-of-type{font-size:1.6rem;font-weight:700;margin-bottom:1.6rem;color:var(--color-brand-1);text-align:right}.LastMonth>p:last-of-type{font-size:1.6rem;color:var(--color-site-4)}:root{--color-brand-1: hsl(25, 47%, 15%);--color-brand-2: hsl(33, 100%, 98%);--color-site-1: hsl(27, 66%, 92%);--color-site-2: hsl(10, 79%, 65%);--color-site-3: hsl(186, 34%, 60%);--color-site-4: hsl(28, 10%, 53%);--font-dm-sans: "DM Sans", sans-serif}*,*:after,*:before{padding:0;margin:0;box-sizing:border-box;font-family:var(--font-dm-sans)}html{font-size:62.5%}header{width:100%;display:flex;align-items:center;justify-content:space-between;border-radius:.5rem;margin-bottom:1rem;gap:3rem;background-color:var(--color-site-2);padding:1.5rem 2.5rem}header p{font-size:1.6rem;color:var(--color-site-1);margin-bottom:.5rem}header h2{font-size:2.6rem;color:var(--color-brand-2)}header>img{width:6rem;height:6rem}
