/* =Reset
-------------------------------------------------------------- */

hr,img{border:0}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption,td,th{font-weight:400;text-align:left}.clear:after,.format-status .entry-header:after,.wrapper:after,h1,h2,h3,h4,h5,h6{clear:both}html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:dotted thin}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}del{color:#333}ins{background:#fff9c0;text-decoration:none}hr{background-color:#ccc;height:1px;margin:24px 24px 1.714285714rem}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}small{font-size:smaller}img{-ms-interpolation-mode:bicubic}.clear:after,.clear:before,.format-status .entry-header:after,.format-status .entry-header:before,.wrapper:after,.wrapper:before{display:table;content:""}


/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
  font-size: 16px;
  height: 100%;
  background: #fff url(me.jpg) no-repeat 100% 100%;
  background-attachment: fixed;
  background-size: 70%;
}
body {
	font-size: 1em;
	font-family: "Helvetica Nueue", Helvetica, Arial, sans-serif;
	color: #9b9b9b;
  height: 100%;
}

a {
	outline: none;
}

main p {
  margin-bottom: 1em;
}

main h2 {
  color: #4b4b4b;
  margin: 1em 0 0.75em;
}

header {
  margin: 2em 0 1em;
  overflow: hidden;
}

header img {
  max-width: 100px;
  margin: 0 auto 20px;
}

h1 {
  position: absolute;
  font-size: 4.2em;
  left: -5px;
  top: -8px;
  z-index: 1;
  line-height: 1;
  font-weight: 900;
  color: #eee;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.site {
  max-width: 95%;
  padding-left: 5%;
  box-sizing: border-box;
  z-index: 2;
  position: relative;
}

main {
  font-size: 1em;
  font-weight: 100;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

main a {
  font-family: Georgia;
  font-style: italic;
  text-decoration: none;
  font-weight: 800;
  color: #6b6b6b;
  border-bottom: 3px dotted #ebebeb;
}

main a:hover {
  border-color: #fff;
  color: #9b9b9b;
}

.footer {
  position: absolute;
  bottom: 2em;
  width: 100%;
  font-size: 0.75em;
  box-sizing: border-box;
  padding-right: 50%;
  line-height: 1.25;
}

.footer strong {
  font-weight: normal;
  font-size: 0.875em;
  display: block;
}

.footer em {
  font-style: normal;
  font-family: courier;
  font-size: 1.5em;
  color: #4b4b4b;
  line-height: 1.5;
}


@media (min-width: 375px) {
  html {
    background-size: 80%
    background-position: 100% 105%;
  }
  h1 {
    font-size: 5em;
  }
  main h2 {
    font-size: 1.25em;
  }
  header img {
    max-width: 120px;
  }
  header {
    margin-top: 3em;
  }
}

@media (min-width: 414px) {

}

@media (min-width: 768px) {
  .site {
    max-width: 80%;
    padding-left: 100px;
  }
  h1 {
    font-size: 9em;
    color: #f5f5f6;
  }
  header {
    margin: 5em 0 6em;
  }
  header img {
    max-width: 200px;
  }
  main {
    font-size: 1.5em;
  }
  html {
    background-size: 500px auto;
  }

}


@media (min-width: 1024px) {
  header {
    margin: 4em 0;
  }
  h1 {
    font-size: 13px;
  }
}


@media (min-width: 1400px) {

  main {
    font-size: 2em;
  }
  h1 {
    font-size: 15em;
    top: -25px;
    left: -20px;
  }
  header {
    margin: 10em 0 0;
  }
  header img {
    max-width: 250px;
  }
  main h2 {
    margin: 0.25em 0 0.5em;
    font-size: 2em;
/*    background: rgba(0,0,0,0.05);
    display: inline-block;
    padding: 0.25em;
*/  }


}