/* Overall page styling */
body {
background-color: #fff8f0;
font-family: Arial, sans-serif;
color: #3b2f2f;
margin: 30px;
}

/* Main title */
h1 {
text-align: center;
color: #8b4a2f;
}

/* Section headings */
h2 {
text-align: center;
color: #5c4033;
margin-top: 35px;
}

/* Intro paragraph */
.intro {
text-align: center;
font-size: 18px;
}

/* Main table styling */
table {
border-collapse: collapse;
width: 85%;
margin: 20px auto;
background-color: white;
}

/* Table caption */
caption {
padding: 10px;
font-weight: bold;
}

/* Table cells and headings */
th, td {
border: 2px solid #8b4a2f;
padding: 12px;
text-align: center;
vertical-align: middle;
}

/* Table heading row */
th {
background-color: #d9a66c;
color: white;
}

/* Images inside table */
img {
width: 180px;
height: 120px;
object-fit: cover;
border-radius: 10px;
}

/* Tic tac toe table */
.tictactoe {
width: 250px;
height: 250px;
}

/* Tic tac toe cells */
.tictactoe td {
font-size: 40px;
width: 80px;
height: 80px;
}

/* Form styling */
form {
width: 70%;
margin: 20px auto;
background-color: #ffffff;
border: 2px solid #d9a66c;
border-radius: 15px;
padding: 20px;
}

/* Form labels and inputs */
label {
display: block;
margin-top: 12px;
font-weight: bold;
}

input, select, textarea {
margin-top: 5px;
padding: 8px;
width: 95%;
}

/* Keep checkbox inputs small */
input[type="checkbox"] {
width: auto;
}

/* Color picker */
input[type="color"] {
width: 70px;
height: 40px;
}

/* Meter bar */
meter {
width: 95%;
height: 25px;
}

/* Submit button */
input[type="submit"] {
background-color: #8b4a2f;
color: white;
border: none;
padding: 12px;
margin-top: 20px;
cursor: pointer;
}