html {
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border: 3px solid purple;
    }
    
    thead th:nth-child(1) {
      width: 25%;
    }
    
    thead th:nth-child(2) {
      width: 30%;
    }
    
    thead th:nth-child(3) {
      width: 10%;
    }
    
    thead th:nth-child(4) {
      width: 25%;
    }
    thead th:nth-child(4) {
      width: 10%;
    }
    
    
    th, td {
      padding: 20px;
    }
    /* typography */
    
    th {
      letter-spacing: 2px;
    }
    
    td {
      letter-spacing: 1px;
    }
    
    tbody td {
      text-align: center;
    }
    
    tfoot th {
      text-align: right;
    }
    /* graphics and colors */
    
    thead, tfoot {
      background: url(../images/leopardskin.jpg);
      color: white;
      text-shadow: 1px 1px 1px black;
    }
    
    thead th, tfoot th, tfoot td {
      border: 3px solid purple;
    }
    /* zebra striping */
    
    tbody tr:nth-child(odd) {
      background-color: #ff33cc;
    }
    
    tbody tr:nth-child(even) {
      background-color: #e495e4;
    }
    
    tbody tr {
      background-image: url(../images/noise.png);
    }
    
    table {
      background-color: #ff33cc;
    }
    /* caption */
    
    caption {
      text-decoration: underline wavy hotpink;
      padding: 20px;
      font-style: italic;
      caption-side: bottom;
      color: #666;
      text-align: right;
      letter-spacing: 1px;
    }
    
    
    
    
/*       
    h1 {
      width: fit-content;
        color: hotpink;
        font-size: 2em;
        font-family: Georgia, 'Times New Roman', Times, serif;
        border-bottom: 10px dotted purple;
    } */
    
    
    
    a:link, a:visited {
        color: #fb6542;
    }
    
    a:hover{
      text-decoration: none;
      color: purple;
    }
     .nav a:hover {
        text-decoration: none;
    color: orangered;
    }

        
    div p ,#contact{
    background-color:#eeeeee;
    border: 5px solid purple;
    padding: 25px;
    border-radius: 1em;
    width: 50%;
    }
    html{
      background: linear-gradient(90deg, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
    }
    
    h2{
    border:10px solid purple;
      border-bottom: 10px double orangered;
      padding:20px;
      width:50%;
      margin-top:0px;
    }
    /* h2{
      background-color: blueviolet;
      padding:15px;
      border:3px solid lime;
      margin: 0px;
      width: fit-content;
    
    } */
    #prof{
width: 100%;
margin-bottom:1em;
    }
    
          #navList {
            width: fit-content;
        list-style-type: none;
        margin: auto;
        padding: 0 0 10vh 0;
        /* background-color: #333; */
        overflow: hidden;
        

      }
    .nav {
        float: left;
         width:13vw; 
      }
      
      .nav a{
        display: block;
         color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none; 
      } 
      #active {
        background-color: purple;
      }
   
      article {
        display: flex;
      }
      .picHolder{
        max-width:380px;
      }
      .content {
        font-size: 16px;
        padding-left: 20px;
      } 
      footer{
        background-color: #333;
        color: white;
        text-align: center;
        margin-bottom: 0px; 
      
      }
      body{
       display: flex;
       flex-direction: column;
        margin-bottom: 0px;
        padding-bottom: 0px;
      }

@media (max-width: 600px) {
  body, html {
    padding: 0;
    margin: 0;
    font-size: 15px;
  }
  #navList {
    width: 100%;
    padding: 0;
  }
  .nav {
    float: none;
    width: 100%;
  }
  .nav a {
    padding: 10px;
    font-size: 1em;
  }
  article {
    flex-direction: column;
    align-items: center;
  }
  .picHolder {
    max-width: 90vw;
    margin: auto;
  }
  .content {
    box-sizing: border-box;
    width: 95vw;
    max-width: 100%;
    padding: 10px;
    margin: 0 auto;
    overflow-wrap: break-word;
  }
  h2 {
    box-sizing: border-box;
    width: 95vw;
    max-width: 100%;
    padding: 10px;
    font-size: 1em;
    margin: 0 auto 10px auto;
    word-break: break-word;
  }
  div p, #contact {
    box-sizing: border-box;
    width: 95vw;
    max-width: 100%;
    padding: 10px;
    margin: 0 auto;
    border-radius: 1em;
    list-style-position: inside;
  }
  #contact li {
    padding-left: 0;
    margin-left: 0;
    word-break: break-word;
  }
}