body {
    color: white;
    background-color: rgb(42, 37, 37);
    font-family: Times New Roman;
    padding: 0px;
    margin:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
  }
  
  h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 60px;
    color: rgb(240, 237, 237);
  }

  .name{
    font-size: 35px;
    font-weight: 75px;
    display: block;
    font-family: 'Roboto', sans-serif;
    margin-left: 20px;
  }

  dd{
    font-size: 12px;
    color: lightgray;
  }
  dl{
    margin-left: 9px;
  }

  .aboutme{
    font-size: 14px;
    margin-left: 9px;
  }
  
  nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-height: 8wh;
    background-color: rgb(42, 37, 37);
    color:white;
    border: #EFEFEF;
    border-width: 3px;
  }
  
  .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    font-weight: bold;
  }

  .clock {
    width: 15rem;
    height: 15rem;
    border: 10px solid white;
    border-radius: 50%;
    margin: 25px auto;
    position: relative;
    padding: 1rem;
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.1),
      inset 0 0 0 3px #EFEFEF,
      inset 0 0 10px black,
      0 0 10px rgba(0,0,0,0.2);
  }

  .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-3px); /* account for the height of the clock hands */
  }

  .hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    transform-origin: 100%; /* % changes the X axis it rotates pon. Default is 50% (Center) - 100% will pivot on the far right of the clock hand */
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  }

  
  
  /*Two Sections */
  .wrapper {
    display: flex;
  }
  
  section.text-section {
    width: 50%;
    background-color: rgb(42, 37, 37);
    color:rgb(240, 237, 237);
  }
  
  aside.image-section {
    width: 50%;
    background: black;
  }

  h2:hover {
    background-color: rgb(42, 37, 37);
    color: rgb(244, 213, 159);
  }

  h2{
    color:rgb(251, 235, 208);
    margin-bottom: 0px;
    margin-top: 30px;
  }

  table{
    margin-left: 9px;
  }


  /* Tabs */
  
  [data-tab-content] {
    display: none;
  }
  
  .active[data-tab-content] {
    display: block;
  }
  
  body {
    padding: 0;
    margin: 0;
  }
  
  .tabs {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .tab {
    cursor: pointer;
    padding: 10px;
  }
  
  .tab.active {
    background-color: rgb(240, 237, 237);
    color: black;
  }
  
  .tab:hover {
    background-color: rgb(240, 87, 87);
    color: black;
  }
  
  .tab-content {
    margin-left: 20px;
    margin-right: 20px;
  }
  

  /* Links (A Refs)*/
  a:link {
    color: rgb(255, 181, 181);
    background-color: transparent;
    text-decoration: none;
  }
  
  a:visited {
    color: rgb(240, 87, 87);
    background-color: transparent;
    text-decoration: none;
  }
  
  a:hover {
    color: rgb(240, 87, 87);
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:active {
    color: rgb(240, 87, 87);
    background-color: transparent;
    text-decoration: underline;
  }
  

  @media screen and (max-width:1000px){
    section.text-section {
      width: 100%;
    }
    aside.image-section {
     display: none;
    }
    h4 {
     font-size: 25px;
    }
    .tab {
      font-size: 14px;
     }
  }