img {
  width: 3cm;
  height: 3cm;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}

table {
  width: 90%;
  margin: auto;
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.8);
}
th, td {
  padding: 8px;
  border: 1px solid #ccc;
}
th#tiempo {
  cursor: pointer;
  color: darkblue;
}
li { color: darkgreen; }

input#c1:checked ~ table tbody tr.c1 { display: table-row; }
input#c1:not(:checked) ~ table tbody tr.c1 { display: none; }
input#c2:checked ~ table tbody tr.c2 { display: table-row; }
input#c2:not(:checked) ~ table tbody tr.c2 { display: none; }
input#c3:checked ~ table tbody tr.c3 { display: table-row; }
input#c3:not(:checked) ~ table tbody tr.c3 { display: none; }
input#c4:checked ~ table tbody tr.c4 { display: table-row; }
input#c4:not(:checked) ~ table tbody tr.c4 { display: none; }

body {
  background-image: url('https://plus.unsplash.com/premium_photo-1701167435570-8c3239951f74?q=80&w=1170&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #333;
  text-align: center;
  margin: 0;
  padding: 20px;
}

h1, h2 {
  color: #a52a2a;
  text-shadow: 1px 1px 3px #fff;
}
button {
  background-color: #f3b23a;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #d18e12;
}