@charset "UTF-8";

  body {
    background-color: #efefef;
  }

  #container {
  display: grid;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #fff;
}
#containers3{
  display: grid;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #99b9de;
}
#info {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #555;
  width: 800px;
  margin: 0 auto 100px auto;
}

.roboto-condensed uniquifier {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
}
.container1 {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  grid-gap: 1rem;
  padding: 0.5rem;
  margin: auto;
  align-content: center;
}
.container1 > div {
  /*border: 1px solid black;*/
  padding: 10px;
  font-size: 0.5rem;
  text-align: left;
}
.title{
  grid-column: 1 / span 2;
  grid-row: 3/ span 12;
  align-content: center;
  text-align: center;
}
.nutrition-box{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 1.5rem;
  grid-row: 2/ span 14;
  grid-column: 5/ span 2;
  margin-right: 1.5em;
  margin-left: 3rem;
  line-height: 2em;
}
.daily-val{
  grid-column: 1/ span 12;
  grid-row: 1;
}
.nutrition-ing{
  grid-column: 1/ span 5;
  line-height: 3em;
}
.nutrition-per{
  grid-column: 6/ span 7;
  line-height: 3em;
}
.ingredients{
grid-column: 1 / span 6;
line-height: 2em;
}
.allergy-info{
grid-column: 1 / span 4;
grid-row: 2/ span 1;
line-height: 2em;
}
.grams{
  grid-column: 1 / span 4;
  align-content: center;
  line-height: 2em;
}
.percentage{
  grid-column: 1/ span 4;
  line-height: 2em;
}
.questions{
  grid-column: 1/ span 6;
  line-height: 2em;
}
.container2 {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  grid-gap: 1rem;
  padding: 1rem;
  margin-bottom: 30px;
  max-width: 1100px;
  margin: auto;
  align-content: center;
}
.container2 > div {
/*  border: 1px solid black;*/
  padding: 10px;
  font-size: 0.5rem;
  text-align: left;
}
.title2{
  grid-column: 1/ span 1;
  line-height: 1.5em;
}
.allergy-info2{
  grid-column: 2/ span 26;
}
.daily-val2{
  grid-column: 2/ span 17;
  grid-row: 2;
  line-height: 1rem;
}
.nutrition-box2{
  grid-column: 2/ span 18;
  grid-row: 2/ span 4;
  line-height: 1.5rem;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  margin-top: 6rem;
}
.nutrition-ingredients2{
  grid-column: 1/ span 9;
  grid-row: 2;
  margin-right: 6rem;
  
}
.nutrition-percent2{
  grid-column: 7/ span 9;
  grid-row: 2;
}
.ingredients2{
  grid-column: 14/ span 22;
  grid-row: 2/ span 3;
  line-height: 1.5rem;
  rotate:90deg;
  margin-top: 2.5rem;
  margin-right: 1rem;
  /*rotate:90deg;
  transform-origin: top left;
  margin-right: -70px;*/
}
/*grid-row: 2/ span 2;*/
.percentage2{
  grid-column: 17/ span 18;
  grid-row: 5;
  line-height: 1rem;
  align-self: center;
  margin-top:2rem;
}
.questions2{
  grid-column: 2/ span 33;
  grid-row: 6;
  line-height: 1rem;
}
.roboto-condensed uniquifier {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
}

.raleway uniquifier {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
}

.schibsted-grotesk uniquifier> {
  font-family: "Schibsted Grotesk", sans-serif;
  font-optical-sizing: auto;
}


.crimson-pro-uniquifier> {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: <700>;
  font-style: normal;
}


.container3 {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  padding: 1rem;
  margin: auto;
  align-content: center;
}
.M {
  grid-column: 1;
  grid-row: 1;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  text-align: bottom;
  color: #00091c;
  font-weight: 600;
}
.U {
  grid-column: 2;
  grid-row: 1;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #0d2148;
  font-weight: 600;
}
.S {
  grid-column: 3;
  grid-row: 1;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #1c3d7c;
  font-weight: 600;
}
.cals3{
  font-family: "Raleway";
  grid-column:4/ span 5;
  grid-row: 1;
  font-size: 1.5rem;
  display: flex;
  align-self: flex-end;
  padding-bottom: 3rem;
  color: #0d2148;
  font-weight: 700;
}
.nutri-box1{
  grid-column: 6/ span 11;
  grid-row: 1/ span 2;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.daily-val3{
  grid-column: 1/ span 7;
  grid-row: 1;
  line-height: 1rem;
  margin-bottom: 1rem;
}
.nutrition-ing1{
  grid-column:1/ span 3;
  grid-row: 2;
  line-height: 1.5rem;
}
.nutrition-per1{
  grid-column: 7/ span 8;
  grid-row: 2;
  line-height: 1.5rem;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.nutrition-per1 strong>{
  font-weight: 700;
}
.allergy-info3{
  grid-column: 1/ span 2;
  grid-row: 2;
  line-height: 1rem;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.K{
  grid-column: 3;
  grid-row: 2;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #00091c;
  font-weight: 600;
}
.E{
  grid-column: 4;
  grid-row: 2;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #0d2148;
  font-weight: 600;
}
.T{
  grid-column: 5;
  grid-row: 2;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  font-weight: 600;
  color: #1c3d7c;
}
.percentage3-1{
  grid-column: 1/ span 3;
  grid-row:3;
  line-height: 1rem;
  display: flex;
  align-self: center;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.E2{
  grid-column: 4;
  grid-row: 3;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #00091c;
  font-weight: 600;
}
.E3{
  grid-column: 5;
  grid-row: 3;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #0d2148;
  font-weight: 600;
}
.R{
  grid-column: 6;
  grid-row: 3;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #1c3d7c;
  font-weight: 600;
}
.S2{
  grid-column: 7;
  grid-row: 3;
  font-size: 6rem;
  font-family: "Roboto Condensed";
  color: #375ca3;
  font-weight: 600;
  margin-left: 0.5rem;
}
.grams3{
  display: flex;
  align-self: flex-end;
  grid-column: 8;
  grid-row: 3;
  vertical-align: text-bottom;
  font-size: 1.5rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  font-family: "Raleway";
  color: #0d2148;
  font-weight: 700;
}
.percentage3-2{
  grid-column: 1/ span 5;
  grid-row: 4;
  line-height: 1rem;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
  margin-top: 1.5rem;
}
.nutri-box2{
  grid-column: 6/ span 12;
  grid-row: 4/ span 5;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  line-height: 1.5rem;
  align-content: flex-start;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.nutrition-ing2{
  grid-column:1/ span 3;
  grid-row: 2;
  line-height: 1.5rem;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.nutrition-per2{
  grid-column: 23/ span 9;
  grid-row: 2;
  line-height: 1.5rem;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
}
.ingredients3{
  grid-row: 5;
  grid-column: 1/ span 5;
  padding-right: 2.5rem;
  line-height: 1rem;
  padding-top: 2rem;
  font-family: "Crimson Pro";
  font-size: 0.5rem;
  align-self: center;
}
.questions3{
  grid-row: 4/ span 5;
  grid-column: 6/ span 11;
  line-height: 1rem;
  padding-top: 8rem;
  font-size: 0.5rem;
  font-family: "Crimson Pro";
  margin-top: 2rem;
}
.main-container{
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
}
.main-container div{
  padding: 15px;
  background-color: #889bae;
}
.title{
  grid-column: 1;
}
.Nutrition Facts{
  grid-column: 2;
}
.Nutrition ingredients{
  grid-column: 3;
}
.ingredients-french{
  grid-column: 1;
  grid-row: 3;
}
strong>{
  font-weight: 700;
}
.containers-text{
  display: grid;
  grid-template-columns: auto auto auto auto;
}
.Title-text{
  grid-column: 1;
}
.Nutrition-Facts-text{
  grid-column: 2/ span 3;
  
}