/*BDOY STYLE RULES*/
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      background-color: #f4f6f8;
      color: #333;
    }

    /*HEADER STYLE RULES*/
    header {
      background: #1e293b;
      color: white;
      padding: 1rem 2rem;
    }
    
    /*MAIN STYLE RULES*/
    main {
      padding: 2rem;
      max-width: 900px;
      margin: auto;
    }

    /*VIDEO STYLE RULES*/
    video{
      border: none;
    }

    /*SECTION STYLE RULES*/
    section{
      text-align: left;
      margin-top: 5%;
      border: 5px solid #333;
      overflow: auto;
    }

    section h2{
      text-align: center;
      background-color: #d2dae0;
      border-bottom: 5px solid #333;
      padding-top: 0%;
      margin-top: 0%;
    }

    /*ASIDE / SIDEBAR STYLE RULES*/
     #sidebar{
      text-align: center;
      float: right;
      width: 25%;
      border: 3px solid #333;
      background-color: #d2dae0;
      margin-bottom: 2.5%;
    }

    #sidebar h3{
      margin-top: 0%;
      margin-bottom: 0%;
    }

    section aside #personal_photo{
      width: 85%;
      border: 1px solid #333;
      margin-top: 0%;
    }

    section p{
      margin-top: 0%;
      margin-bottom: 0%;
    }

    .blueBox{
      background-color: #a4c9e7;
      padding-bottom: 2%;
      padding-top: 2%;
    }

    .barSplit{
      border-top: 2px solid #333;
      margin-left: 3%;
      margin-right: 3%;
      padding-bottom: 2%;
      padding-top: 2%;
    }
    
    .content-below{
      clear: left;
    }

    /*CONTACT STYLE RULES*/
    #contact{
      position: relative;
      width: 100%;
      color: white;
      padding-bottom: 4%;
    }
    
    #contact ul{
      list-style-type: none;
      text-align: center;
      position: relative;
    }

    #contact ul li{
      background-color: #1e293b;
      border: .5em solid #333;
      float: left;
      display: inline;
      position: relative;
      width: 45%;
      padding-bottom: 3%;
    }

    /*FOOTER STYLE RULES*/
    footer {
      text-align: center;
      padding: 1rem;
      background: #e5e7eb;
      margin-top: 3rem;
      font-size: 0.9rem;
    }

    /*RESUME PAGE STYLE RULES*/
    #ResumePage ul
    {
      list-style-type: none;
      text-align: center;
      position: relative;
    }
    #ResumePage ul ul
    {
      list-style-type: none;
      text-align: center;
      position: relative;
    }
    /*MEDIA QUERIES*/
    #mobile_menu{
      display: none;
    }
    /* Items below are so things are shown consistently */

    /* 1024px table (horizontal) */
    @media only screen and (max-width: 1024px){
      #Music_SQL{height: 85%; width: 85%;}
      #Weather_API{height: 90%; width: 90%;}
      img{width: 90%}
    }
    /* 576px phone (vertical) */
    @media only screen and (max-width: 770px){
      #Music_SQL{height: 85%; width: 85%;}
      #Weather_API{height: 90%; width: 90%;}
      img{width: 90%}
      section{margin-left: -7%; margin-right: -7%;}
      #contact{width: 100%; margin-left: -1em;}
      #contact ul li{padding-right: .23em;}
    }