*:focus { 
 outline: 0; 
}

body {
 background: url('http://i.imgur.com/QAGFkJM.png') fixed no-repeat;
 background-position: 50px 110%;
 background-size: 34%;
}

img {
  border: 0px;  
}

hr {
  margin-top: 20px;
  height: 5px;
  border: 0;
  box-shadow: inset 0 5px 5px -7px rgba(0, 0, 0, 0.5);
}

@font-face {
  font-family: "Butler";
  src: url(butler_medium-webfont.woff) format("truetype");
}

#main {
  width: 100%;
  height: 100%;
  text-align: left; /* for IE */
}

#wrapper {
  width: 657px;
  height: 410px;
  position: absolute;
  top: 100px;
}

#content {
  width: 45%;
  background-color: whitesmoke; 
  left: 44%;
  position: relative;
  top:-10px;
}

#links {
  width: 239px;
  height: 425px;
  position: fixed;
  overflow: hidden;
  top: 15%;
  right: 2%;
  z-index: 100;
  margin: auto;
}

#box1 {
  background-color: #e37537; 
  width: 239px;
  height: 197px;
  overflow: hidden;
  position: fixed;
}

#box1 a, #box1 span {
  color: #343840; 
  font-family: Times new Roman;
  text-decoration: none;
  position: absolute;
  overflow: hidden;
}

#box1 span.hide {
  left: 135px; 
  top: 28px; 
  color: #e37537; 
  font-size: 120px;
}


#box1 a:hover {
  color: #c8cbd1;
}

#box2 {
  background-color: #f6e259; 
  width: 239px;
  height: 211px;
  position: absolute;
  top: 197px;
  margin-top: 12px;
}

#box2 #me {
  font-family: Butler, Times New Roman; 
  position: absolute; 
  left: 82px; 
  top: 123px; 
  font-size: 36pt; 
  color: #a11533; 
  line-height: 28pt; 
  letter-spacing: 0; 
  font-weight: 400;
}

#para {
  padding: 20px;
  font-size: 10.5pt;
  line-height: 22pt;
  padding-top: 70px;
  width: 69%;
}

#para p {
  font-family: Georgia;
}

h1 {
  font-size: 36pt;
  line-height: 22pt;
  color: #484e5b;
  letter-spacing: 0;
  font-family: Butler;
  font-weight: 500;
}

h1:before { 
  display: block; 
  content: " "; 
  margin-top: -30px; 
  height: 30px; 
  visibility: hidden; 
}

h1.first {
  margin-top: 0;
}

p.before-header {
  margin-bottom: 100px;
  content: " ";
  display: block;
}

.work-link {
  font-style: italic;
  color: #c33150;
  text-decoration: none;
  font-family: monospace;
}
.work-desc {
  font-style: italic;
}

.work-info {
  font-weight: bold;
}

span.details {
  font-size: 10pt; 
  font-style: italic;
}

.resume {
  position: relative;
  margin: 0 0 120px 0;
}

.resume > #p1 {
  display: block;
  width: 62px;
  height: 80px;
  background: url('resume2017-thumb.png') no-repeat;
  position: absolute;
  background-size: cover;
}

.resume > #p2 {
  display: block;
  width: 62px;
  height: 80px;
  background: url('resume2017-thumb.png') no-repeat;
  position: absolute;
  top: 10px;
  left: 10px;
  background-size: cover;
}

#lk-works {
  left: -10px; top: -10px; font-size: 100px; }

#lk-design {
  left: 17px; top: 107px; font-size: 90px; }

#lk-resume {
  left: 57px; top: 71px; font-size: 65px; line-height: 70%; }

#lk-about {
  left: 52px; top: -10px; font-size: 44px; }

#lk-contact {
  left: 128px; top: 111px; font-size: 30px; }
  
@media all and (max-width: 1150px) {

  #content {
    width: 40%;
  }

  #para {
    width: 75%;
  }
  

}

@media only screen and (max-width: 1050px) and (orientation: landscape) {
  
  body {
   background: url('http://i.imgur.com/QAGFkJM.png') no-repeat;
   background-position: 23px 20px;
   background-size: 58%;
   margin: 0;
  }

  #links {
  	position: absolute;
    right: 2%;
    top: 30px;
  }
  
  #box1 {
    position: relative;
  }
  
  
  #content {
  width: 100%;
  left: 0px;
  top: 430px;
  }

  #para {
    width: 92%;
    padding-top: 70px;
  }
  
  h1 {
    float: right;
    padding: 0 20px 0 30px;
    line-height: 1px;
  }
  
  .resume {
    margin: 0 0 190px 0;
  }
}

@media only screen and (max-aspect-ratio: 8/10) and (orientation: portrait)  { 

  body {
   background: url('http://i.imgur.com/QAGFkJM.png') no-repeat;
   background-position: 35% 1%;
   background-size: 85%;
   margin: 0;
  }

  #links {
    position: relative;
    width: 100%;
    right: 0;
    margin: 0;
    height: 10px;
    top: 70%;
    padding-bottom: 41%;
  }

  #box1 {
    position: absolute;
    z-index: 1;
    top: 0; bottom: 0; left: 0; right:45%;
    height: auto;
    width: auto;
  }
  
  #box1 span.hide {
    left: 54%; top: 7%; font-size: 30vw;
  }

  #box2 {
    position: absolute;
    top: -12px; bottom: 0; left: 55%;right:0;
    height: auto;
    width: auto;
  }
  
  #box2 #me {
    left: 20%; 
    font-size: 10vw;
    top: 58%;
    line-height: 80%;
  }
  
  #content {
    width: 100%;
    left: 0px;
    top: 360px;
  }

  #para {
    width: 92%;
    padding-top: 80px;
  }
  
  h1 {
    float: right;
    padding: 0 20px 0 30px;
    line-height: 1px;
  }
  
  h1.first {
    margin-top: 60px;
  }
  
  .resume {
    margin: 0 0 190px 0;
  }
  
  #lk-works { font-size: 23vw; top: -4%; left: -4%;}

  #lk-design { font-size: 20vw; top: 54%; left: 7%;}

  #lk-resume { font-size: 13vw; top: 40%; left: 25%;}

  #lk-about { font-size: 10vw; top: -5%; left: 22%;}

  #lk-contact { font-size: 7vw; top: 57%; left: 52%;}
  
  
}