/* Reset some default styles */


/* Style header */

.ctwr {
   text-align: center;
}

.step1 {
  background-color: #faebd6; width: 5000px; font-weight:bold; text-align: center;
}

.step2 {
  background-color: #faebd6; font-weight:bold; margin-top: 30px; margin-bottom: 30px; text-align: center;
}

.step3 {
  background-color: #faebd6; font-weight:bold; margin-top: 30px; margin-bottom: 30px; text-align: center;
}

/* Style main content */
main {
    padding: 2rem;
    
}

#total-div {
    border: 6px solid #5C4033;
}

/* Style colored div */
#coloredDiv {
    max-width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 0;
}

/* Style image rows */
.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}

.result-background {
    background-color: #E59E3D;
    margin-top: 5px;
/*     margin-top: 10px; */
  }

#equationDisplay {
    background-color: #E59E3D;
    text-align: center;
    font-size: 18px;
	padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5vh; /* Optional: Set the height of the container for vertical centering */
    margin: 0; /* Remove any default margin */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}


/* Style image items */
.image-item {
    width: calc(20% - 20px);
    margin: 10px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-item img {
    max-width: 100%;
    height: auto;
}

/* Style clickable image text */
.image-text {
    background-color: #E59E3D;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
	border: solid;
	border-color:#5C4033;
    margin-top: 5px;
	font-size: 13px;
    text-decoration: none !important;
    cursor:pointer;
} 

/* Additional styles for button placement */
.image-item {
    width: calc(20% - 20px);
    margin: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .image-text {
    background-color: #E59E3D;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin-top: 10px; 
    text-decoration: none !important;
    cursor: pointer;
} */

.coffee-quantity {
    margin-top: 5px;
    color: #333;
    font-weight: bold;
}

/* #complete {
    background-color: #FAEBD6;
} */

#numCupsInput {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

#numCups {
    padding: 5px;
    width: 50px;
}

#numCups:focus {
    outline: none;
}


#intensityResult {
/*     margin-top: 10px; */
/*     margin-bottom: 5px; */
    text-align: center;
    font-size: 18px;
    padding-bottom: 50px; 
}

/* #complete {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
} */
/* #complete {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontal centering */
   /* justify-content: center; /* Vertical centering */
    /*height: 100vh; /* Make sure the container takes up the full viewport height */
   /* max-width: 100%; /* Ensure that the container doesn't exceed the viewport width */
    /* overflow: hidden; /* Hide any content overflowing the container */
/* } */*/*/

#complete {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center; /* Center horizontally */
    max-width: 100%; /* Ensure responsiveness */
    overflow: hidden; /* Hide any content overflowing the container */
}
#intensityInput {
    text-align: center; /* Center-align the contents within intensityInput */
/*     margin-top: 20px; /* Add some top margin for spacing */
}


button {
    background-color: #E59E3D;
    color: white;
    padding: 5px 30px;
    border: solid;
	border-color:#5C4033;
    border-radius: 10px;
    cursor: pointer;
}

button:hover {
    background-color: #C48228;
}


.image-item {
    white-space: nowrap; /* Prevent text from wrapping to the next line */

    text-overflow: ellipsis; /* Add an ellipsis (...) to indicate truncated text if it overflows */
    max-width: 100%; /* Ensure the button doesn't expand beyond its container */
}


/* Adjust button sizes */
@media (max-width: 800px) {
    /* .image-item {
        width: calc(33.33% - 20px);
    } */
}
/* 
#intensityInput {
    text-align: center; /* Center align the content horizontally }*/

    .intensity-buttons {
        margin-bottom: 10px; text-align: center;/* Add some spacing between the intensity buttons and Calculate button */
    }
    
    #calculate-button {

  background-color: #5C4033; /* Greyish color */
  color: white; /* White text color */
  padding: 10px 20px; /* Add padding for a better appearance */
  border: none; /* Remove the button border */
  margin-bottom: 30px;

  display: block;
  margin: 0 auto;

  text-align: center;
  cursor: pointer; /* Change cursor to pointer on hover */

}

/* Additional styles for smaller screens (e.g., mobile phones) */
@media (max-width: 768px) {
    .image-row {
        flex-direction: column; /* Change to column layout */
    }

    .image-item {
        width: 80%; /* Adjust width for single-column layout */
    }
}