html {font-size: 16px;}
body {background: url('../img/bg_sky2.jpg') repeat-x;}
body * {
    font-family: semplicitapro, Helvetica, Arial, sans-serif;
    font-weight: 400;
}
body .box-shell .food-img img {display: block;}
/*.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}*/
h1 {
    font-size: 3em;
    padding-left: 0.5em;
}
.box-grid { 
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 5rem;
    background: url('../img/texture_grass-light3.jpg');
    margin-top: 7rem;
    padding-left: 2em;
    z-index: 5;
    width: 100%;
    position: relative;
    min-width: 3200px;
}
.box-grid h2 {
    width: 17.5rem;
    height: 12.5rem;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    font-size: 2rem;
    line-height: 1;
    letter-spacing:  -0.02rem;
    transform: matrix(1,0,0,1,70,-50);
    text-shadow: 4px 4px 4px rgba(0,0,0,0.2), -1px -1px 2px #fff;
}
.box-grid .VeggieVista h2 {
    background: url('../img/sign_veggie-vista.png') no-repeat center;
    background-size: contain;
    color: #5b693f;
    padding-top: 2rem;
    padding-right: 3.4rem;
    font-size: 1.75rem;
}
.box-grid .Fruitville h2 {
    background: url('../img/sign_fruitville.png') no-repeat center;
    background-size: contain;
    color: #3c5578;
    transform: matrix(1,0,0,1,100,-60);
    padding-right: 4.3rem;
    padding-top: 2.5rem;
}
.box-grid .NutTown h2 {
    background: url('../img/sign_nuttown.png') no-repeat center;
    background-size: contain;
    color: #8f6f40;
    padding-right: 4.5rem;
    padding-top: 1.7rem;
    transform: matrix(1,0,0,1,100,-60);
}
.box-grid .ProteinPoint h2 {
    background: url('../img/sign_protein-point.png') no-repeat center;
    background-size: contain;
    color: #784848;
    padding-right: 4.5rem;
    padding-top: 2rem;
}
.box-grid .StarchSprings h2 {
    background: url('../img/sign_starch-springs.png') no-repeat center;
    background-size: contain;
    color: #3a615a;
    font-size: 1.8rem;
    padding-top: 1.5rem;
    padding-right: 4.5rem;
    transform: matrix(1,0,0,1,100,-60);
}

.box-shell { 
    margin: 1rem; 
    padding: 0; 
    position: relative; 
    width: 13rem; 
    margin: -2.5rem 1rem 0.5rem;
}
.box-top {
    width: 12.5rem;
    height: 7.4rem;
    transform: matrix(1, 0, 0.75, -0.7, 100, 0);
}
.box-front {
    width: 12.5rem;
    height: 3.5rem;
    transform: matrix(1, 0, 0, 1, 56, -19);
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    z-index: 20;
    position: relative;
}
.box-side {
    height: 4.9rem;
    width: 5.5rem;
    transform: matrix(1, -0.93, 0, -0.7, 255, -127);
}
.box-front p {
    text-align: center;
    line-height: 1.1;
    margin: 0 auto;
    padding: 0;
    top: 1rem;
    position: relative;
    font-weight: 700;
}
.box-side {
    background-color: #2e422e;
}
.box-front {
    background-color: #537353;
    color: white;
}
.box-top {
    background: rgb(171,184,171);
    background: radial-gradient(circle, rgba(70,97,70,1) 8%, rgb(205, 222, 205) 75%);
    box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.5);
}
.food-img {
    position: absolute;
    display: block; 
    margin: 0;
    padding: 0;
    z-index: 10;
    width: 10em;
    right: 0;
    z-index: 20;
}
.food-img img {
    display: block;
    position: relative;
    width: 10rem;
    top: -3.5rem;
    left: 5rem;
    z-index: 10;
}
.nutrition-card {
    position: relative;
    padding: 0.7rem;
    margin: 0 auto;
    background-color: #ddd;
    border: 1px solid #bbb;
    z-index: 100;
    transform: matrix(0.5,0,0,0.5,-100,-170);
    transition: all 0.25s ease-in-out;
    width: fit-content;
}
.nutrition-card p {
    top: 0;
    color: #000;
}
.bar-label {
    font-size: 10px;
    fill: #333;
    text-anchor: end;
}
.bar {
    fill: steelblue;
}
.box-front .add-to-plate-icon {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 50; /* Ensure above other elements */
    color: white;
    width: 1.3rem;
    height: 1.3rem;
    i.fa-circle-plus {display: block;}
    i.fa-circle-check {display: none;}
}
.box-front .add-to-plate-icon.selected {
    color: limegreen; /* Visual feedback for selection */
    text-shadow: 2px 2px 2px #fff, -2px -2px 2px #ff0, 2px -2px 2px #fff, -2px 2px 2px #fff;
    i.fa-circle-plus {display: none;}
    i.fa-circle-check {display: block;}
}
.street {
    height: 2.5rem;  
    background-color: #a1cba1;
    background: url('../img/texture_grass-strip2.jpg');
    border-top: 0.4em solid #fff;
    border-bottom: 1.5rem solid #b6b6b6;
    position: absolute;
    display: block;
    width: 16rem;
    margin: 0 auto;
    transform: matrix(1, 0, -1, 1, 25, -97);
    z-index: 1;
}
.topbar {
    position: fixed;
    height: 6rem;
    background: rgba(255,255,255,0.85);
    border-bottom: 2px solid #f7941d;
    padding: 0.3rem 0.5rem;
    overflow: visible;
    z-index: 95;
    top: 0;
    width: 100%;
    box-shadow: 0px 3px 0px #fff, 0px 10px 20px rgba(0,0,0,0.4);
}
.logo {
    position: relative;
    display: block;
    width: 60%;
    max-width: 350px;
}
button.button i {
    margin-right: 0.5rem;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 0.35rem;
}
button.button, button.button:focus {
    background-color: #006838;
}
button.button:hover {
    background-color: #f7941d;
}
.intro {
    position: relative;
    display: block;
    margin: 9rem 1rem 0;
    padding: 1rem 1rem 0;
}
.intro p {
    line-height: 1.2;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.6rem;
    letter-spacing: -0.01rem;
    text-shadow:  0px 0px 5px rgba(255,255,255,0.5), 0px 0px 10px #fff;
}
.button-shell {
    position: fixed;
    display: block;
    right: 0.25em;
    top: 0.25em;
    width: max-content;
    margin: 1em;
    z-index: 99;
}
.button-shell button.button {
    border: 2px solid white;
    font-weight: bold;
    box-shadow: 5px 5px 5px rgba(0,40,80,0.5);
    padding: 0.5rem 0.75rem;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
}
.card-box {
    width: 12.5rem;
    height: 2.25rem;
    max-width: 100vw;
    /*overflow: hidden; */
    opacity: 0;
    padding: 0;
    transition: all 0.25s ease-in-out;
    position:absolute;
    transform: matrix(1,0,0,1,35,-150);
}
.opened {
    height: auto;
    width: 18rem;
    /* overflow: visible; */
    opacity: 1;
    z-index: 100;
}
.enlarged {
    transform: matrix(1.25,0,0,1.25,75,0);
    background-color: #fff;
    top: 3.75rem;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
}
#view-plate {
    position: relative;
    /* width: 100%;
    height: 100%; */
    min-width: 300px;
    min-height: 300px;
    background: url('../img/bg-plate.png') no-repeat center center;
    background-size: contain;
    margin: 0 auto;
}
.food-shell {
    position: absolute;
    top: 30%;
    left: 38%;
    transform: translate(-50%, -50%);
    width: 70%; /* Scale food-shell relative to view-plate */
    height: 90%; /* Maintain a square layout */
    display: flex;
    align-items: center;
    justify-content: center;
}
.plate-item {
    position: absolute;
    width: 35%;
    /* max-width: 100%; */ /* Prevent oversized images */
    /* max-height: 100%; */ /* Scale within the container */
}
.reveal {
    width: 100%;
    max-width: 80rem;
    top: 0;
}
.bar-label {
    font-size: 12px;
    fill: #333;
    text-anchor: inherit;
}
.bar-label.inside {
    fill: #fff;
    text-anchor: end;
    transform: translateX(-100%);
}
  .nutrient-name {
      font-size: 12px;
      text-anchor: end;
      fill: #333;
  }
  .bar {
      fill: #006838;
  }
  .bar:hover {
      fill: #f7941d;
  }
  .NutTown, .StarchSprings, .ProteinPoint, .VeggieVista, .Fruitville {
    display: flex;
    flex-wrap: wrap;
    margin-right: 1.5em;
  }
  .NutTown {
    grid-column: 5 / span 3; 
    grid-row: 4 / span 3;
  }
  .Fruitville {
    grid-column: 8 / span 3; 
    grid-row: 1 / span 7;
}
  .StarchSprings {
    grid-column: 5 / span 3; 
    grid-row: 1 / span 3;
  }
  .ProteinPoint {
    grid-column: 1 / span 4; 
    grid-row: 5 / span 5;
  }
  .VeggieVista {
    grid-column: 1 / span 4; 
    grid-row: 1 / span 4;
  }

  /* ////////// BLOCK COLORS 2 ////////// */
  
.NutTown .box-side {
    background-color: #5c4422;
}
.NutTown .box-front {
    background-color: #877456;
    color: white;
}
.NutTown .box-top {
    background: radial-gradient(circle, rgba(143,111,64,1) 8%, rgb(222, 208, 189) 75%);
    box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.5);
}
.StarchSprings .box-side {
  background-color: #2e423b;
}
.StarchSprings .box-front {
  background-color: #5c7d79;
  color: white;
}
.StarchSprings .box-top {
  background: radial-gradient(circle, rgba(58,97,90,1) 8%, rgb(205, 222, 219) 75%);
  box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.5);
}
.ProteinPoint .box-side {
  background-color: #422e2e;
}
.ProteinPoint .box-front {
  background-color: #8c6969;
  color: white;
}
.ProteinPoint .box-top {
  background: radial-gradient(circle, rgba(120,72,72,1) 8%, rgb(222, 205, 205) 75%);
  box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.5);
}
.Fruitville .box-side {
  background-color: #2e3642;
}
.Fruitville .box-front {
  background-color: #5b6e8c;
  color: white;
}
.Fruitville .box-top {
  background: radial-gradient(circle, rgba(60,85,120,1) 8%, rgb(205, 212, 222) 75%);
  box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.5);
}
.VeggieVista .box-side {
  background-color: #3b422e;
}
.VeggieVista .box-front {
  background-color: #737a59;
  color: white;
}
.VeggieVista .box-top {
  background: radial-gradient(circle, rgba(91,105,63,1) 8%, rgb(216, 222, 205) 75%);
  box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.5);
}
.note {
    font-style: italic;
    font-size: 1.25rem !important;
    margin-top: 1rem !important;
    position: relative;
    display: block;
}

@media only screen and (min-width: 641px) and (max-width: 1023px){
    .food-shell {
        left: 43%;
        width: 40%; /* Scale food-shell relative to view-plate */
        height: 90%; /* Maintain a square layout */
    }
}