@charset 'UTF-8';

:root{
  --color-carbs: rgb(141, 4, 4);
  --color-protein: #8d6b08;
  --color-fat: rgb(17, 131, 93);
  --color-carbs-text: rgb(240, 11, 11);
  --color-protein-text: #f0b70c;
  --color-fat-text: rgb(12, 240, 164);
}

/* Common Breakpoints - use them to make your website even more responsive and set different css styles depedning on the size of the viewport/screen */
@media (max-width: 480px) {
    body main{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card{
      max-width: 20rem
    }

    .fooditems-div-cal{justify-content: center}

} /*Mobile devices*/

@media (min-width: 481px) {
    body main{width: 80%}

    .card{
      padding-bottom: 0; 
      max-width: 25rem
    }

    .fooditems{max-width: 100%}

    .fooditems-div-cal{justify-content: center}
} /*iPads, Tablets*/


@media (max-width: 992px) {
  .d-flex{
    display: grid!important;
    justify-content: end!important;
  }

}

@media (min-width: 1020px) {
  nav{
    max-height: 5rem;
  }

  .fooditems-div-cal{justify-content: right}

}

@media (max-width: 1024px) {} /*Small screens, laptops*/
@media (max-width: 1200px) {} /*Desktops, large screens*/



body{    
  font-family: Rubik;
  font-size: 1.3rem;
  line-height: 1.3;
}

.darkmode{
  background-color: #292d3e;
  color: white; /*#a6accd*/
}

.lightmode{
  background-color: white;
  color: black
}

.disclaimer{
  max-height: 2rem; /* Initial height */
  overflow: hidden; /* This is essential for ellipsis */
  text-overflow: ellipsis; /* Now this will work */
  cursor: pointer; /* Indicate it's clickable */
  transition: max-height 2s ease; /* Smooth transition */
}

.disclaimer.expanded {
  max-height: 25rem; /* Remove height restriction */
  overflow: visible; /* Make sure the full text is shown when expanded */
  transition: max-height 2s ease; /* Smooth transition */
}

  body main {
    margin: 2rem auto;
  }

  body .btn{
    border: solid 1px black
  }

  section {
    padding-bottom: 2rem;
  }

  #brand{margin-left: 0.2rem;}

  .brand-info{
    display: flex;
    vertical-align: middle;
    align-items: center;
  }

  section div {
    padding-bottom: 3rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  #countdown div {
    padding-bottom: 0;
    max-width: 50rem;
  }

  #timeBasedExercises div{
    padding-bottom: 0;
  }

  #timeBasedExercises .col{
    justify-content: center;
    display: flex

  }

  #countdown span {
    margin: 5px;
  }

  #countdown{
    cursor: pointer;
  }

  #countdownBtn, .controlBtn{
    margin: 0;
  }

  #timeBasedExercises h3{
    text-align: center;
  }

  #timeBasedExercises input{
    max-width: 4rem;
    text-align: center;
  }

  #timeBasedExercises label{
    display: block;
  }

  #timeBasedExercisesSeconds{
    font-weight: 900;
  }

  #countdown h4, #timeBasedExercises h4{
    padding-bottom: 6px;
  }

  #countdown .card-body, #timeBasedExercises .card-body{
    color: black;
  }

  #countdown .card-footer, #timeBasedExercises .card-footer{
    margin: 0;
    padding: 8px 16px;
    text-align: center;
  }

  .controlBtn:hover{
    color: #af8505;
  }

  .controlBtn{
    font-size:x-large;
    color: black;
    font-weight: bold;
  }

  #calisthenicsSkills ul{
    text-align: center;
  }

  #calisthenicsSkills .card{
    max-width: 30rem;
  }

  .btn {
    font-family: Rubik;
    font-size: 1.3rem;
    margin: 2rem auto;
  }

  /* Disclaimer styling */
  .btn-warning {
    font-size: 14px;
    background-color: #ffc107!important;
    opacity: 1!important;
    margin-top: 0;
    border: solid 2px #af8505!important;
  }


  .row {
    justify-content: center;
  }

  .card-header {
    margin-left: 0;
  }

  .card {
    margin: 1rem;
    border: solid 1px black;
    padding: 0;
  }

  .card-header{
    justify-content: center; 
    display: grid; 
    margin-right: 0;
  }

  .bg-light{background-color: white!important;}

  #copyright{
    background-color: rgb(32, 32, 32);
    border-top: 1px solid rgb(63, 63, 63);
    text-align: center;
    padding: 20px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 60px;
    width: 100%;
    color: white;
  }

  .btn-group label{
    width: 45px;
  }


  /*Food items section*/
 .meal-name{
    background-color: rgb(153, 86, 216);
    padding: 1rem;
    border: 1px solid white;
    border-radius: 2rem;
 }

 .meals .card-header{
    border-bottom: 1px solid white;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .fooditems{
    border: 1px solid white;
    font-size: 1.1rem;
    display: none;
  }

  .fooditems .card-header{
    background: black;
    color: white;
  }

  .fooditems-div, .cal-macro{
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .fooditems-div-input, .fooditems-div-cal{
    text-align: right;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    text-align: center;
    /* flex-wrap: wrap; */
    gap: 0.5rem;
  }

  .fooditems-div-input{flex-direction: column;}

  .fooditems-div-input input{
    width: 5rem;
    text-align: right;
    border-radius: 1rem;
  }

  .fooditems .list-group-item{
    border: 0.5px solid gray;
    background-color: #343a40;
    display: flex;
    justify-content: space-between;
  }

  .fooditems .row{
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: auto;
  }

  .fooditem-name{
    margin-bottom: 5px;
  }

  .fooditem-info, .fooditem-macros{
    font-size: 0.7rem;
    margin-bottom: 0;
  }

 .fooditem-macros{
    margin: 0.5rem 0;
    line-height: 1.5rem;
 }

 .macro-carbs, .macro-protein, .macro-fat{
    padding: 2px 5px;
    border-radius: 1rem;
    border: 1px solid white;
    white-space: nowrap;
 }

  .macro-carbs{background-color: var(--color-carbs);}
  .macro-protein{background-color: var(--color-protein);}
  .macro-fat{background-color: var(--color-fat);}
  .macros-space{margin: 0 5px;}

  .cal-macro{
    display:flex;
    flex-direction: column;
  }

  .cal-macro-carbs, .mealMacrosCalCarbs{color: var(--color-carbs-text)}
  .cal-macro-protein, .mealMacrosCalProtein{color: var(--color-protein-text)}
  .cal-macro-fat, .mealMacrosCalFat{color: var(--color-fat-text)}

  .cal-macro-line{white-space: nowrap;}

  .meal-name{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .mealMacros{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    text-align: center;
    background-color: black;
    padding: 1rem;
    border-radius: 2rem;
    border: 1px solid white;
  }

  .mealMacrosCal{
    display: flex;
    flex-direction: column;
  }