/*The font type and other styles are defined for the entire web page.*/
*{margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: Candara;}

/* This makes the scroll feature smooth.*/
html {scroll-behavior: smooth;}

/* This describes the background color of the web page.*/
body {background-color: rgb(217, 217, 217);}

/* This describes the margin spacing for the paragraph.*/
p {margin: 10px;}

/* These all describe how the navigation menu is created.*/
.header {width: 100%; height: 80px; display: block; background-color: rgb(38, 219, 156);}

.innerheader {width: 1000px; height: 100%; display: block; margin: 0 auto;}

.title {height: 100%; display: table; float: left;}

.title h1 {height: 100%; display: table-cell; vertical-align: middle; font-size: 32px; color: white;}

.navigation {float: right; height: 100%;}

.navigation li {height: 100%; display: table; float: left; padding: 0px 20px;}

.navigation li a {display: table-cell; vertical-align: middle; height: 100%; font-size: 18px; color: white;}

/* This describes the size and background color of the background boxes that surround each section.*/
.table, .tictactoe, .fieldtypes {width: 70%; background-color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 15px; margin: 15px auto; display: flow-root;}

/* This describes the font color and styling for the headers for each section.*/
.table h2, .tictactoe h2, .fieldtypes h2 {margin-bottom: 20px; color: rgb(38, 219, 156); border-bottom: 2px solid rgb(38, 219, 156); padding: 20px;}

/* This describes the font color and background color of the header in the table.*/
.usstates thead {background-color: rgba(38, 219, 156, 0.7); color: white;}

/* This describes the table features.*/
.usstates, .ttt {table-layout: fixed; width: 80%; margin: 10px auto; border-collapse: collapse; text-align: center;}

/* This describes the font size in each table.*/
.usstates {font-size: 20px;}
.ttt {font-size: 20px;}

/* This describes the font size and wight for the captions for each table.*/
.usstates caption, .ttt caption {font-size: 16px; font-weight: bold; margin-bottom: 10px;}

/* This describes the padding and alignment for each cell in the table.*/
.usstates th, .usstates td, .ttt th, .ttt td {padding: 16px; border: 1px solid #000000; text-align: center;}

/* This describes how the image is sized and how it will be enlarged when you hover over them.*/
.image {max-width: 100%; height: auto; transition: transform 0.3s ease;}

.image:hover {transform: scale(1.1);}

/* This describes the font style for the image credits.*/
.credits {text-align: center; font-style: italic; font-size: 10px; margin-top: 10px;}

/* This describes the padding between each field question.*/
fieldset {border: none; padding: 0 10px; margin-bottom: 20px;}

/* This describes the margin spacing between each field option.*/
fieldset input {margin: 0 10px;}

/* This describes the styling for the Return to Top link.*/
#return {text-align: center; margin-top: 10px;}

#return a {padding: 8px 20px; display: inline-block; background-color: rgb(38, 219, 156); border-radius: 20px;}

/*This describes the color of the link on its own and when you hover over the link.*/
a:link {color: teal}
a:hover {color: gold;}