/* Basic Style */
body {
  font-family: Arial, sans-serif;
  margin: 50px;
}
h1 {
  text-align: center;
  color: #4b0082; /*Indigo*/
}
p {
  text-align: center;
  padding-bottom: 50px;
}
h2 {
  color: #4b0082; /*Indigo*/
  margin-top: 50px;
  padding-left: 100px
}
footer{
  text-align: center;
  border-top: 1px solid gray;
  margin-top: 50px;
  padding-top: 10px;
  color: gray;
  font-size: 0.9rem;
}

/* Table Style */
table {
  border: double #4b0082 5px;
  margin-bottom: 20px;
}
th {
  font-family: cursive;
  border: solid black 1px;
  background-color: #6E6177; /*purple grey*/
  color: white;
  padding: 10px;
}
td {
  border: solid black 1px;
  padding: 5px;
  text-align: center;
}
caption {
  font-family: cursive;
  font-size: 18px;
  background-color: #333; /*Charcoal*/
  color: white;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}
img {
    width: 100px;
    height: auto;
    border-radius: 8px;
}
/* Image zoom */
img:hover {
  transform: scale(2);
  transition: transform 1s ease-in-out;
}

.basic {
  border-collapse: collapse;
}

.rowspan {
  border-collapse: collapse;
}

.colspan {
  border-collapse: separate;
}

.tictactoe {
  border: solid #4b0082 5px;
  margin: auto; /*Center table*/
} 

.tictactoe td {
  border-collapse: separate;
  width: 40px;
  height: 40px;
}
/* Hover Effect for Tic-Tac-Toe */
.tictactoe td:hover {
  background-color: #e1b3ff; /*light purple*/
  cursor: pointer;
  transform: scale(1.1);
}
.pets {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px; /* Optional — keeps spacing balanced */
}
/* Remove border around pet images */
.pets td {
  border: none;
  background-color: #D9CAE2;
}

/* Basic and rowspan table side-by-side */
.dates {
  display: flex;
  gap: 100px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Line separating tables section */
.tables {
  border-bottom: 3px solid black;
  border-top: 3px solid black;
  padding-bottom: 50px;
}
/* Form Style */
.form {
  font-weight: bold;
  margin: 70px auto; /*center*/
  max-width: 500px;
  background-color: #f5e6ff; /*light purple*/
  border: 3px solid #4b0082; /*indigo*/
  border-radius: 10px;
  padding: 25px;
}
.form h3 {
  text-align: center;
  color: #4b0082;
  margin-bottom: 25px;
}
.form div {
  margin-bottom: 20px;
}
/* Submit Button */
.form input[type="submit"] {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #4b0082;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.form input[type="submit"]:hover {
  background-color: grey;
}