/*
Student Name: Lorin Jones
File Name: styles.css
Date: 10/02/2023
*/

/* CSS Reset */
  body, header, nav, main, footer, img, h1, h3, article, section, figure, figcaption,table, tr, th {
    margin:0;
    padding:0;
    border:0;
  }

/*style rule for body and image*/
  body{
    background-color: #d3ebf5;
  }
    img, figure{
      max-width: 100%;
      display: block;
      text-align: center;
      margin: 0 auto;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/*style rule for header content*/
header h1{
  text-align: center;
  font-size: 3em;
  font-family: Georgia, Times, serif;
  padding: 3%;
  color:#544836;
}

p, figcaption{
  text-align: center;
  font-size: 1.5em;
  color:#544836;
}

/*style rules for navigation area*/
nav{
  background-color: #d3ebf5;
  text-align: center;
}
  nav ul{
    list-style-type: none;
    margin: 0;
    text-align: center;
  }
  nav li{
    display: inline-block;
    font-size: 1.2em;
    font-family: B612;
    font-weight: bold;
    text-align: center;
    color:#544836;
  }
nav li a:visited{
  color:#544836;
}

/*style rules for main content*/
main{
  padding:2%;
  font-family: CrimsonPro;
  overflow: auto;
  color:#544836;
  border: 2px solid #544836;
  border-radius: 10px;
}
article {
  text-align: center;
  font-family: Georgia, Times, serif;
  padding: 3%;
  color:#544836;
}
table{
  width: 80%;
  margin: 0 auto;
  border: 3px solid
}
table, tr, th{
  text-align: center;
}
.grid{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
  main h3{
    padding-top: 2%;
    font-size: 1.85em;
    text-align: center;
    color:#544836;
  }
  main li{
    text-align: left;
    font-size: 1.1em;
    background-color: #d3ebf5;
    color:#544836;
  }
iframe{
  width: 80%;
  margin: 0 auto;
  display: block;
  border: 2px solid #544836;
  border-radius: 10px;
  align-items: center;
}

/*style rules for footer content*/
footer {
  text-align: center;
  font-size: 0.85em;
  background-color: #544836;
  color: #d3ebf5;
  padding: 1% 0;
}

footer a {
  color: #d3ebf5;
  text-decoration: none;
}
footer img{
  width: 15%;
  height: 15%;
}

/* Styling for visited links */
footer a:visited {
  color: #FFFFFF; 
}

/* Style rules for form elements */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

fieldset,input {
    margin-bottom: 2%;
}

form fieldset legend {
    font-size: 1.25em;
    font-weight: bold;
}

label {
    display: block;
    padding-top: 3%;
}

.btn {
    border: none;
    margin: 0;
    display: inline-block;
    padding: 5%;
    background-color: #544836;
    font-size: 1em;
    border-radius: 10px;
    color: #fff;
}

/* Style rules for mobile viewport */
  section {
    display: block;
}
  .btn {
    display: block;
    grid-column: 2 / span 2;
    padding: 3%;

/* Media Query for Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
   /* Hide mobile-specific content */
  section {
    display: inline-block;
  }
}

/* Media Query for Desktop */
@media screen and (min-width: 1025px) {
   /* Hide mobile-specific content */
  .tablet-desktop {
    display: block;
  }
  .tablet-desktop-content:hover {
    color: #544836;
  }
}