body{
  background-color: rgb(225, 247, 219);
  margin:auto;
}
.table-examples{
  padding-bottom: 5%;
}
header{
  background-color: rgb(6, 206, 209);
  height:100px;
}
header h1{
  text-indent:15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:white;
  padding-top:20px;
}
h2{
  text-indent:40px;
  font-size:30px;
  font-family: monospace;
}
h3{
  text-indent:40px;
  font-size:24px;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
p{
  text-indent:60px;
  font-size:16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  
.normal-table {
  border-collapse: collapse; /*merges table borders together*/
  border: 3px solid rgb(120, 120, 120);
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  margin-left: 5%;
  text-align: center;
  background-color: rgb(225, 247, 219);
}

.normal-table caption {
  caption-side: top; /*location of caption on top of table*/
  padding-bottom: 2%;
  font-weight: bold;
}

.normal-table ul{
  padding-left:25px;
  text-align:left;
}

.normal-table th,
.normal-table td,
.rowspan th,
.rowspan td,
.colspan th,
.colspan td{
  border: 1px solid rgb(160, 160, 160);
  padding: 8px 10px;
}

/*turns 1st column of menu table bold*/
.normal-table td:first-child,
.normal-table th:first-child {
  font-weight: bold;
  font-size:20px;
}
.normal-table thead,
.rowspan thead,
.colspan thead{ 
  background-color:	rgb(97, 218, 208);  
  font-size:20px;
}
.normal-table tbody tr:nth-child(odd),
.rowspan tbody tr:nth-child(odd),
.colspan tbody tr:nth-child(odd){
  background-color: rgb(167, 233, 227);
  
}
/*Text align left*/
.normal-table tbody th:first-child,
.rowspan tbody th:first-child,
.colspan tbody th:first-child{
  text-align:left;
}

.normal-table tbody tr:nth-child(even),
.rowspan tbody tr:nth-child(even),
.colspan tbody tr:nth-child(even){
 background-color: rgb(125, 219, 211);
  
}
.rowspan, .colspan {
  border: 3px solid rgb(120, 120, 120);
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  margin-left: 5%;
  text-align: center;
  background-color: rgb(225, 247, 219);
}

.tic-tac-toe{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5%;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  text-align: center;
  margin-left: 5%;
  border: 2px solid black;
  width: 400px;
  padding: 2%;
  border-radius: 10px;
  background-color: rgb(97, 218, 208);
}
.tic-tac-toe h2{
  /* h2 within .tic-tac-toe will be in row 1 col 1 spanning 2 row and 3 columns */
  grid-area: 1 / 1/ span 1 / span 3; 
}
/*Tic Tac Toe games in grid layout*/
.game {
  grid-row-start: 2;
  border: 2px solid black;
  font-size: 20px;
  letter-spacing: 1px;
  background-color: white;
}
.game td{
  border: 2px solid grey;
}
.game caption {
  caption-side: bottom; /*location of caption around table*/
  padding: 5%;
  font-weight: bold;  
}

.form-section{
  margin-left: 5%;
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
  width: 300px;
  font-size:20px;
  background-color: rgb(167, 233, 227);
}
.drop-form form, 
.choose-color form {
  margin-left: 5%;
  padding: 0.5%;
  margin-bottom:2%;
  font-size: 20px;
  background-color: rgb(97, 218, 208);
  height:30px;
  width: 300px;
  padding:15px;
  border: 1px solid black;
  border-radius: 10px;
}
.check-box form {
  margin-left: 5%;
  padding: 0.5%;
  margin-bottom:2%;
  font-size: 20px;
  background-color: rgb(167, 233, 227);
  height:175px;
  width: 150px;
  padding:15px;
  border: 1px solid black;
  border-radius: 10px;
}

.check-box form label{
  margin-left:15px;
}
.form-section form{
  text-align:right;
}
img{
  height:100px;
  width:150px;
}
footer{
  margin-top:5%;
  margin-bottom:20%;
  background-color: rgb(6, 206, 209);
  height:50px;
  text-indent:20px;
  color:white;
  padding-top:2%;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}