@import url("https://fonts.googleapis.com/css?family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css?family=Encode+Sans&display=swap");
body {
  background-image: url(/assets/background.png);
}

img {
  fill: black;
}

embed {
  fill: black;
}

h1 {
  font-family: "Arial";
  font-weight: initial;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -8px;
  font-size: 94px;
  line-height: 78px;
  text-shadow: 0 0 3px #999;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(black));
          mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(black));
  padding-bottom: 15px;
}

h3 {
  text-transform: uppercase;
  font-family: "Encode Sans", sans-serif;
  margin: 0;
}

h4 {
  font-family: "Encode Sans", sans-serif;
  margin: 0;
  font-size: 1.1em;
}

p {
  font-family: "Encode Sans", sans-serif;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  line-height: 1.6em;
  font-size: 0.9em;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul p {
  padding-left: 0.5em;
}

.progress-bar {
  height: 15px;
  padding: 4px;
  border: 1px solid #dddddd;
  border-radius: 20px;
}

.progress-bar div {
  height: inherit;
  border-radius: inherit;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.progress-bar .html {
  background: #6ecbff;
  width: 80%;
}

.progress-bar .react-js {
  background: #2982b3;
  width: 62%;
}

.progress-bar .wordpress {
  background: #ffc06e;
  width: 60%;
}

.progress-bar .scss {
  background: #ffcb87;
  width: 58%;
}

.progress-bar .docker {
  background: #b37f3b;
  width: 50%;
}

.progress-bar .php {
  background: #6ecbff;
  width: 40%;
}

.progress-bar .laravel-vue-angular {
  background: #2982b3;
  width: 30%;
}

header,
section,
main {
  margin: 0 auto;
  max-width: 940px;
}

main {
  margin-bottom: 5em;
}

#bio {
  padding: 30px 60px 0px 50px;
}

#bio article {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  height: 515px;
  border-bottom: 1px solid #afafaf;
  border-right: 1px solid #afafaf;
}

#bio article #position {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  padding-left: 50px;
}

#bio article #position h3 {
  text-align: end;
}

#bio article #position span {
  background: brown;
  width: 5px;
  margin: 0 25px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

#bio article .image {
  z-index: -1;
  position: relative;
  float: right;
  max-width: 460px;
  height: 515px;
  width: 460px;
  background: url(/assets/look-down-25pc.png) no-repeat center center;
  background-size: 460px 515px;
  shape-outside: polygon(59px 498px, 102px 453px, 132px 380px, 176px 286px, 148px 243px, 154px 196px, 132px 177px, 136px 91px, 171px 42px, 213px 11px, 254px 3px, 318px 10px, 351px 45px, 461px 278px, 460px 515px, 6px 514px);
}

#bio article p {
  color: gray;
  padding-top: 50px;
  padding-left: 35px;
  text-align: justify;
  padding-right: 0.4em;
}

#bio article p:nth-of-type(2) {
  text-align: right;
  padding-top: 30px;
}

#bio .social {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: -61px;
  top: 0;
}

#bio .social .contact figure {
  position: fixed;
  background-image: url(/assets/background.png);
}

#bio .social figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
}

#bio .social figure a {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 12px;
  padding-bottom: 12px;
}

#bio .social figure img {
  width: 30px;
}

#content {
  position: relative;
  padding: 0 60px 0px 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
}

#content .title {
  border-bottom: 1px #afafaf solid;
}

#content .title h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 5px 0;
}

#content article:nth-of-type(1) ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#content article:nth-of-type(1) ul li {
  padding: 15px;
}

#content article:nth-of-type(1) ul li img {
  width: 70px;
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
}

#content article:nth-of-type(1) ul li embed {
  width: 70px;
  height: 70px;
}

#content article:nth-of-type(2) {
  display: block;
  position: relative;
}

#content article:nth-of-type(2) .experiences {
  height: calc(100% - 32px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#content article:nth-of-type(2) .experiences > div {
  width: 70%;
}

#content article:nth-of-type(2) .experiences .becode {
  position: relative;
}

#content article:nth-of-type(2) .experiences .becode::after {
  content: "";
  position: absolute;
  top: -36px;
  z-index: -1;
  height: 130px;
  width: 130px;
  background: url(/assets/becode-seal.png);
  background-repeat: no-repeat;
  background-size: 130px;
  opacity: 0.11;
  -webkit-transform: translateX(10px) rotate(45deg);
          transform: translateX(10px) rotate(45deg);
}

#content article:nth-of-type(2) .experiences .glooh {
  position: relative;
}

#content article:nth-of-type(2) .experiences .glooh::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  height: 64px;
  width: 139px;
  background: url(/assets/glooh-min-bk.png);
  background-repeat: no-repeat;
  opacity: 0.11;
  -webkit-transform: translateX(1vw) rotate(45deg);
          transform: translateX(1vw) rotate(45deg);
}

@media only screen and (max-width: 808px) {
  #bio article h1 {
    position: absolute;
    left: 0;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
  }
}

@media only screen and (max-width: 711px) {
  #bio article {
    min-height: 404px;
    height: 100%;
  }
  #bio .image {
    float: none !important;
    position: absolute !important;
    bottom: 0;
    right: 0;
    opacity: 0.05;
  }
}

@media only screen and (max-width: 672px) {
  #content {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
  }
  #content .title {
    display: contents;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #content .title h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-right: 1px #afafaf solid;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    padding: 0;
    padding: 0 5px;
  }
  #content article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #content article ul {
    margin: 0 auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #content article:nth-of-type(2) {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #content article:nth-of-type(2) .experiences {
    padding-left: 30px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: 0px;
    margin: 0 auto;
    width: 100%;
  }
}

@media only screen and (max-width: 530px) {
  #bio h1:first-child {
    font-size: 80px;
  }
}

@media only screen and (max-width: 464px) {
  #bio h1:first-child {
    font-size: 50px;
    letter-spacing: -5px;
    line-height: 50px;
  }
  #bio article h1 {
    font-size: 80px;
  }
  #bio #position h3:nth-of-type(2) {
    display: none;
  }
  #bio #position span {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */