/* black = #0000000
           2 gray = #212121
            3 #303030
            4 #424242 */

 body {
     background-color: #171819;
     color: #fff;
 }

 .protein-container {
     margin-top: 70px;
 }

 .protein-container h1 {
     text-align: center;
     padding: 20px;
 }

 .protein-card-content {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
 }

 .protein-card-content .card {
     width: 400px;
     height: 210px;
     border: none;
     background: #424242;
     border-radius: 10px;
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.6);
     text-align: center;
     margin: 10px;
 }

 .protein-card-content .card h2 {
     font-size: 20px;
     font-weight: bolder;
     padding-top: 20px;
     text-transform: uppercase;
 }

 .protein-card-content .card .inner {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 30px;
     padding-top: 30px;
 }

 .protein-card-content .card .inner .fa-plus {
     color: #FF4545;
 }

 .formula {
     background-color: #FF4545;
     width: 150px;
     padding: 5px;
     font-size: 20px;
     font-weight: 800;
     display: block;
     margin: 10px auto;
     border: none;
     border-radius: 50px;
 }

 .protein-card-content .card2 p {
     font-size: 20px;
     font-weight: 600;
     padding: 10px 20px;
 }

 .protein-foods {
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin-top: 12px;
 }

 .protein-foods img {
     width: 40px;
     height: 40px;
     margin-right: 10px;
 }

 .food {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     font-weight: bolder;
 }

 .focus h1 {
     text-align: center;
     padding: 20px;
 }

 .focus-card {
     width: 90%;
     display: block;
     margin: 50px auto;
 }

 .focus-card .card {
     border: none;
     background: #424242;
     border-radius: 10px;
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.6);
     margin: 10px;
     position: relative;
 }

 .focus-card .card h2 {
     font-size: 20px;
     background: #FF4545;
     width: 200px;
     border-radius: 5px;
     position: absolute;
     left: 40%;
     top: -20px;
     margin: 0 auto;
     text-align: center;
     padding: 5px;
 }

 .carbs-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 .carbs {
     margin-top: 15px;
     padding: 10px;
 }

 .carbs img {
     width: 150px;
     height: 150px;
     display: block;
     margin: 5px auto;
 }

 .carbs h3 {
     font-size: 30px;
     font-weight: 800;
     text-align: center;
     padding: 20px;
 }

 .one-carb p {
     text-align: center;
 }

 .carbs h4 {
     font-weight: 800;
     padding: 10px;
     text-align: center;
 }

 .pre-workout p {
     font-size: 20px;
     font-weight: bold;
     text-align: center;
 }

 .pre-workout img {
     width: 100%;
     margin-bottom: 30px;
 }

 .pre-workout span {
     font-size: 20px;
 }

 .pre-workout ul {
     font-size: 20px;
     font-weight: bold;
     list-style: none;
 }

 .pre-workout ul li {
     padding: 7px;
 }

 .fa-arrow-right {
     color: #FF4545;
     padding-right: 10px;
 }


 .one-day-container h2 {
     text-align: center;
 }

 .gain-loss-container {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 10px;
 }

 .gain-loss-container .btn {
     font-weight: 700;
     margin: 0 10px;
 }

 .table-container p {
     font-size: 25px;
     text-align: center;
     font-weight: 400;
     padding: 20px;
 }

 .table-container table {
     width: 90%;
     margin: 10px auto;
     text-align: center;
     border-radius: 10px;
 }

 .table-container th {
     color: #FF4545;
     font-size: 30px;
 }

 .table-container th,
 .table-container td {
     padding: 20px;
     border-radius: 10px;
 }

 .meal-plan-container {
     width: 90%;
     display: block;
     margin: 20px auto;
     border-radius: 20px;
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.6);
 }

 .meal-plan-container-light {
     background: #424242;
 }

 .meal-plan-container h2 {
     text-align: center;
     padding: 10px;
     font-size: 30px;
     color: #FF4545;
 }

 .meal-plan-container p {
     padding: 10px 50px;
     font-size: 20px;
 }

 .meal-plan-container table {
     width: 100%;
     text-align: center;
     border-collapse: collapse;
 }

 .meal-plan-container td,
 .meal-plan-container th {
     padding: 10px;
 }


 .calories-card {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin: 20px;
 }

 .calories-card-dark {
     background: #424242;
 }

 .calories-card-light {
     background: #fff;
 }

 .calories-card .card {
     width: 250px;
     border: none;
     border-radius: 10px;
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.6);
     margin: 10px;
 }

 .calories-card .card h4 {
     text-align: center;
     font-size: 20px;
     font-weight: bold;
     background: #FF4545;
     border-radius: 5px;
     padding: 0;
 }

 .calories-card .card p {
     text-align: center;
     font-weight: bolder;
     padding: 10px;
 }

 .calories-card .card ul {
     list-style: none;
     text-align: center;
     padding-bottom: 10px;
 }

 .calories-card .card ul li {
     padding: 10px;
 }

 /* Media Query */

 @media screen and (max-width: 1042px) {
     .carbs-container {
         flex-direction: column;
     }

     .focus-card .card h2 {
         width: 150px;
         font-size: 15px;
     }
 }

 @media screen and (max-width: 670px) {

     .table-container th {
         font-size: 20px;
     }

     .table-container th,
     .table-container td {
         padding: 2px;
     }
 }

 @media screen and (max-width: 496px) {
     .focus-card .card h2 {
         left: 30%;
         top: -20px;
     }

     .pre-workout ul {
         font-size: 15px;
     }
 }


 /* Light theme */

 .protein-card-content .card-dark {
     width: 400px;
     height: 210px;
     border: none;
     background: #ffffff;
     border-radius: 10px;
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.6);
     text-align: center;
     margin: 10px;
 }

 .protein-card-content .card-dark h2 {
     font-size: 20px;
     font-weight: bolder;
     padding-top: 20px;
     text-transform: uppercase;
 }

 .protein-card-content .card-dark .inner {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 30px;
     padding-top: 30px;
 }

 .protein-card-content .card-dark .inner .fa-plus {
     color: #FF4545;
 }


 .focus-card .card-dark {
     border: none;
     background: #ffffff;
     border-radius: 10px;
     box-shadow: 0 15px 20px rgba(0, 0, 0, 0.6);
     margin: 10px;
     position: relative;
 }

 .focus-card .card-dark h2 {
     font-size: 20px;
     background: #FF4545;
     width: 200px;
     border-radius: 5px;
     position: absolute;
     left: 40%;
     top: -20px;
     margin: 0 auto;
     text-align: center;
     padding: 5px;
 }


 @media screen and (max-width: 496px) {
     .focus-card .card-dark h2 {
         left: 30%;
         top: -20px;
     }
 }

 @media screen and (max-width: 1042px) {
     .focus-card .card-dark h2 {
         width: 150px;
         font-size: 15px;
     }
 }

 .meal-plan-container-dark {
     background: #ffffff;
 }