* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@font-face {
  font-family: "Regular";
  src: url("/fonts/Heebo/static/Heebo-Medium.ttf");
}

@font-face {
  font-family: "Bold";
  src: url("/fonts/Heebo/static/Heebo-Medium.ttf");
}

:root {
  --basic: 0.9rem;
  --title-f: Bold;
  --main-f: Regular;
  --Ssize: var(--basic);
  --Msize: calc(var(--basic) * 1.618);
  --Bsize: calc(var(--basic) * 1.618 * 1.5);
  --clr1: #fefefe;
  --clr2: #e7eee9;
  --clr2-sec: #cbe3d4;
  --clr3: #d9e0f6;
  --clr3-sec: #bdc6f1;
  --clr4: #131313;
  --txt-clr: #000;
}

body {
  width: 100svw;
  height: 100svh;
  overflow: overlay;
  overflow-x: hidden;
}

.container {
  width: 100svw;
  height: 100svh;
  background: var(--clr1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.container nav {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container nav .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container nav .logo span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container nav .logo p {
  font-size: var(--Ssize);
  font-family: var(--main-f);
  color: var(--txt-clr);
  text-transform: capitalize;
}

.container nav .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
}

.container nav .actions button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
  background: transparent;
  width: 35px;
  aspect-ratio: 1/1;
  border-radius: 100vw;
  border: 1px solid gray;
}

.container nav .actions button svg {
  fill: var(--clr4);
}

.container nav .actions .img {
  width: 35px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 100vw;
}

.container nav .actions .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.container nav .actions .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  background: var(--clr4);
}

.container nav .actions .menu svg {
  fill: var(--clr1);
  stroke: var(--clr1);
}

.container nav .actions .menu p {
  text-transform: capitalize;
  font-size: var(--Ssize);
  font-family: var(--main-f);
  color: var(--clr1);
}

.container main {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
}

.container main section {
  position: relative;
  width: 50%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.container main section #title {
  font-size: var(--Bsize);
  font-family: var(--title-f);
  color: var(--clr4);
}

.container main section #pragraph {
  font-size: var(--Ssize);
  font-family: var(--main-f);
  color: var(--clr4);
}

.container main section #pragraph span {
  border-radius: 1rem;
  padding-inline: 0.4rem;
}

.container main section #pragraph #t1 {
  background: var(--clr2);
}

.container main section #pragraph #t2 {
  background: var(--clr3);
}

.container main section #pragraph #t3 {
  background: var(--clr3);
}

.container main section .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: cneter;
      -ms-flex-pack: cneter;
          justify-content: cneter;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 2rem;
}

.container main section .text #unsual {
  position: relative;
  width: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0rem;
}

.container main section .text #unsual svg {
  position: absolute;
  width: 140px;
  z-index: 0;
}

.container main section .text #unsual p {
  position: relative;
  z-index: 1;
  left: 12px;
  font-size: var(--Ssize);
  font-family: var(--main-f);
  color: var(--txt-clr);
}

.container main section .text #unsual span {
  position: relative;
  left: 12px;
  z-index: 1;
  font-size: var(--Ssize);
  font-family: var(--main-f);
  color: var(--txt-clr);
  width: 30px;
  aspect-ratio: 1/1;
  border-radius: 100vw;
  background: var(--clr2-sec);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container main section .text #Normal {
  background: var(--clr3);
  border-radius: 100vw;
  padding: 0.25rem;
  -webkit-padding-start: 1.2rem;
          padding-inline-start: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: cneter;
      -ms-flex-pack: cneter;
          justify-content: cneter;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
}

.container main section .text #Normal span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
  width: 30px;
  aspect-ratio: 1/1;
  background: var(--clr3-sec);
  border-radius: 100vw;
}

.container main section .text #unsual,
.container main section .text #Normal {
  border: none;
  font-family: var(--main-f);
  font-size: var(--Ssize);
  color: var(--txt-clr);
}

.container main #dataV {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container main #dataV .img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--clr3);
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.container main #dataV .img img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0 !important;
}

.container main #dataV .img .info {
  margin: 1rem;
  position: relative;
  z-index: 1 !important;
  padding: 0.5rem;
  padding-inline: 1rem;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.301);
  border-radius: 1rem;
  font-size: var(--Ssize);
  font-family: var(--main-f);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 5rem;
}

.container main #dataV .img .info span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container main #dataV .img .info span svg {
  fill: var(--txt-clr);
  rotate: 45deg;
}

.container #charts {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.container #charts form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
  padding-block: 1rem;
  border-bottom: 1px solid whitesmoke;
}

.container #charts form label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 2rem;
}

.container #charts form label button {
  position: relative;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--main-f);
  font-size: var(--Ssize);
  color: var(--txt-clr);
}

.container #charts form label button[data-active]::after {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 1px solid gray;
  left: 0;
  bottom: -1rem;
}

.container #charts form #input_field {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.container #charts form #input_field span {
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.container #charts form #input_field span svg {
  fill: gray;
  scale: 0.8;
}

.container #charts form #input_field input {
  border: none;
  outline: none;
  font-family: var(--main-f);
  text-align: right;
  background: transparent;
}

.container #charts section {
  position: relative;
  width: 100%;
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  gap: 1rem;
}

.container #charts section > div {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.container #charts section > div:nth-child(1) {
  overflow: hidden;
  background: var(--clr2);
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 1/1/2/3;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.container #charts section > div:nth-child(1) .top {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  font-family: var(--main-f);
}

.container #charts section > div:nth-child(1) .top > div {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(1) .top > div p {
  text-transform: capitalize;
}

.container #charts section > div:nth-child(1) .top > div span {
  color: var(--clr1);
  padding: 0.3rem;
  padding-inline: 0.5rem;
  background: var(--clr2-sec);
  border-radius: 100vw;
}

.container #charts section > div:nth-child(1) .middle {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(1) .middle span {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(1) .middle span::after {
  content: "1.5K";
  position: absolute;
  top: 40%;
  left: 0;
  font-family: var(--main-f);
  font-size: var(--Ssize);
  color: var(--txt-clr);
}

.container #charts section > div:nth-child(1) .middle span::before {
  content: "1.6K";
  position: absolute;
  top: 0%;
  right: 0;
  font-family: var(--main-f);
  font-size: var(--Ssize);
  color: var(--txt-clr);
}

.container #charts section > div:nth-child(1) .bottom {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
  background: var(--clr2-sec);
  padding: 0.2rem;
  padding-inline: 0.7rem;
  border-radius: 0.7rem;
  font-size: var(--Ssize);
  font-family: var(--main-f);
}

.container #charts section > div:nth-child(1) .bottom span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(1) .bottom span svg {
  scale: 0.8;
}

.container #charts section > div:nth-child(1) .bottom #left {
  margin-left: auto;
}

.container #charts section > div:nth-child(1) .bottom #left svg {
  fill: var(--clr4);
}

.container #charts section > div:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1/3/2/4;
}

.container #charts section > div:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-area: 1/4/2/5;
}

.container #charts section > div:nth-child(2), .container #charts section > div:nth-child(3) {
  font-family: var(--main-f);
  background: var(--clr3);
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.container #charts section > div:nth-child(2) .top, .container #charts section > div:nth-child(3) .top {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(2) .top span, .container #charts section > div:nth-child(3) .top span {
  background: var(--clr3-sec);
  padding: 0.3rem;
  padding-inline: 0.5rem;
  border-radius: 100vw;
  color: var(--clr1);
}

.container #charts section > div:nth-child(2) .middle, .container #charts section > div:nth-child(3) .middle {
  margin-bottom: auto;
}

.container #charts section > div:nth-child(2) .bottom, .container #charts section > div:nth-child(3) .bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  position: relative;
}

.container #charts section > div:nth-child(2) .bottom div, .container #charts section > div:nth-child(3) .bottom div {
  padding: 0.3rem;
  padding-inline: 0.7rem;
  border-radius: 0.8rem;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(2) .bottom div:nth-child(1), .container #charts section > div:nth-child(3) .bottom div:nth-child(1) {
  background: var(--clr3-sec);
}

.container #charts section > div:nth-child(2) .bottom div:nth-child(1) span, .container #charts section > div:nth-child(3) .bottom div:nth-child(1) span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(2) .bottom div:nth-child(1) span svg, .container #charts section > div:nth-child(3) .bottom div:nth-child(1) span svg {
  fill: var(--clr4);
}

.container #charts section > div:nth-child(2) .bottom div:nth-child(2), .container #charts section > div:nth-child(3) .bottom div:nth-child(2) {
  background: var(--clr4);
  color: var(--clr1);
}

.container #charts section > div:nth-child(2) .bottom div:nth-child(2) span, .container #charts section > div:nth-child(3) .bottom div:nth-child(2) span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
}

.container #charts section > div:nth-child(2) .bottom div:nth-child(2) span svg, .container #charts section > div:nth-child(3) .bottom div:nth-child(2) span svg {
  fill: var(--clr1);
}
/*# sourceMappingURL=style.css.map */