*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


.cc-container { max-width: 600px; margin: 40px auto; padding: 20px; background: #f9f9f9; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); font-family: 'Montserrat', sans-serif; }
.cc-container h1 { text-align:center; margin-bottom:20px; }
.cc-row { display:flex; flex-wrap:wrap; margin-bottom:15px; gap:10px; }
.cc-row div { flex:1 1 150px; display:flex; flex-direction:column; }
.cc-row label { margin-bottom:5px; font-weight:600; }
.cc-row input, .cc-row select { padding:10px; border-radius:5px; border:1px solid #ccc; font-size:16px; }
.cc-btn { display:block; width:100%; padding:12px; font-size:18px; background:#6c5ce7; color:white; border:none; border-radius:8px; cursor:pointer; transition:0.3s; }
.cc-btn:hover { background:#5a4dcf; }
.cc-results { margin-top:30px; padding:20px; background:#fff3e0; border-radius:10px; display:flex; flex-direction:column; gap:12px; }
.tc-table-container {
  max-width: 900px;
  margin: 40px auto;
  font-family: 'Montserrat', sans-serif;
}

.tc-table-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.tc-table-responsive {
  overflow-x: auto;
}

.tc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 400px;
}

.tc-table th, .tc-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.tc-table th {
  background-color: #6c5ce7;
  color: #fff;
}

.tc-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tc-table tbody tr:hover {
  background-color: #dfe6e9;
}

.tc-table td.tc-calories {
  font-weight: bold;
  color: #e17055;
}

.tc-category td {
  background-color: #fdcb6e;
  color: #2d3436;
  font-weight: bold;
  text-align: center;
}


.bntable-responsive {
  overflow-x: auto;
  margin-top: 20px;
}

.bntable {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
}

.bntable th,
.bntable td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.bnheader {
  background-color: #6c5ce7;
  color: white;
}

.bnactivity {
  text-align: left;
  font-weight: 500;
}

.bncell {
  font-weight: 400;
}

.bntable tr:nth-child(even) {
  background-color: #f2f2f2;
}

.bntable tr:hover {
  background-color: #ddd;
}
.bncontainer{
	text-align:center
}

@media screen and (max-width: 768px) {
  .bntable th, .bntable td {
    padding: 8px;
  }
}
@media screen and (max-width: 768px) {
  .tc-table th, .tc-table td {
    padding: 10px;
  }
  .cc-container {
    max-width:95%;
    width:95%;
    margin: 20px auto;
    
}
.cc-row input, .cc-row select {width:100%}
.cc-container h1 {
    font-size: 24px;
}
  
}