a {
  color: inherit;
  text-decoration: none; }

body {
  background-color: #236d9d;
  font-family: "Lato", sans-serif;
  color: white; }

.wrap-left {
  font-size: 4em;
  margin-top: 10vh;
  margin-left: 3vw;
  float: left; }
  .wrap-left .name {
    font-size: 1.2em;
    font-weight: 800;
    text-shadow: 2px 3px #1a5073; }
    @media screen and (max-width: 540px) {
      .wrap-left .name {
        font-size: 1em;
        text-align: center; } }
  .wrap-left .whatido, .wrap-left .whereiwork {
    font-size: 0.4em;
    margin-left: 0em; }
    .wrap-left .whatido a:hover, .wrap-left .whereiwork a:hover {
      text-decoration: underline; }

  .links {
    margin-top: 4vh;
    font-size: 0.4em;
    letter-spacing: 0.2em; }
     .links a:hover {
      color: #e6e6e6;
      text-shadow: 2px 3px #1a5073; }
  @media screen and (max-width: 540px) {
    .wrap-left {
      text-align: center; } }

.a {
  height: 10px;
  width: 100vw;
  left: 0;
  top: -10px;
  position: absolute; }

.a .b,
.a .c,
.a .d,
.a .e {
  float: left;
  width: 25%;
  height: 100%; }

.a .b {
  background-color: #83edb8; }

.a .c {
  background-color: #50bcb6; }

.a .d {
  background-color: #ee4256; }

.a .e {
  background-color: #fcb64b; }

.f {
  background-repeat: no-repeat;
  width: 70vw;
  max-width: 489px;
  height: 70vh;
  max-height: 483px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -99;
  display: none; }

.error {
  font-family: "Lato", sans-serif;
  color: white;
  font-size: 2em;
  text-align: center;
  margin-top: 30vh; }

.error-link {
  font-family: "Lato", sans-serif;
  color: white;
  font-size: 2em;
  text-align: center;
  font-weight: 800;
  margin-top: 10vh; }