/*Body*/
* {
  box-sizing: border-box;
}

body {
  /* max-width: 800px; */
  /* margin: auto; */
  background-color: hwb(212 25% 61%);
  color: white;
}
h1 {
  font-family: "Signika", cursive;
}

h2,
h3 {
  font-family: "Architects Daughter", cursive;
}

img {
  width: 100%;
}

.container {
  display: grid;
  grid-template-columns: 20% 60% 20%;
}

.containerMitt {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: 20px;
}

/*Chilling cafe title*/
.head-title {
  text-align: center;
  color: orange;
  font-size: 3em;
  margin-top: 20px;
}

/*First image - pouring coffee*/
.pouring-coffee-img {
  /* width: 100%; */
  border: solid white 4px;
  border-radius: 10px;
}

.menu-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* margin: 40px 0; */
  gap: 20px;
}

.menu-img {
  /* width: 200px; */
  /* height: 100%; */
  border: solid white 4px;
  border-radius: 10px;
}

.menu-cont h2 {
  color: orange;
  margin-bottom: 10px;
  text-align: center;
  font-size: 2em;
}

.menu-cont ul li {
  font-size: 1.5em;
  list-style-type: circle;
  margin-left: 30%;
}

/*Muffins section*/
.muffin-cont {
  border: 4px solid white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  max-width: 100%;
  background-color: hwb(214 18% 73%);
}

.muffin-title {
  color: orange;
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
}

.muffin-table {
  width: 84%;
  background-color: rgb(153, 153, 153);
  border-collapse: collapse;
  margin: auto;
  font-family: "open sans", sans-serif;
}

.muffin-table thead th {
  background-color: #9e9e9e; /* Darker grey for the header */
  color: #333;
  font-size: 2rem;
  vertical-align: middle;
}

.muffin-table th,
.muffin-table td {
  padding: 12px;
  border-bottom: 1px solid rgb(255, 255, 255);
  color: gray;
  background-color: rgb(255, 255, 255);
}

.muffin-table tr:nth-child(even) {
  background-color: #ffffff;
}

.StorMuffin-img {
  width: 50px;
}

.LitenMuffin-img {
  width: 35px;
}

.muffin-table td:first-child {
  text-align: center;
}

.muffin-table tbody tr:nth-child(odd) td {
  background-color: #d6d5d5;
}

.coffee-bean-img {
  border: 4px solid rgb(255, 255, 255);
  border-radius: 10px;
}

hr {
  margin: 30px 0 30px 0;
}

/*Footer*/
footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.footer-cont h3 {
  font-size: 1.2em;
  color: orange;
}

.footer-cont ul {
  list-style-type: none;
  padding: 0;
}

.follow-socials {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.follow-socials img {
  height: auto;
  width: 40px;
}