@media only screen and (max-width: 50px) {
  body {
      font-size: 3rem;
     
     
  }
  h1 {
    font-size: 1.5rem;
  }
 
}



html, body, h2 {
    /* display: flex; */
    width: 100%;
    height: 100%;
    background-color: linear-gradient(145deg, #ff9966, #ffe066, #ff6666);
    background: linear-gradient(145deg, #ff9966, #ffe066, #ff6666);
}

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

button {
  border: rgb(190, 29, 29) 0.1rem solid;
  border-radius: 5px;
  padding: 10px;
}

#main-header, .macros-header{
    color: green;
    display: flex;
    justify-content: center;
    
}

/* li {
  border: rgb(190, 29, 29) 0.1rem solid;
  border-radius: 10px;
  padding: 10px;
  
} */

#id1 {

  color: black;
}


.menu-buttons{
    display: flex;
    justify-content: center;
    
}

.menu-button {
    /* justify-content: center;  */
    text-decoration: none;
    
    margin: 5px;
}

/* results */
#result {
    /* margin: black 3px solid; */
    /* border: solid;  */
    margin-left: 15px;
    width: 40%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#macros-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: auto;
   
}

/*#macros-cont1, #macros-cont2, #macros-cont3{*/
    /* display: flex;
    justify-content: center;
    align-items: center;
    height: 20%; */
   
/*}*/

#body-weight, #body-fat{
  border-radius: 7.5px;
  font-size: 2em;
  width: 50%;
  
  /* text-align: left; */
}
#body-weight {

  margin-right: 1rem;

}

label {

  text-align: left;

}

#macros-cont1{
  display: flex;
  justify-content: center;
  margin-top: 1px;
  padding-bottom: 1rem;
  padding-top: 1px;
  text-align: left;
  padding-right: 1.5rem;
}

#macros-cont2{
  display: flex;
  justify-content: center ;
  margin-top: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
}


#macros-cont3{
  display: flex;
  margin-top: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  
}
#macros-cont5{
  display: flex;
  justify-content: center;
  margin-top: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  
}

 #submit-button{
    display: flex;
    justify-content: center;
    margin: auto;
}

/*home 'button'' link */

#home, #newDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(146, 211, 17);
   

}

#home-link{

  text-decoration: none;
  color: #006633;

}

#exercises {
  /* display: flex;
  justify-content: center; */
  color: #0e0d0d;
  background-color: green;

}

p {
  display: block;
  text-align: center;
}


.button {
    padding: 15px 30px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 8px;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .button:hover {
    transform: scale(1.05);
  }

  /* Greenish Button */
  .greenish {
    background: linear-gradient(145deg, #79d680, #006633);
  }

  /* Blueish Button */
  .blueish {
    background: linear-gradient(145deg, #33ccff, #004488);
  }

  /* Reddish Button */
  .reddish {
    background: linear-gradient(145deg, #ff6666, #990000);
  }

  /* Red-Yellow-Orange Button */
  .red-yellow-orange {
    background: linear-gradient(145deg, #ff6600, #ffcc33, #ff0000);
  }

  /* Greyish Button */
  .greyish {
    background: linear-gradient(145deg, #cccccc, #666666);
  }


  /* below is style done by geppetto for a different project
  I't trying to modify myone into something similar */

  header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

#content {
    width: 80%; /* Set the width of the content */
    margin: 0 auto; /* Center the content horizontally */
    text-align: center; /* Center the text content */
    padding: 20px; /* Add some padding for spacing */
}
nav {
    background-color: #f4f4f4;
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

.result-div {
  font-weight: bold;
  text-align: center;
}