.main-container{display:flex;flex-grow:1;justify-content:center;align-items:center}.bar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));gap:.75rem;margin:.75rem;width:40vw;height:30vw}.bar{grid-column:span 1/span 1;grid-row:span 1/span 1;border-radius:1rem;font-size:50px;font-weight:bolder;text-align:center;align-content:center;color:var(--background);&.m{background-color:var(--green-strong)}&.o{background-color:var(--green-light)}&.n1{color:var(--green-strong);background-color:var(--green-lightest)}&.a1{color:var(--yellow-bright);background-color:var(--yellow-light)}&.n2{color:var(--red-strong);background-color:var(--red-light)}&.z{background-color:var(--red-in-between)}&.a2{background-color:var(--yellow-dark)}}@media only screen and (max-width:768px){.bar-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:.5rem;margin:.5rem;width:70vw;height:90vw}.bar{border-radius:.5rem;font-size:3vh}}