@font-face {
    font-family: "Comic Neue";
    src: url('../font/ComicNeue-Regular.ttf');
	font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Comic Neue";
    src: url('../font/ComicNeue-Bold.ttf');
	font-style: normal;
    font-weight: 600;
}

body {
  font-family: "Comic Neue", "Comic Sans MS", sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 60%;
  max-width: 1200px;
  margin: 2rem auto;
  font-size: 17px;
}

.container-2 {
	display: flex;
	justify-content: flex-start; /* Keep plant picker aligned to the left */
	align-items: center; /* Vertically center the items */
	width: 100%; /* Ensure full width */
	margin-bottom: 1rem; /* Add space below the container */
}

h1 {
  text-align: center;
  font-weight: 600;
}

.picture {
	display: flex;
	justify-content: center; /* Horizontally center the image */
	align-items: center; /* Vertically center the image */
	width: 100%; /* Let the image container take up full width of the container */
	max-width: 400px; /* Limit the image size */
	margin: 0 auto; /* Center the whole container */
}

.picture img {
	display: block; /* Remove any inline spacing */
	width: 100%; /* Make sure the image fills its container */
	max-width: 400px; /* Control the max width of the image */
	height: auto; /* Keep the aspect ratio of the image */
	margin: 0 auto; /* Ensure the image is centered */
}

.plant-picker {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 300px;
  font-size: 18px;
  padding-right: 20px;
}

.plant-picker label {
  margin-bottom: 5px;
  font-weight: 600;
}

.matrix-container {
  margin: 1rem auto;     /* top-bottom spacing, horizontal centering */
  overflow-x: auto;
  width: 90%;
  margin-top: 1rem;
  max-width: 860px;
}

table {
  margin-top: 0.8rem;
  width: 100%;
  border-collapse: collapse;
  background-color: #8b5e34;
}

th, td {
  border: 1px solid #666;
  text-align: center;
  border: 1px solid #ddd;
  color: #fff;
}

th {
  font-size: 18px auto;
  font-weight: 600;
  background-color: #8b5e34;
  padding: 25px 4px 25px 4px;
}

td {
  font-size: 3rem;
  width: 60px;
  height: 60px;
}

select {
  padding: 5px;
  font-size: 1rem;
}

/* Adjust Select2 appearance */

.select2-container .select2-selection .select2-results {
  font-family: "Comic Neue", "Comic Sans MS", sans-serif !important;
}

.select2-container {
  width: 100% !important;
  
}

.select2-selection {
  height: 40px !important;
  font-size: 1rem;
}

.select2-results__option {
  font-size: 1rem !important;
}

@media (max-width: 480px) {
  /* Styles for screens smaller than or equal to 480px wide (usually for smaller mobile screens) */
  /* Add your custom styles here */
	.container {
	  width: 95%;
	}
	
	.plant-picker {
	  width: 50%;
	  
	}
	
	.matrix-container table {
		font-size: 0.8rem auto;
		width: 100%;
		table-layout: fixed;
		word-wrap: break-word;
		/*min-width: 620px;		/*minimum width of table*/
	}
	.matrix-container {
		width: 100%;
	}

	th {
		padding: 25px 4px 25px 4px;
	}

	td {
		font-size: 2rem;
		padding: 3px;
	}
}


@media (min-width: 481px) and (max-width: 1500px) {
  /* Styles for screens smaller than or equal to 768px wide (typically tablets and mobile devices) */
  /* Add your custom styles here */
  	.container {
	  width: 90%;
	}
	
	.matrix-container table {
		font-size: 0.8rem auto;
		width: 100%;
		table-layout: fixed;
		word-wrap: break-word;
		/*min-width: 620px;		minimum width of table*/
	  }
	  
	.matrix-container {
		width: 100%;
	}

	td {
		font-size: 2.5rem;
	}
	
	th {
	  padding: 25px 4px 25px 4px;
	}


}