body,
html {
  font-family: Open Sans, sans-serif;
  margin: 0;
  padding: 0;
}
.greeting {
  font-family: Lato, sans-serif;
  left: 0;
  opacity: 0.5;
  position: absolute;
  text-align: center;
  top: 40%;
  width: 100%;
}
.greeting span.border {
  background-color: #111;
  color: #fff;
  font-size: 35px;
  letter-spacing: 10px;
  padding: 1rem;
}
.border-2 {
  padding-top: 0.75rem;
}
.brand {
  bottom: 5%;
  color: #fff;
  font-size: 15px;
  position: fixed;
  right: 12%;
}
.brand span {
  padding: 1em;
}
@media only screen and (max-width: 700px) {
  .brand {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
  }
}
@media only screen and (max-width: 425px) {
  .brand {
    bottom: 2%;
  }
  #contact {
    align-items: center;
    padding-bottom: 1rem;
    right: 2.65rem;
    text-align: center;
  }
}
.tag {
  align-items: center;
  background-color: #e8e8e8;
  border: 2px dotted #f90;
  display: flex;
  font-family: Cabin Sketch, cursive;
  font-size: 40px;
  height: 50px;
  justify-content: center;
  margin: 0.125em 0.2em 0;
  width: 155px;
}
.tag span {
  margin-top: 3px;
}
.trade {
  font-size: 10px;
}
.logo h1 {
  color: #383a3c;
}
#home {
  background-image: url(/static/media/bg.18f4588302c6bcbae99e.jpg);
  height: 100vh;
}
#contact {
  bottom: 3.8%;
  color: #fff;
  font-size: 1.2em;
  left: 10%;
  position: fixed;
}
#resume {
  padding-bottom: 2rem;
}
.name {
  font-family: Lato, sans-serif;
  font-size: 2rem;
  font-weight: 100;
}
.logos {
  display: flex;
  font-size: 3rem;
  justify-content: space-evenly;
  padding-bottom: 1rem;
}
.logos i {
  color: #97979b;
}
.logos i:hover {
  color: #fff;
  transition: all 0.5s ease-in;
}
.logo {
  align-items: flex-start;
}
fieldset,
hr {
  border: 0;
  padding: 0;
}
.hobbies li,
.time-line,
header aside ul,
ul.skills {
  list-style-type: none;
}
hr {
  border-top: 1px solid #ccc;
  display: block;
  height: 1px;
  margin: 1em 0;
}
fieldset {
  margin: 0;
}
textarea {
  resize: vertical;
}
abbr[title] {
  -webkit-text-decoration: dotted;
  text-decoration: dotted;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.container,
.container-fluid {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadein;
  animation-name: fadein;
  background: #fefefe;
  margin: 0 auto;
  max-width: 1280px;
  min-height: 0;
}
h1,
h2,
h3,
h4 {
  font-family: Oswald, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}
a {
  color: #444;
}
a:hover {
  color: #222;
  text-decoration: none;
  transition: all 0.5s ease-in;
}
header {
  display: flex;
  margin: 50px 0 20px;
}
header h1 {
  display: inline-flex;
  flex-direction: column;
  font-size: 2rem;
  white-space: nowrap;
}
.logo,
header aside,
ul.skills {
  display: flex;
}
.logo em,
article > p > span {
  color: #f90;
}
header aside ul li,
header h1 span {
  font-size: 0.95rem;
}
header h1 span {
  color: #717171;
  font-family: Open Sans, sans-serf;
  text-transform: lowercase;
}
header h2 {
  color: #383a3c;
}
header aside ul {
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
header aside ul li i {
  font-size: 1.2rem;
  margin: 0 15px;
}
article header {
  border-bottom: 1px solid #222;
  margin-bottom: 10px;
  padding-left: 5px;
}
article h2 i,
article header i {
  font-size: 1.2rem;
}
article header h2 {
  height: 29px;
  line-height: 29px;
  margin-bottom: 0;
}
article p {
  padding: 5px;
}
.content li,
article p {
  font-size: 0.9rem;
  line-height: 1.5rem;
}
aside em {
  color: #c9c9c9;
}
ul.skills {
  flex-wrap: wrap;
  padding: 0;
}
.skills li {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  flex-basis: 33%;
  flex-direction: column-reverse;
  justify-content: center;
  padding-bottom: 10px;
}
.skills li .icon-label {
  cursor: pointer;
  margin: 0 15px;
}
.skills li .devicons {
  transition: color 0.15s ease-in;
}
.skills i {
  font-size: 2.25rem;
  text-align: center;
  width: 60px;
}
.skill-Photoshop:hover {
  color: #32a8ff;
}
.skill-PHP:hover {
  color: #6c7eb7;
}
.skill-Vue:hover {
  color: #42b883;
}
.skill-JavaScript:hover {
  color: #f0db4f;
}
.skill-NodeJS:hover {
  color: #598558;
}
.skill-React:hover {
  color: #00d9ff;
}
.skill-HTML5:hover {
  color: #f16529;
}
.skill-CSS3:hover {
  color: #1c88c7;
}
.skill-NGINX:hover {
  color: #009639;
}
.skill-Mongo:hover {
  color: #68b245;
}
.skill-Bootstrap:hover {
  color: #563d7c;
}
.skill-Git:hover {
  color: #f05033;
}
.skill-Handlebars:hover {
  color: #f79622;
}
.skill-jQuery:hover {
  color: #78cff5;
}
.skill-Heroku:hover {
  color: #9e7cc2;
}
.skill-Less:hover {
  color: #1d365d;
}
.skill-TypeScript:hover {
  color: #3078c6;
}
.skill-AWS:hover {
  color: #ec912e;
}
.skill-Babel:hover {
  color: #f4da55;
}
.skill-Docker:hover {
  color: #1d97ed;
}
.skill-Wordpress:hover {
  color: #43a2c3;
}
.skill-Next:hover {
  color: #000;
}
.skill-Express:hover {
  color: #454445;
}
.skill-Laravel:hover {
  color: #F1513E;
}
.skill-Vite:hover {
  color: #FEDD35;
}
.time-line {
  padding-left: 140px;
  position: relative;
}
.time-line:before {
  background: #d1d2d4;
  background: linear-gradient(
    180deg,
    #fefefe 0,
    #d1d2d4 10%,
    #d1d2d4 90%,
    #fefefe
  );
  content: "";
  height: 100%;
  left: 105px;
  position: absolute;
  top: 0;
  width: 3px;
}
.time-line p {
  padding: 0;
}
.time-line > li:first-child > div {
  padding-top: 40px;
}
.time-line div > ul {
  margin-bottom: 15px;
}
.time-line .time-point {
  background: #fefefe;
  border: 3px solid #d1d2d4;
  border-radius: 100%;
  display: block;
  height: 13px;
  left: 100px;
  margin-top: 3px;
  position: absolute;
  width: 13px;
}
.time-line .time-date,
.time-line .time-date-subtitle {
  font-family: Oswald, sans-serif;
  font-size: 1rem;
  left: 0;
  margin-top: -4px;
  position: absolute;
  text-align: right;
  width: 90px;
}
.time-line .time-date-subtitle {
  font-family: Open Sans, sans-serif;
  font-size: 0.85rem;
  line-height: 1rem;
  margin-top: 18px;
  max-width: 100px;
}
.time-date-subtitle {
  color: #f90;
}
.h3-mb3 {
  margin-bottom: 1.5rem;
}
.hobbies {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
}
.hobbies span {
  margin-right: 0.6em;
}
.hobbies li {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}
.hobbies li i {
  border: 1px solid #222;
  border-radius: 100%;
  font-size: 2rem;
  margin: 0 0 10px;
  padding: 30px;
}
.fa-github:before {
  content: "\f09b";
}
.fa-linkedin:before {
  content: "\f08c";
}
.fa-bullseye,
.fa-database,
.fa-magic,
.fa-school {
  content: "\f549";
}
.fa-beer {
  content: "\f0fc";
}
.fa-comments {
  content: "\f086";
}
.fa-hat-wizard {
  content: "\f6e8";
}
.content p:before {
  color: #f90;
  content: "•";
  margin: 0 0.5rem 0 0;
}
[class*="fa-"] {
  position: relative;
  right: 5px;
  top: 5px;
}
[class*="devicon-:before"] {
  font-size: 1px;
}
.gitLogo:hover,
.mail:hover {
  color: #f90;
}
.mail {
  padding-bottom: 0.5em;
  top: 3px;
}
.gitLogo {
  position: relative;
  right: 5px;
  top: 3px;
}
.info {
  display: flex;
  justify-content: flex-end;
}
@media print {
  thead {
    display: table-header-group;
  }
  img,
  tr {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
a {
  text-decoration: none;
}
.orange,
a:hover {
  color: #f90;
}
/*# sourceMappingURL=main.42d21d0c.css.map*/