/* Basic styles */
      body {
        margin: 0px;
        padding: 0px;
        background-color: #f2f2f2;
      }
      p {
        font-family: 'Roboto', sans-serif;
      }
      a {
        font-family: 'Roboto', sans-serif;
        color: black;
        text-decoration: underline;
      }
      a:visited {
        color: black;
        text-decoration: none;
      }

      /* Styles for sidebar */
      div.sidebar {
        top: 0px;
        position: fixed;
        width: 150px;
        height: 90vh;
      }
      div.sidebarcell {
        position: relative;
        left: -145px;
        width: 99%;
        height: 40px;
        border: 1px solid #4A235A;
        margin-bottom: 5px;
        margin-top: 5px;
        background-color: #F4ECF7;
        border-radius: 5px;
      }
      div.sidebarcell:hover {
        box-shadow: inset 0 0 0 2px #4A235A;
      }
      p.cell {
        margin: 10px 0px 0px 10px;
        font-size: 120%;
        color: black;
        text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);

      }


      div.wrapper {
        margin: 5px;
        height: 95vh;
        width: 95vw;
      }

      /* Header */
      div.header {
        height: 60px;
        width: 400px;
        position: relative;
        left: 26vw;
        padding: 10px;
      }
      h1 {
        font-family: 'Merriweather', serif;
      }

      /* About me intro paragraph styles*/
      div.intro {
        height: calc(~"600px - 40vw");
        width: 25vw;
        position: relative;
        left: 200px;
        background-color: #F8F9F9;
        padding: 10px;
        border-radius: 3px;
        min-height: 300px;
        overflow-y: auto;
      }
      p.introtext {
        text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
        margin: 2px;
        line-height: 140%;
      }

      /* A picture of me */
      #mepic {
        border-radius: 50%;
        background-image: url("Me.jpg");
        position: absolute;
        height: 300px;
        width: 300px;
        border-radius: 50%;
        top: calc(50px + 5vh);
        left: calc(400px + 25vw);
        background-size: contain;
        padding: 10px;
      }

      /* For a pop-up with more information about me */
      #me {
        text-decoration: underline;
      }
      #me:hover {
        color: #AED6F1;
        cursor: pointer;
      }
      #mediv {
        position: absolute;
        height: calc(~"600px - 40vw");
        width: 40vw;
        background-color: rgb(240, 255, 255);
        border: 2px rgb(0, 77, 77) solid; 
        top: calc(400px + 15vh);
        left: calc(350px + 25vw);
        display: none;
        padding: 10px;
        overflow-y: auto;

      }
      .metext {
        text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
        margin: 3px;
        font-size: 90%;
      }



      /* For a pop-up with a little bit more about my projects */
      #project {
        text-decoration: underline;
      }
      #project:hover {
        color: #AED6F1;
        cursor: pointer;
      }
      #projectdiv {
        border-radius: 50%;
        border: 2px #660000 solid;
        background-color: rgb(255, 240, 240, 0.9);
        height: 300px;
        width: 300px;
        position: absolute;
        left: calc(100px + 10vw);
        top: calc(300px + 20vh);
        padding: 10px;
        display: none;
      }
      .projecttext {
        text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
        font-size: 90%;
      }
      #projectdivheader {
        position: absolute;
        left: 98px;
        top: 0px;
        font-weight: bold;
        font-size: 110%;
      }
      #projectonetitle {
        position: absolute;
        left: 75px;
        top: 30px;
        font-weight: bold;
      }
      #projectonetext {
        position: absolute;
        left: 30px;
        top: 46px;
      }
      #projectonetexttwo {
        position: absolute;
        left: 15px;
        top: 81px;
      }
      #projecttwotitle {
        position: absolute;
        left: 100px;
        top: 125px;
        font-weight: bold;
      }
      #projecttwoline {
        position: absolute;
        left: 7px;
        top: 140px;
      }
      #projecttwotext {
        position: absolute;
        left: 18px;
        top: 175px;
      }
      #projectthreetitle {
        position: absolute;
        left: 45px;
        top: 218px;
        font-weight: bold;
      }
      #projectthreetext {
        position: absolute;
        left: 85px;
        top: 234px;
      }
      #projectfour {
        position: absolute;
        left: 112px;
        top: 260px;
        font-weight: bold;
      }