.paddingleftright {
  padding-left: 23px;
  padding-right: 23px; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  box-sizing: border-box; }

body {
  height: 100%;
  position: relative;
  overflow-x: hidden; }

.header {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../../images/code.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0; }
  @media (min-width: 770px) and (max-width: 1000px) {
    .header {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../../images/code_medium.jpg"); } }
  @media (max-width: 769px) {
    .header {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../../images/code_small.jpg"); } }
  .header__content-home {
    color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4; }
    .header__content-home h1 {
      animation-name: moveRight;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      font-size: 5rem;
      margin: 0; }
      @media (max-width: 600px) {
        .header__content-home h1 {
          font-size: 3rem; } }
      .header__content-home h1 span {
        color: #eece1a; }
    .header__content-home p {
      animation-name: moveLeft;
      animation-duration: 1s;
      animation-delay: 1s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: backwards;
      margin-left: 20px;
      margin-top: 40px;
      font-size: 1.4rem; }
      @media (max-width: 600px) {
        .header__content-home p {
          font-size: 1.2rem; } }
    .header__content-home__awesome {
      margin-top: 40px;
      text-align: center;
      animation-name: moveUp;
      animation-duration: 1s;
      animation-delay: 2s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: backwards; }
      .header__content-home__awesome a {
        transition: all 1s;
        cursor: pointer;
        color: white;
        text-decoration: none; }
        .header__content-home__awesome a:hover {
          color: #eece1a; }
        .header__content-home__awesome a:not(:first-child) {
          margin-left: 18px; }
  .header__menu-btn {
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; }
    .header__menu-btn input, .header__menu-btn label {
      opacity: 0; }
    .header__menu-btn input:checked ~ .header__menu-btn__nav .header__menu-btn__nav__picture {
      transform: translateY(0); }
      @media (max-width: 600px) {
        .header__menu-btn input:checked ~ .header__menu-btn__nav .header__menu-btn__nav__picture {
          transform: translateX(0); } }
    .header__menu-btn input:checked ~ .header__menu-btn__nav .header__menu-btn__nav__navigation {
      transform: translateY(0); }
      @media (max-width: 600px) {
        .header__menu-btn input:checked ~ .header__menu-btn__nav .header__menu-btn__nav__navigation {
          transform: translateX(-100%); } }
    .header__menu-btn input:checked ~ .header__menu-btn__menuIcon span {
      height: 0; }
    .header__menu-btn input:checked ~ .header__menu-btn__menuIcon span::before {
      transform: rotate(-135deg);
      top: 0; }
    .header__menu-btn input:checked ~ .header__menu-btn__menuIcon span::after {
      transform: rotate(135deg);
      top: 0; }
    .header__menu-btn label {
      display: block;
      height: 50px;
      position: absolute;
      top: 60px;
      right: 80px;
      cursor: pointer;
      z-index: 999999; }
      @media (max-width: 600px) {
        .header__menu-btn label {
          right: 40px; } }
    .header__menu-btn__menuIcon {
      position: absolute;
      top: 70px;
      right: 70px;
      width: 50px;
      height: 50px;
      z-index: 888888; }
      @media (max-width: 600px) {
        .header__menu-btn__menuIcon {
          right: 30px; } }
      .header__menu-btn__menuIcon span {
        display: inline-block;
        width: 40px;
        height: 3px;
        background-color: white;
        position: relative; }
        .header__menu-btn__menuIcon span::before {
          content: '';
          display: inline-block;
          position: absolute;
          top: -12px;
          width: 40px;
          height: 3px;
          background-color: white;
          transition: all 1s; }
        .header__menu-btn__menuIcon span::after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 12px;
          width: 40px;
          height: 3px;
          background-color: white;
          transition: all 1s; }
    .header__menu-btn__nav {
      display: flex;
      position: fixed;
      margin-top: -18px;
      width: 100%;
      height: 100%;
      opacity: .91;
      z-index: 1000; }
      .header__menu-btn__nav__picture {
        flex: 0 0 50%;
        background-color: #444;
        transform: translateY(-100%);
        transition: all .6s; }
        @media (max-width: 600px) {
          .header__menu-btn__nav__picture {
            flex: 0 0 100%;
            transform: translateX(-100%);
            height: 50%; } }
        .header__menu-btn__nav__picture img {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border: 2px solid #eece1a; }
          @media (max-width: 600px) {
            .header__menu-btn__nav__picture img {
              width: 140px;
              height: 140px; } }
      .header__menu-btn__nav__navigation {
        flex: 1;
        background-color: #373737;
        transform: translateY(100%);
        transition: all .6s;
        position: relative; }
        @media (max-width: 600px) {
          .header__menu-btn__nav__navigation {
            flex: 0 0 100%;
            transform: translateX(0);
            height: 50%;
            top: 50%; } }
        .header__menu-btn__nav__navigation ul {
          margin: 0;
          padding: 0;
          list-style-type: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
          .header__menu-btn__nav__navigation ul li {
            text-transform: uppercase;
            font-size: 25px;
            color: white;
            text-align: center;
            cursor: pointer; }
            @media (min-width: 600px) and (max-width: 700px) {
              .header__menu-btn__nav__navigation ul li {
                font-size: 18px; } }
            @media (min-width: 700px) and (max-width: 809px) {
              .header__menu-btn__nav__navigation ul li {
                font-size: 18px; } }
            @media (min-width: 809px) and (max-width: 965px) {
              .header__menu-btn__nav__navigation ul li {
                font-size: 21px; } }
            @media (max-width: 600px) {
              .header__menu-btn__nav__navigation ul li {
                font-size: 16px; } }
            .header__menu-btn__nav__navigation ul li a {
              text-decoration: none;
              color: white; }
              .header__menu-btn__nav__navigation ul li a.active {
                color: #eece1a; }
            .header__menu-btn__nav__navigation ul li:nth-child(2) {
              margin-top: 25px;
              margin-bottom: 25px; }
  .header__content-works {
    position: relative;
    z-index: 4;
    backface-visibility: hidden; }
    @media (max-width: 480px) {
      .header__content-works {
        padding-left: 0;
        padding-right: 0; } }
    .header__content-works__projects {
      margin-top: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center; }
      .header__content-works__projects__project {
        width: 300px;
        height: 270px;
        margin-left: 20px;
        margin-top: 70px;
        margin-bottom: 70px;
        position: relative;
        transition: border 1s;
        border-radius: 2px; }
        @media (max-width: 748px) {
          .header__content-works__projects__project {
            width: 100%; } }
        .header__content-works__projects__project:hover .header__content-works__projects__project__top {
          width: 100%; }
        .header__content-works__projects__project:hover .header__content-works__projects__project__right {
          height: 100%; }
        .header__content-works__projects__project:hover .header__content-works__projects__project__bottom {
          width: 100%; }
        .header__content-works__projects__project:hover .header__content-works__projects__project__left {
          height: 100%; }
        .header__content-works__projects__project__top {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 4px;
          background-color: #eece1a;
          transition: all .6s; }
        .header__content-works__projects__project__right {
          position: absolute;
          top: 0;
          right: 0;
          width: 4px;
          height: 0;
          background-color: #eece1a;
          transition: all .6s .6s; }
        .header__content-works__projects__project__bottom {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 0;
          height: 4px;
          background-color: #eece1a;
          transition: all .6s 1.2s; }
        .header__content-works__projects__project__left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 4px;
          height: 0;
          background-color: #eece1a;
          transition: all .6s 1.8s; }
        .header__content-works__projects__project:hover .header__content-works__projects__project__links {
          opacity: 1; }
        .header__content-works__projects__project img {
          width: 100%;
          height: 100%;
          transition: all .5s; }
        .header__content-works__projects__project__links {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          width: 100%;
          text-align: center;
          transition: opacity 1.5s; }
          .header__content-works__projects__project__links a {
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
            text-decoration: none; }
            .header__content-works__projects__project__links a:first-child {
              background-color: grey;
              width: 50%;
              text-align: center;
              color: black;
              cursor: pointer; }
            .header__content-works__projects__project__links a:last-child {
              background-color: black;
              width: 50%;
              text-align: center;
              color: white;
              margin-top: 5px; }
            .header__content-works__projects__project__links a.spotify {
              background-color: grey; }
  .header .contactP {
    display: inline-block;
    text-transform: capitalize; }
  .header .fa-arrow-down {
    color: white;
    animation-name: slideDown;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    margin-left: 20px; }
    @media (max-width: 595px) {
      .header .fa-arrow-down {
        margin-left: 50%;
        margin-top: 20px; } }
  .header__content-contact {
    position: relative;
    z-index: 4;
    backface-visibility: hidden; }
    @media (max-width: 480px) {
      .header__content-contact {
        padding-left: 0;
        padding-right: 0; } }
    .header__content-contact__buttons {
      margin-top: 80px; }
      @media (max-width: 600px) {
        .header__content-contact__buttons {
          margin-top: 40px; } }
      .header__content-contact__buttons__button {
        border: 3px solid white;
        padding: 25px;
        color: white;
        font-size: 24px;
        margin-left: 10px;
        margin-top: 10px;
        transition: all 1s;
        display: inline-block;
        min-width: 20%;
        text-align: center;
        cursor: pointer; }
        @media (max-width: 520px) {
          .header__content-contact__buttons__button {
            width: 100%;
            text-align: center; } }
        @media (max-width: 420px) {
          .header__content-contact__buttons__button {
            font-size: 18px; } }
        .header__content-contact__buttons__button span {
          color: #eece1a;
          transition: all 1s; }
        .header__content-contact__buttons__button:hover {
          padding: 15px;
          background-color: #eece1a;
          color: black;
          font-weight: bolder; }
        .header__content-contact__buttons__button:hover span {
          color: black; }

.h1 {
  color: white;
  text-transform: capitalize;
  font-size: 80px;
  animation-name: moveLeft;
  animation-duration: 1.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: backwards; }
  @media (max-width: 600px) {
    .h1 {
      font-size: 45px;
      margin-top: 100px; } }
  .h1 span {
    color: #eece1a; }

.p {
  color: white;
  margin-left: 20px;
  font-size: 30px; }
  @media (max-width: 600px) {
    .p {
      font-size: 20px;
      margin-left: 0; } }

@keyframes moveRight {
  0% {
    transform: translateX(-100%);
    opacity: 0; }
  80% {
    transform: translateX(15px);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes moveLeft {
  0% {
    transform: translateX(100%);
    opacity: 0; }
  80% {
    transform: translateX(-15px);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes moveUp {
  0% {
    transform: translateY(100%);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-30px); }
  100% {
    opacity: 1;
    transform: translateY(30px); } }

/*# sourceMappingURL=main.css.map */