style.css

    *{
      font-family: 'Prompt', sans-serif;
     }
    body {
      background-image: linear-gradient( to bottom right, #3d4d68, #0b0e13);
      background-repeat: no-repeat;
      background-size: cover;
    }
    header {
      display: block;
      margin: 0;
      padding: 12px 0 0 0;
    }
    header img.profile-picture {
      box-shadow: 2px 2px 6px rgba(0,0,0,0.8);
      border: solid 1px #888;
      border-radius: 4px;
    }
    header div {
      margin: 1%;
    }
    header div img.logo {
      width: 32px;
      height: 32px;
      border-radius: 50% 50%;
    }
    header div h1 {
      display: block;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      font-weight: 300;
      color: #fff;
    }
    header div h2 {
      display: block;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      color: #fff;
    }
    a {
      font-weight: 300;
      text-decoration: none;
      outline: none;
      color: #4f88af;
      transition: color 0.5s ease;
    }
    a:hover {
      color: #62a9d9;
    }
    ul {
      display: block;
      list-style: none;
      margin: 0;
      padding: 0px;
    }
    ul li {
      padding: 0px;
      max-width: 300px;
    }
    ul li a {
      background-color: rgba(0,0,0,0.4);
      border: solid 1px #62a9d9;
      border-radius: 2px;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      transition: border 0.5s ease;
      color: #fff;
      transition: color 0.5s ease, border 0.5s ease;
    }
    ul li a:hover {
      border-color: #727272;
    }
    main {
      display: block;
      margin: 0;
      padding: 0;
    }
    main div {
      vertical-align: text-top;
      padding: 0;
      margin: 0;
    }
    main div.bio strong a {
      display: inline-block;
      padding: 4px;
      background-color: #62a9d9;
      border: solid 1px #62a9d9;
      border-radius: 2px;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      transition: border 0.5s ease;
      font-weight: 600;
      color: #fff;
      transition: color 0.5s ease, border 0.5s ease;
    }
    main div.bio strong a:hover {
      border-color: #727272;
      color: #525252;
    }
    main div h3 {
      display: block;
      padding: 8px 8px 8px 0;
      background-color: #323232;
      text-indent: 16px;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      font-weight: 300;
      color: #fff;
    }
    main div h4 {
      display: inline-block;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      font-weight: 300;
      color: #fff;
    }
    footer {
      display: block;
      margin: 0;
      padding: 12px 0;
      text-align: center;
    }
    footer p {
      color: #fff;
    }
    @media only screen and (min-width: 1080px) {
      body {
        padding: 5% 8% 100% 8%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      header img.profile-picture {
        display: inline-block;
        margin: 1% 1% -32px 1%;
        width: 128px;
      }
      header div {
        display: inline-block;
        width: 80%;
      }
      header div h2 {
        font-weight: 200;
      }
      ul li {
        display: inline-block;
        margin: 2px;
      }
      ul li a {
        padding: 2px 8px;
      }
      div.bio {
        display: inline-block;
        width: 63%;
      }
      div.extra {
        display: inline-block;
        width: 35%;
      }
    }
    @media only screen and (min-width: 780px) and (max-width: 1080px) {
      body {
        padding: 5% 4% 100% 4%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      header img.profile-picture {
        display: block;
        margin: 1% auto 0 0;
        width: 128px;
      }
      header div {
        display: block;
      }
      header div h2 {
        font-weight: 200;
      }
      ul li {
        display: block;
        margin: 2px;
      }
      ul li a {
        padding: 2px 8px;
        display: block;
        width: 80%;
        margin-right: auto;
        font-size: 16px;
        text-indent: 2em;
      }
      div.bio {
        display: inline-block;
        width: 63%;
      }
      div.extra {
        display: inline-block;
        width: 35%;
      }
    }
    @media only screen and (min-width: 380px) and (max-width: 780px) {
      body {
        padding: 0 2% 100% 2%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      header img.profile-picture {
        display: block;
        margin: 1% auto 0 0;
        width: 72px;
      }
      header div {
        display: block;
      }
      header div h2 {
        font-weight: 300;
        font-size: 18px;
      }
      ul li {
        display: block;
        margin: 8px 4px;
      }
      ul li a {
        width: 72%;
        padding: 2px 0;
        display: block;
        font-size: 16px;
        text-indent: 2em;
      }
      div.bio {
        display: block;
        width: 91%;
      }
      div.extra {
        display: block;
        width: 91%;
      }
    }
    @media only screen and (max-width: 380px) {
      body {
        padding: 0 1% 100% 1%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      header img.profile-picture {
        display: block;
        margin: 1% auto 0 0;
        width: 72px;
      }
      header div {
        display: block;
      }
      header div h2 {
        font-weight: 300;
        font-size: 15px;
      }
      ul li {
        display: block;
        margin: 8px 4px;
      }
      ul li a {
        width: 72%;
        padding: 2px 0;
        display: block;
        font-size: 14px;
        text-indent: 2em;
      }
      div.bio {
        display: block;
        width: 95%;
      }
      div.extra {
        display: block;
        width: 95%;
      }
    }