html {
  box-sizing: border-box;
  font: 400 62.5%/2em "Work Sans", Tahoma, sans-serif;
  color: #5a5a5a;
  background-color: #ffffff;
  -webkit-text-size-adjust: 62.5%;
  -webkit-font-feature-settings: "kern" 1, "liga" 0, "swsh" 0;
  -moz-font-feature-settings: "kern" 1, "liga" 0, "swsh" 0;
  -o-font-feature-settings: "kern" 1, "liga" 0, "swsh" 0;
  font-feature-settings: "kern" 1, "liga" 0, "swsh" 0;
  font-kerning: normal; }

*, *:after, *:before {
  box-sizing: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

body {
  overflow-x: hidden;
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

::selection {
  background: #4c4cfc;
  color: #ffffff;
  text-shadow: none; }

:focus {
  outline-color: transparent;
  outline-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700; }

a {
  color: #4c4cfc;
  text-decoration: none; }
  a:focus {
    outline: 0; }
  a:hover {
    outline: 0;
    color: #ff5364;
    text-decoration: none; }
  a:active {
    outline: 0;
    color: #ff5364;
    text-decoration: none; }

.logo {
  width: 206px;
  height: 85px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-indent: -3000px;
  position: fixed;
  top: 80px;
  left: 0px;
  z-index: 10;
  background: url(assets/anodpixels-full-logo.svg) no-repeat;
}

.copy {
  padding: 0;
  margin: 0;
  position: fixed;
  z-index: 7;
  bottom: 80px;
  left: 60px;
  right: 60px;
  height: auto;
}
  .copy>a {
    position:absolute;
    z-index:10;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
  }
    .copy>a.mailto {
      left: 3%;
    }
    .copy>a.resume {
      right: 3%;
    }
  .copy>span {
    display: block;
    height: auto;
    font-size: 9.3vw;
    line-height: 17.5vh;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: -1;
    font-weight: 700;
    color: #4c4cfc;
    opacity: 0.2;
  }

.photo {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
  background: url(assets/alexandru_nastase_at_desk.png) no-repeat bottom right;
}

@media (max-width: 1024px) {
  .copy>a.mailto {
      transform: none;
      left: 3%;
      top: 15%;
    }
    .copy>a.resume {
      transform: none;
      left: 3%;
      right: auto;
      top:auto;
      bottom: 15%;
    }
  .copy>span {
    font-size: 18.8vw;
    line-height: 18.8vh;
    text-transform: uppercase;
    white-space: normal;
  }
  .photo {
    background: url(assets/alexandru_nastase_at_desk.png) no-repeat right bottom;
  }
}

@media (min-width: 760px) and (orientation: portrait) {
  .copy>a.mailto {
      transform: none;
      left: 3%;
      top: 15%;
    }
    .copy>a.resume {
      transform: none;
      left: 3%;
      right: auto;
      top:auto;
      bottom: 15%;
    }
  .copy>span {
    font-size: 21.5vw;
    line-height: 12.5vh;
    text-transform: uppercase;
    white-space: normal;
  }
  .photo {
    width: 110%;
    height:110%;
    bottom:0;
    background: url(assets/alexandru_nastase_at_desk.png) no-repeat 100% 100%;
    background-size: 140%;
  }
}

@media (max-width: 700px) {
  .copy>a { line-height: 1.2em; }
  .copy>a.mailto {
    transform: none;
    left: 3%;
    top: 10%;
    font-size: 2.2em;
    font-weight: 500;
  }
  .copy>a.resume {
    transform: none;
    left: 3%;
    bottom:5%;
    font-size: 2.2em;
    font-weight: 500;
  }
  .copy>span {
    font-size: 22.2vw;
    line-height: 10.8vh;
    text-transform: uppercase;
    white-space: normal;
    margin-left: -10vw;
  }
  .photo {
    background: url('assets/alexandru_nastase_at_desk.png') no-repeat right bottom;
  }
}

@media (max-height: 570px) {
  .copy>a { line-height: 1.2em; }
  .copy>a.mailto {
    transform: none;
    left: 3%;
    top: 10%;
    font-size: 1.9em;
    font-weight: 500;
  }
  .copy>a.resume {
    transform: none;
    left: 3%;
    bottom:5%;
    font-size: 2.2em;
    font-weight: 500;
  }
  .copy>span {
    font-size: 22.2vw;
    line-height: 10.8vh;
    text-transform: uppercase;
    white-space: normal;
    margin-left: -10vw;
  }
  .photo {
    background: url('assets/alexandru_nastase_at_desk.png') no-repeat;
    background-position: 100% 100%;
    background-size: cover;
  }
}

@media (max-width: 768px) {
  .copy { left: 20px; }
}

@media (max-width: 420px) {
  .copy>span {
    font-size: 20vw;
    line-height: 9vh;
    margin-left: 0;
  }
  .photo {
    background-position: 88% 100%;
  }
}

@media (max-width: 736px) and (max-height: 414px) {
  .copy>span {
    font-size: 12vw;
    line-height: 17vh;
    margin-left: 0;
  }
  .copy {
    bottom: 40px;
  }
  .logo {
    top: 20px;
  }
}

@media (max-width: 600px) and (max-height: 400px) and (orientation: landscape) {
  .logo {
    top: 20px;
  }
	.copy {
		bottom: 10px;
	}
  .copy>span {
    font-size: 6em;
    line-height: 1.5em;
  }
  body {
    font-size: 13px;
  }
  .copy>a.resume {
    font-size: 2em;
    line-height: 3em;
  }

  .copy>a.mailto {
    font-size: 2em;
    line-height: 2em;
  }
	.photo {
    background-position: 100% 75%;
    background-size: 97%;
  }

}

@media (max-width: 420px) and (max-height: 736px) {
  .logo {
    top: 20px;
  }
  .copy>span {
    font-size: 6em;
    line-height: 1.5em;
  }
  body {
    font-size: 16px;
  }
  .copy>a.resume {
    font-size: 2em;
    line-height: 3em;
  }

  .copy>a.mailto {
    font-size: 2em;
    line-height: 2em;
  }
}

@media (max-width: 320px) {
  .logo {
    top: 20px;
  }
  .copy {
    bottom: 50px;
  }
  .photo {
    background-position: 90% 80%;
    background-size: 270%;
  }
  .copy>span {
    font-size: 6em;
    line-height: 1.5em;
  }
  body {
    font-size: 16px;
  }
  .copy>a.resume {
    font-size: 2em;
    line-height: 3em;
  }

  .copy>a.mailto {
    font-size: 2em;
    line-height: 2em;
  }
}