@import url("colors.css");
.topbar{
    padding-left: 30px;
    padding-right: 30px;
}

#global-meter {
    min-width: 240px;
    width: 100%;
    height: 80px;
    margin: 0px 0px 10px 0px;

}
@keyframes fadeIn {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}
#global-meter {
    animation: 1.5s fadeIn forwards;
    --soft-plastic: 100%;
    --hard-plastic: 100%;
    --glass: 0%;
    --paper: 0%;
    --cardboard: 0%;
    --metal: 0%;
    --electronics: 0%;
    --textiles: 0%;
    --styrofoam: 0%;
}
#global-meter::-webkit-meter-optimum-value {
    background: linear-gradient( 90deg, 
                                    var(--pistachio) 0%,
                                    var(--pistachio) var(--soft-plastic),
                                    var(--pistachio-3) var(--soft-plastic),
                                    var(--pistachio-3) var(--hard-plastic),
                                    var(--pigment-green) var(--hard-plastic),
                                    var(--pigment-green) var(--glass),
                                    var(--viridian) var(--glass),
                                    var(--viridian) var(--paper),
                                    var(--caribbean-current) var(--paper),
                                    var(--caribbean-current) var(--cardboard),
                                    var(--midnight-green) var(--cardboard),
                                    var(--midnight-green) var(--metal),
                                    var(--oxford-blue) var(--metal),
                                    var(--oxford-blue) var(--electronics),
                                    var(--oxford-blue-2) var(--electronics),
                                    var(--oxford-blue-2) var(--textiles),
                                    black var(--textiles),
                                    black var(--styrofoam));
}

.total {
    margin-top: 20px;
    font-size: 15px;
    padding: 0px 0px;
    list-style-type: none;
    width: 100%;
    position: relative
}

.item-totals{
  outline: 0px solid #c00;
  float: left;
  width: calc(100% / 9);
  text-align: left;
  text-indent: 10px ;
}

.item-totals::before {
  content: '';
  width: 100%;
  height: 15px;
  outline: 0px solid #000;
  position: absolute;
  top: -20px;
  left: 0px;

  border-radius: 20px;
  
  background-image: linear-gradient( 90deg, 
                                    var(--pistachio) 0%,
                                    var(--pistachio) 11.1%,
                                    var(--pistachio-3) 11.1%,
                                    var(--pistachio-3) 22.2%,
                                    var(--pigment-green) 22.2%,
                                    var(--pigment-green) 33.3%,
                                    var(--viridian) 33.3%,
                                    var(--viridian) 44.4%,
                                    var(--caribbean-current) 44.4%,
                                    var(--caribbean-current) 55.5%,
                                    var(--midnight-green) 55.5%,
                                    var(--midnight-green) 66.6%,
                                    var(--oxford-blue) 66.6%,
                                    var(--oxford-blue) 77.7%,
                                    var(--oxford-blue-2) 77.7%,
                                    var(--oxford-blue-2) 88.8%,
                                    black 88.8%,
                                    black 100%);
}
.achievement-list {
    overflow-y: scroll;
}

.achievement-list meter {
    width: 100%;
}

meter {
    height: 50px;
}

.meter-case { 
    animation: 0.5s ease-in-out 1 loadBoxes;
    margin: 20px;
    padding: 10px;
    color: white;
    background-color: var(--button-color);
    border-radius: 20px;
    min-width: 240px;
    /*color: var(--text-darker);*/
    background: linear-gradient(90deg,  #463420, #3b2a16);
    box-shadow:  12px 12px 28px #151714,
    -12px -12px 28px #2c312b;
}
.meter-info {
    display: grid;
    grid-auto-flow: column;
    /* justify-content: space-between; */
    grid-template-columns: 1fr auto 1fr;
}

.meter-info > label, .meter-info > input {
    font-size: 20px;
    color: white;
    background: #21251e;
    border-radius: 20px;
    border: solid 5px #241c13;
    padding: 5px 20px;
}

#item-name {
    height: min-content;
    width: auto;
    text-align: center;
    justify-self: left;
}

.item-meter {
    box-sizing: border-box;
    height: 50px;
    width: 100%;
    background: #382815;
    margin: 10px 0px 0px 0px;
    padding: 5px;
    border-radius: 50px;
    border: solid 5px #241c14;
}

.progress {
    --goal-count: 0%;
    border-radius: 50px;
    background-color: blue;
    height: 100%;
    width: 0%;
}

/* aniamtino for .progress bar */
.progress_anim {
    animation: 750ms ease-in-out 1 progressFill forwards;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: var(--goal-count);
    }
}


/* Each Meter Color*/
#soft-plastic > .item-meter > .progress {
    background-color: var(--pistachio);
}
#hard-plastic  > .item-meter > .progress {
    background-color: var(--pistachio-3);
}
#glass  > .item-meter > .progress {
    background-color: var(--pigment-green);
}

#paper  > .item-meter > .progress {
    background-color: var(--viridian);
}

#cardboard  > .item-meter > .progress {
    background-color: var(--caribbean-current);
}

#metal  > .item-meter > .progress {
    background-color: var(--midnight-green);
}

#electronics > .item-meter > .progress {
    background-color: var(--oxford-blue);
}

#textiles > .item-meter > .progress {
    background-color: var(--oxford-blue-2);
}
#styrofoam > .item-meter > .progress {
    background-color: var(--oxford-blue-2);
}

.goal-set {
    width: 80px;
    text-align: center;
    justify-self: right;
    height: min-content;
    white-space: nowrap;
}

::-webkit-input-placeholder { 
    font-weight: 400;
    color: white;
    opacity: 1 !important;
}
#item-total {
    justify-self:center !important;
    height: min-content;

}



@media (max-width: 620px) {
    .meter-info {
        /* display: grid; */
        /* grid-auto-flow: column; */
        /* justify-content: space-between; */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    #item-total, .goal-set, #item-name {
        justify-self: center;
        margin: 8px;
    }
    meter {
        height: 80px;
    }

    .total {
        display:none
    }
    .goal-set, #item-name, #item-total {
        width: 175px;
        text-align: center;
    }
}