html 
{
  font-family:Georgia, 'Times New Roman', Times, serif;
}

body 
{
  font-family:Georgia, 'Times New Roman', Times, serif;
  margin: 0;
}

h1
{
  align-content:center;
  font-family:Georgia, 'Times New Roman', Times, serif;
  padding:20px;
}


#divHeader
{
  margin:5px;
  height:100px;
  width:95%;
  background-color:rgb(13, 31, 135);
  color:white;
  font-size:24px;
  font-weight:bold;
  align-self:center;

}

#divRecipes
{
  margin-left:5%;
  margin-top:15px;
  height:100px;
  width:90%;
  background-color:rgb(244, 241, 248);
  color:rgb(20, 3, 3);
  font-size:14px;
  font-weight:normal;
  display:block;
}

#divList
{
  text-align:justify;
  padding:10px;
}

.container
{
  display: flex; /* Enables flexbox */
  gap: 3px; /* Adds spacing between divs */
}

.box
{
  margin-top:5px;
  margin-left:5px;
  height:90%;
  width:50%;
  background-color: rgb(239, 233, 233) ;
  text-align: center;
}


.ingredientBtn
{
  font-family:Georgia, 'Times New Roman', Times, serif;
  background-color:rgb(96, 62, 62);
  color:white;
  width:300px;
  height:30px;
  margin-left:100px;
  border-radius:5px;
  font-size:18px;
  cursor:pointer;
}


.ingredientButton:focus
 {
  outline: none;
}

label 
{
  font-weight: normal;
  margin: 0.5rem 0;
  color: #1b0404;
  
}

#inpSearchStr 
{
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size:14px;
  width:200px;
  height:10px;
  padding: 1%;
  background-color: #e3d3d3;
  color:black;
  margin-left:500px;
  border-radius:6px;
}

input:focus {
  outline: none;
  background: #fff1c4;
}


.btn {
  font-family:Georgia, 'Times New Roman', Times, serif;
  padding: 10px;
  border: 1px solid #00329e;
  color: rgb(17, 8, 8);
  border-radius: 6px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  width:200px;
  height:40px;
  margin: 0 0.5rem;
}

.btn:hover,
.btn:active,
.ingredientButton
{
  background-color: #93857a;
  border-color: #f67722;
}

.btn--passive {
  color: #00329e;
  background: transparent;
  border: none;
  box-shadow: none;
}

.btn--passive:hover,
.btn--passive:active {
  background: #aec6f8;
}

.btn--danger {
  background: #d30808;
  color: white;
  border-color: #d30808;
}

.btn--danger:hover,
.btn--danger:active {
  background: #ff3217;
  border-color: #ff3217;
}


table 
{
    border-collapse: collapse; /* Ensures borders collapse for a clean look */
}
  
td, th 
{
    width: 300px; /* Fixed width */
    min-width: 300px; /* Ensures it doesn’t shrink */
    max-width: 300px; /* Prevents it from expanding */
    overflow: hidden; /* Hides overflow content */
    text-overflow: ellipsis; /* Adds "..." if content is too large */
    white-space: nowrap; /* Prevents text from wrapping */
    border: 1px normal rgb(160, 103, 103); /* Optional: adds borders */
    text-align: center; /* Optional: centers text */
}