/*  
Author: Cristy Pelham 
File Name: styles.css
Date: 11/28/2023
*/

 /*This rule will normalize the default styles in HTML*/

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

/* Style rules for class and id selectors */

/* Style rule for the header area */
.mobile h1, .mobile h3 {
    padding: 2%;
    text-align: center;
    font-family: 'Emblema One', serif;
}

 /* Style rules for nav content */
nav {
   background-color: darkorange;
 }

 nav ul {
   list-style-type: none;
   text-align: center;
 }

 nav li {
   display: block;
   font-size: 1.5em;
   font-family: 'Emblema One', serif;
   font-weight: bold;
   border-top: 0.5px solid black; 
 }

 nav li a {
   display:block;
   color: #F5F5F5;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   padding-left: 2em;
   padding-right: 2em;
   text-decoration: none;
 }

 /* Style rules for body and images */

 /* Style rules for main content */
 main {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 2%;
   font-size: 1.1em;
   font-family: 'Emblema One', serif;
 }

 main p {
   font-size: 1.25em;
 }

 main h3 {
   padding-top: 2%;
 }

 main ul {
   list-style-type: square;
 }

.link {
   color: #E0E0E0;
   text-decoration: none;
   font-weight: bold 
   font-style: italic;
 }

 .action {
   font-size: 1.75em;
   font-weight: bold;
   text-align: center;
 }

 .round {
   border-radius: 6px;
 }

figure {
  border: 4px solid;
  box-shadow: 6px 6px 10px lavender;
  max-width: 400px;
  margin: 2% auto;
}

figcaption {
  background-color: #B0BEC5;
  color: midnightblue;
  font-style: italic;
  padding: 2px;
  text-align: center;
  border-top: 4px solid #2alf14;
}

header {
  padding: 2%;
  color: #110934;
  text-align: center;
}

body {
     background: linear-gradient(white, dodgerblue);
 }

 img {
   max-width: 50%;
   display: block;
 }

 /* Style rules for paragraphs with header 1 */
 p.center {
   text-align: center;
   color: darkgrey;
 }

 p.large {
   font-size: 50%;
 }

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

 footer a {
   color: #f3e6d8;
   text-decoration: none;
 }


/* Style rule for show mobile class and hide tab-desk class */
.mobile {
    display: block;
}

.tab-desk {
    display: none;
}

/* Styles for Mobile Layout */
figure {
  border: 1px solid;
  padding: 2px;
  margin: auto;
}

figcaption {
  background-color: darkgray;
  color: midnightblue;
  font-style: italic;
  padding: 2px;
  text-align: center;
}

#info ul {
  margin-left: 10%;
}

 #contact, form h2 {
   text-align: center;
 }

/* Media Query for Tablet Viewport */
@media screen and (min-width: 488px), print {

  figure {
    border: 1px solid;
    padding: 2px;
    margin: auto;
  }

  figcaption {
    background-color: dimgray;
    color: black;
    font-style: italic;
    padding: 2px;
    text-align: center;
  }

/* Tablet Viewport: Style rules for tablet desktop */
  @media screen and (min-width: 620px), print {

  .tablet-desktop {
        display: none;
} 
   .mobile {
        display: none;
    }

/* Tablet Viewport: Style rules for nav area */
      nav li {
        border-top: none; 
        display: inline-block;
        font-size: 1.25em;
        margin: 0.5%;
  } 

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

nav li a {
  padding: 0.5em;
}
    
.intro {
  background-color: skyblue
}

.grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

  aside {
    grid-column: 1 / span 2;
}

    /* Style rules for form elements */
    fieldset {
      margin-bottom: 2%;
    }

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

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

    .btn {
      border: none;
      margin: 0 auto;
      display: block;
      padding: 2%;
      background-color: darkgrey;
      font-size: 1.25em;
      border-radius: 5px;
      color: black;
    }


/* Media Query for Large Desktop Viewport */
     @media screen and (min-width: 1441px)

    #container {
       width: 1440px;
       margin: 0 auto 0 auto;
       display: block;
    }

    figure {
      border: 1px solid;
      padding: 2px;
      margin: auto;
    }

    figcaption {
      background-color: darkgray;
      color: dimgray;
      font-style: italic;
      padding: 2px;
      text-align: center;
    }
    
 /* Hide the tablet-desktop class */
 .tablet-desktop {
    display: none;
 }

 header h1 {
   text-align: center;
   font-size: 3em;
   font-family: 'Emblema One', serif;
   padding: 3%;
   color: black
   }

h1 {
  color: white;
  text-shadow: 2px 2px 4px blue;
}

  /* Media Query for Desktop Viewport */
  @media screen and (min-width: 769px), print {

  /* Desktop Viewport: Style rules for header */
    header {
      width: 25%;
      float: left;
      }

    /* Desktop Viewport: Style rules for nav */
      nav ul {
        text-align: right;
      }  

    /* Desktop Viewport: Style rules for nav */
        nav li {
            border-radius: 0;
      }

        nav li a {
            display: block;
            padding: 0.7em;
        }

        nav li a:hover {
            color: #4424d6;
            background-color: #e5e0fa; 
        }
    /* Desktop Viewport: Style rules for the main content */
        main {
            border-style: none;
            margin-bottom: 3em,0;
            overflow: auto;
        }
    
    .col-content {
        width: 30%;
        float: left;
        padding: 1.5%;
    }

    /* Desktop Viewport: Style rule for footer */
        footer {
          clear: left;
         
    }
  
    /* Style rule for the container */
    #container {
      width: 80%;
      margin: 0 auto;
    }

    body {
      background-color: ; darkgray;
      font-family: 'Emblema One', serif;
    }

    h2 { 
      text-align: center;
      color: black;
    }

   table {
      width:  700px;
      height: 500px;
      margin: auto;
      border: 4px solid #2alf14;
      box-shadow: 10px 10px 5px midnightblue;
      border-collapse: collapse;
    }

    table tr td {
      border: 1px solid darkorange;
    }

    tr:nth-child(odd) {
      background-color: silver;
    }

   table thead th {
      background-color: darkblue;
      border: 1px solid white;
      color: white;
    }

   table th, td {
      padding: 8px;
    }

    table{
      border-collapse: collapse;
    }

    p {
      color: black;
      text-align: center;
      padding-top: 15px;
    }

    <style>

  @media only screen and (max-width: 800px) {
    table {display: block;
  }

    table, thead, tbody, tfoot, tr, th, td {
      display: block; 
  }

  @media only screen and (min-width: 1024px) {
      table { display: table; }
      thead { display: table-header-group; }
      tbody { display: table-row-group; }
      tfoot { display: table-footer-group; }
      tr { display: table-row; }
      th, td { display: table-cell; }
  }  

     td:first-child {
        box-sizing: border-box;
        width: 50%;
        float: left;
        padding: 10px;
    }

    td:nth-child(2), td:nth-child(3), td:nth-child(4) {
        padding: 10px;
    }

    td {
        padding-left: 50px;
        position: relative;
        border-bottom: 1px solid #ddd;
        border: none;
    }  

  }