* {
  box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden; }

body {
  font-family: 'Montserrat', sans-serif; }

header {
  height: 100vh;
  background-color: #a3afbb;
  display: flex; }
  header .particleDot {
    position: absolute;
    border-radius: 50%; }

@keyframes particleMoves1 {
  100% {
    transform: translate3d(62vw, 86vh, 83px); } }
  header .particleDot:nth-child(1) {
    height: 7px;
    width: 7px;
    background-color: #696189;
    transform: translate3d(31vw, 89vh, 70px);
    animation: particleMoves1 35s infinite;
    animation-delay: -0.2s; }

@keyframes particleMoves2 {
  100% {
    transform: translate3d(15vw, 39vh, 19px); } }
  header .particleDot:nth-child(2) {
    height: 20px;
    width: 20px;
    background-color: #651282;
    transform: translate3d(87vw, 11vh, 9px);
    animation: particleMoves2 35s infinite;
    animation-delay: -0.4s; }

@keyframes particleMoves3 {
  100% {
    transform: translate3d(9vw, 63vh, 56px); } }
  header .particleDot:nth-child(3) {
    height: 13px;
    width: 13px;
    background-color: #716541;
    transform: translate3d(36vw, 11vh, 73px);
    animation: particleMoves3 35s infinite;
    animation-delay: -0.6s; }

@keyframes particleMoves4 {
  100% {
    transform: translate3d(8vw, 42vh, 53px); } }
  header .particleDot:nth-child(4) {
    height: 7px;
    width: 7px;
    background-color: #478968;
    transform: translate3d(73vw, 89vh, 45px);
    animation: particleMoves4 35s infinite;
    animation-delay: -0.8s; }

@keyframes particleMoves5 {
  100% {
    transform: translate3d(22vw, 65vh, 92px); } }
  header .particleDot:nth-child(5) {
    height: 7px;
    width: 7px;
    background-color: #388783;
    transform: translate3d(85vw, 14vh, 43px);
    animation: particleMoves5 35s infinite;
    animation-delay: -1s; }

@keyframes particleMoves6 {
  100% {
    transform: translate3d(57vw, 83vh, 4px); } }
  header .particleDot:nth-child(6) {
    height: 17px;
    width: 17px;
    background-color: #576155;
    transform: translate3d(19vw, 77vh, 25px);
    animation: particleMoves6 35s infinite;
    animation-delay: -1.2s; }

@keyframes particleMoves7 {
  100% {
    transform: translate3d(79vw, 78vh, 87px); } }
  header .particleDot:nth-child(7) {
    height: 19px;
    width: 19px;
    background-color: #877422;
    transform: translate3d(43vw, 54vh, 79px);
    animation: particleMoves7 35s infinite;
    animation-delay: -1.4s; }

@keyframes particleMoves8 {
  100% {
    transform: translate3d(49vw, 15vh, 97px); } }
  header .particleDot:nth-child(8) {
    height: 6px;
    width: 6px;
    background-color: #857535;
    transform: translate3d(90vw, 58vh, 46px);
    animation: particleMoves8 35s infinite;
    animation-delay: -1.6s; }

@keyframes particleMoves9 {
  100% {
    transform: translate3d(69vw, 71vh, 97px); } }
  header .particleDot:nth-child(9) {
    height: 18px;
    width: 18px;
    background-color: #225586;
    transform: translate3d(26vw, 33vh, 13px);
    animation: particleMoves9 35s infinite;
    animation-delay: -1.8s; }

@keyframes particleMoves10 {
  100% {
    transform: translate3d(19vw, 58vh, 27px); } }
  header .particleDot:nth-child(10) {
    height: 14px;
    width: 14px;
    background-color: #813243;
    transform: translate3d(7vw, 1vh, 10px);
    animation: particleMoves10 35s infinite;
    animation-delay: -2s; }

@keyframes particleMoves11 {
  100% {
    transform: translate3d(32vw, 13vh, 78px); } }
  header .particleDot:nth-child(11) {
    height: 16px;
    width: 16px;
    background-color: #186992;
    transform: translate3d(1vw, 59vh, 76px);
    animation: particleMoves11 35s infinite;
    animation-delay: -2.2s; }

@keyframes particleMoves12 {
  100% {
    transform: translate3d(52vw, 47vh, 80px); } }
  header .particleDot:nth-child(12) {
    height: 7px;
    width: 7px;
    background-color: #189139;
    transform: translate3d(34vw, 82vh, 97px);
    animation: particleMoves12 35s infinite;
    animation-delay: -2.4s; }

@keyframes particleMoves13 {
  100% {
    transform: translate3d(83vw, 10vh, 39px); } }
  header .particleDot:nth-child(13) {
    height: 8px;
    width: 8px;
    background-color: #494949;
    transform: translate3d(36vw, 19vh, 58px);
    animation: particleMoves13 35s infinite;
    animation-delay: -2.6s; }

@keyframes particleMoves14 {
  100% {
    transform: translate3d(71vw, 27vh, 45px); } }
  header .particleDot:nth-child(14) {
    height: 20px;
    width: 20px;
    background-color: #139234;
    transform: translate3d(20vw, 17vh, 2px);
    animation: particleMoves14 35s infinite;
    animation-delay: -2.8s; }

@keyframes particleMoves15 {
  100% {
    transform: translate3d(37vw, 15vh, 83px); } }
  header .particleDot:nth-child(15) {
    height: 7px;
    width: 7px;
    background-color: #557915;
    transform: translate3d(61vw, 72vh, 12px);
    animation: particleMoves15 35s infinite;
    animation-delay: -3s; }

@keyframes particleMoves16 {
  100% {
    transform: translate3d(52vw, 37vh, 78px); } }
  header .particleDot:nth-child(16) {
    height: 11px;
    width: 11px;
    background-color: #176845;
    transform: translate3d(3vw, 57vh, 75px);
    animation: particleMoves16 35s infinite;
    animation-delay: -3.2s; }

@keyframes particleMoves17 {
  100% {
    transform: translate3d(17vw, 87vh, 22px); } }
  header .particleDot:nth-child(17) {
    height: 18px;
    width: 18px;
    background-color: #634694;
    transform: translate3d(7vw, 53vh, 74px);
    animation: particleMoves17 35s infinite;
    animation-delay: -3.4s; }

@keyframes particleMoves18 {
  100% {
    transform: translate3d(80vw, 86vh, 65px); } }
  header .particleDot:nth-child(18) {
    height: 7px;
    width: 7px;
    background-color: #858446;
    transform: translate3d(7vw, 61vh, 31px);
    animation: particleMoves18 35s infinite;
    animation-delay: -3.6s; }

@keyframes particleMoves19 {
  100% {
    transform: translate3d(16vw, 16vh, 11px); } }
  header .particleDot:nth-child(19) {
    height: 13px;
    width: 13px;
    background-color: #953424;
    transform: translate3d(44vw, 46vh, 6px);
    animation: particleMoves19 35s infinite;
    animation-delay: -3.8s; }

@keyframes particleMoves20 {
  100% {
    transform: translate3d(59vw, 33vh, 51px); } }
  header .particleDot:nth-child(20) {
    height: 12px;
    width: 12px;
    background-color: #185497;
    transform: translate3d(87vw, 35vh, 1px);
    animation: particleMoves20 35s infinite;
    animation-delay: -4s; }

@keyframes particleMoves21 {
  100% {
    transform: translate3d(22vw, 39vh, 8px); } }
  header .particleDot:nth-child(21) {
    height: 17px;
    width: 17px;
    background-color: #829675;
    transform: translate3d(78vw, 41vh, 2px);
    animation: particleMoves21 35s infinite;
    animation-delay: -4.2s; }

@keyframes particleMoves22 {
  100% {
    transform: translate3d(74vw, 41vh, 41px); } }
  header .particleDot:nth-child(22) {
    height: 19px;
    width: 19px;
    background-color: #415892;
    transform: translate3d(30vw, 63vh, 64px);
    animation: particleMoves22 35s infinite;
    animation-delay: -4.4s; }

@keyframes particleMoves23 {
  100% {
    transform: translate3d(37vw, 82vh, 58px); } }
  header .particleDot:nth-child(23) {
    height: 16px;
    width: 16px;
    background-color: #282817;
    transform: translate3d(75vw, 27vh, 39px);
    animation: particleMoves23 35s infinite;
    animation-delay: -4.6s; }

@keyframes particleMoves24 {
  100% {
    transform: translate3d(32vw, 68vh, 29px); } }
  header .particleDot:nth-child(24) {
    height: 14px;
    width: 14px;
    background-color: #219829;
    transform: translate3d(57vw, 63vh, 39px);
    animation: particleMoves24 35s infinite;
    animation-delay: -4.8s; }

@keyframes particleMoves25 {
  100% {
    transform: translate3d(84vw, 9vh, 44px); } }
  header .particleDot:nth-child(25) {
    height: 13px;
    width: 13px;
    background-color: #987883;
    transform: translate3d(81vw, 44vh, 96px);
    animation: particleMoves25 35s infinite;
    animation-delay: -5s; }

@keyframes particleMoves26 {
  100% {
    transform: translate3d(29vw, 68vh, 27px); } }
  header .particleDot:nth-child(26) {
    height: 13px;
    width: 13px;
    background-color: #216265;
    transform: translate3d(39vw, 3vh, 1px);
    animation: particleMoves26 35s infinite;
    animation-delay: -5.2s; }

@keyframes particleMoves27 {
  100% {
    transform: translate3d(13vw, 9vh, 53px); } }
  header .particleDot:nth-child(27) {
    height: 10px;
    width: 10px;
    background-color: #694213;
    transform: translate3d(74vw, 35vh, 27px);
    animation: particleMoves27 35s infinite;
    animation-delay: -5.4s; }

@keyframes particleMoves28 {
  100% {
    transform: translate3d(63vw, 86vh, 88px); } }
  header .particleDot:nth-child(28) {
    height: 13px;
    width: 13px;
    background-color: #883613;
    transform: translate3d(46vw, 42vh, 83px);
    animation: particleMoves28 35s infinite;
    animation-delay: -5.6s; }

@keyframes particleMoves29 {
  100% {
    transform: translate3d(1vw, 47vh, 4px); } }
  header .particleDot:nth-child(29) {
    height: 17px;
    width: 17px;
    background-color: #831865;
    transform: translate3d(2vw, 42vh, 83px);
    animation: particleMoves29 35s infinite;
    animation-delay: -5.8s; }

@keyframes particleMoves30 {
  100% {
    transform: translate3d(54vw, 21vh, 64px); } }
  header .particleDot:nth-child(30) {
    height: 12px;
    width: 12px;
    background-color: #918964;
    transform: translate3d(49vw, 48vh, 8px);
    animation: particleMoves30 35s infinite;
    animation-delay: -6s; }

@keyframes particleMoves31 {
  100% {
    transform: translate3d(24vw, 63vh, 43px); } }
  header .particleDot:nth-child(31) {
    height: 9px;
    width: 9px;
    background-color: #435571;
    transform: translate3d(42vw, 10vh, 71px);
    animation: particleMoves31 35s infinite;
    animation-delay: -6.2s; }

@keyframes particleMoves32 {
  100% {
    transform: translate3d(81vw, 41vh, 47px); } }
  header .particleDot:nth-child(32) {
    height: 7px;
    width: 7px;
    background-color: #265927;
    transform: translate3d(63vw, 36vh, 30px);
    animation: particleMoves32 35s infinite;
    animation-delay: -6.4s; }

@keyframes particleMoves33 {
  100% {
    transform: translate3d(83vw, 28vh, 13px); } }
  header .particleDot:nth-child(33) {
    height: 18px;
    width: 18px;
    background-color: #478215;
    transform: translate3d(66vw, 88vh, 38px);
    animation: particleMoves33 35s infinite;
    animation-delay: -6.6s; }

@keyframes particleMoves34 {
  100% {
    transform: translate3d(47vw, 14vh, 65px); } }
  header .particleDot:nth-child(34) {
    height: 20px;
    width: 20px;
    background-color: #371758;
    transform: translate3d(75vw, 67vh, 65px);
    animation: particleMoves34 35s infinite;
    animation-delay: -6.8s; }

@keyframes particleMoves35 {
  100% {
    transform: translate3d(6vw, 40vh, 40px); } }
  header .particleDot:nth-child(35) {
    height: 14px;
    width: 14px;
    background-color: #734239;
    transform: translate3d(75vw, 67vh, 38px);
    animation: particleMoves35 35s infinite;
    animation-delay: -7s; }

@keyframes particleMoves36 {
  100% {
    transform: translate3d(59vw, 36vh, 58px); } }
  header .particleDot:nth-child(36) {
    height: 11px;
    width: 11px;
    background-color: #886576;
    transform: translate3d(28vw, 80vh, 22px);
    animation: particleMoves36 35s infinite;
    animation-delay: -7.2s; }

@keyframes particleMoves37 {
  100% {
    transform: translate3d(9vw, 84vh, 35px); } }
  header .particleDot:nth-child(37) {
    height: 9px;
    width: 9px;
    background-color: #848955;
    transform: translate3d(27vw, 9vh, 77px);
    animation: particleMoves37 35s infinite;
    animation-delay: -7.4s; }

@keyframes particleMoves38 {
  100% {
    transform: translate3d(63vw, 85vh, 44px); } }
  header .particleDot:nth-child(38) {
    height: 18px;
    width: 18px;
    background-color: #767133;
    transform: translate3d(42vw, 47vh, 71px);
    animation: particleMoves38 35s infinite;
    animation-delay: -7.6s; }

@keyframes particleMoves39 {
  100% {
    transform: translate3d(87vw, 38vh, 91px); } }
  header .particleDot:nth-child(39) {
    height: 7px;
    width: 7px;
    background-color: #573139;
    transform: translate3d(16vw, 28vh, 33px);
    animation: particleMoves39 35s infinite;
    animation-delay: -7.8s; }

@keyframes particleMoves40 {
  100% {
    transform: translate3d(52vw, 72vh, 22px); } }
  header .particleDot:nth-child(40) {
    height: 7px;
    width: 7px;
    background-color: #227879;
    transform: translate3d(90vw, 4vh, 67px);
    animation: particleMoves40 35s infinite;
    animation-delay: -8s; }

@keyframes particleMoves41 {
  100% {
    transform: translate3d(10vw, 83vh, 67px); } }
  header .particleDot:nth-child(41) {
    height: 16px;
    width: 16px;
    background-color: #673921;
    transform: translate3d(3vw, 59vh, 98px);
    animation: particleMoves41 35s infinite;
    animation-delay: -8.2s; }

@keyframes particleMoves42 {
  100% {
    transform: translate3d(76vw, 72vh, 23px); } }
  header .particleDot:nth-child(42) {
    height: 19px;
    width: 19px;
    background-color: #235884;
    transform: translate3d(71vw, 62vh, 80px);
    animation: particleMoves42 35s infinite;
    animation-delay: -8.4s; }

@keyframes particleMoves43 {
  100% {
    transform: translate3d(26vw, 36vh, 22px); } }
  header .particleDot:nth-child(43) {
    height: 13px;
    width: 13px;
    background-color: #771711;
    transform: translate3d(42vw, 16vh, 60px);
    animation: particleMoves43 35s infinite;
    animation-delay: -8.6s; }

@keyframes particleMoves44 {
  100% {
    transform: translate3d(57vw, 38vh, 79px); } }
  header .particleDot:nth-child(44) {
    height: 16px;
    width: 16px;
    background-color: #732945;
    transform: translate3d(80vw, 56vh, 9px);
    animation: particleMoves44 35s infinite;
    animation-delay: -8.8s; }

@keyframes particleMoves45 {
  100% {
    transform: translate3d(78vw, 39vh, 70px); } }
  header .particleDot:nth-child(45) {
    height: 11px;
    width: 11px;
    background-color: #733933;
    transform: translate3d(55vw, 11vh, 76px);
    animation: particleMoves45 35s infinite;
    animation-delay: -9s; }

@keyframes particleMoves46 {
  100% {
    transform: translate3d(30vw, 81vh, 74px); } }
  header .particleDot:nth-child(46) {
    height: 19px;
    width: 19px;
    background-color: #917752;
    transform: translate3d(71vw, 74vh, 23px);
    animation: particleMoves46 35s infinite;
    animation-delay: -9.2s; }

@keyframes particleMoves47 {
  100% {
    transform: translate3d(44vw, 85vh, 81px); } }
  header .particleDot:nth-child(47) {
    height: 8px;
    width: 8px;
    background-color: #248766;
    transform: translate3d(48vw, 73vh, 92px);
    animation: particleMoves47 35s infinite;
    animation-delay: -9.4s; }

@keyframes particleMoves48 {
  100% {
    transform: translate3d(18vw, 34vh, 60px); } }
  header .particleDot:nth-child(48) {
    height: 18px;
    width: 18px;
    background-color: #688149;
    transform: translate3d(79vw, 28vh, 98px);
    animation: particleMoves48 35s infinite;
    animation-delay: -9.6s; }

@keyframes particleMoves49 {
  100% {
    transform: translate3d(84vw, 19vh, 89px); } }
  header .particleDot:nth-child(49) {
    height: 11px;
    width: 11px;
    background-color: #519388;
    transform: translate3d(74vw, 19vh, 56px);
    animation: particleMoves49 35s infinite;
    animation-delay: -9.8s; }

@keyframes particleMoves50 {
  100% {
    transform: translate3d(61vw, 8vh, 39px); } }
  header .particleDot:nth-child(50) {
    height: 8px;
    width: 8px;
    background-color: #439912;
    transform: translate3d(85vw, 12vh, 38px);
    animation: particleMoves50 35s infinite;
    animation-delay: -10s; }

@keyframes particleMoves51 {
  100% {
    transform: translate3d(15vw, 31vh, 11px); } }
  header .particleDot:nth-child(51) {
    height: 7px;
    width: 7px;
    background-color: #991121;
    transform: translate3d(41vw, 60vh, 51px);
    animation: particleMoves51 35s infinite;
    animation-delay: -10.2s; }

@keyframes particleMoves52 {
  100% {
    transform: translate3d(73vw, 71vh, 80px); } }
  header .particleDot:nth-child(52) {
    height: 11px;
    width: 11px;
    background-color: #349956;
    transform: translate3d(25vw, 56vh, 70px);
    animation: particleMoves52 35s infinite;
    animation-delay: -10.4s; }

@keyframes particleMoves53 {
  100% {
    transform: translate3d(84vw, 33vh, 72px); } }
  header .particleDot:nth-child(53) {
    height: 20px;
    width: 20px;
    background-color: #914823;
    transform: translate3d(8vw, 39vh, 58px);
    animation: particleMoves53 35s infinite;
    animation-delay: -10.6s; }

@keyframes particleMoves54 {
  100% {
    transform: translate3d(2vw, 37vh, 84px); } }
  header .particleDot:nth-child(54) {
    height: 15px;
    width: 15px;
    background-color: #937251;
    transform: translate3d(27vw, 8vh, 3px);
    animation: particleMoves54 35s infinite;
    animation-delay: -10.8s; }

@keyframes particleMoves55 {
  100% {
    transform: translate3d(83vw, 28vh, 3px); } }
  header .particleDot:nth-child(55) {
    height: 18px;
    width: 18px;
    background-color: #279944;
    transform: translate3d(72vw, 60vh, 63px);
    animation: particleMoves55 35s infinite;
    animation-delay: -11s; }

@keyframes particleMoves56 {
  100% {
    transform: translate3d(70vw, 62vh, 29px); } }
  header .particleDot:nth-child(56) {
    height: 20px;
    width: 20px;
    background-color: #674261;
    transform: translate3d(66vw, 79vh, 11px);
    animation: particleMoves56 35s infinite;
    animation-delay: -11.2s; }

@keyframes particleMoves57 {
  100% {
    transform: translate3d(20vw, 39vh, 42px); } }
  header .particleDot:nth-child(57) {
    height: 13px;
    width: 13px;
    background-color: #277227;
    transform: translate3d(71vw, 10vh, 99px);
    animation: particleMoves57 35s infinite;
    animation-delay: -11.4s; }

@keyframes particleMoves58 {
  100% {
    transform: translate3d(46vw, 84vh, 43px); } }
  header .particleDot:nth-child(58) {
    height: 19px;
    width: 19px;
    background-color: #443567;
    transform: translate3d(19vw, 81vh, 77px);
    animation: particleMoves58 35s infinite;
    animation-delay: -11.6s; }

@keyframes particleMoves59 {
  100% {
    transform: translate3d(11vw, 46vh, 28px); } }
  header .particleDot:nth-child(59) {
    height: 18px;
    width: 18px;
    background-color: #893739;
    transform: translate3d(61vw, 55vh, 90px);
    animation: particleMoves59 35s infinite;
    animation-delay: -11.8s; }

@keyframes particleMoves60 {
  100% {
    transform: translate3d(90vw, 7vh, 50px); } }
  header .particleDot:nth-child(60) {
    height: 12px;
    width: 12px;
    background-color: #715541;
    transform: translate3d(53vw, 70vh, 60px);
    animation: particleMoves60 35s infinite;
    animation-delay: -12s; }
  header nav {
    display: flex;
    background: transparent;
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; }
    header nav #hamburgerBtn {
      margin-top: 10px;
      border: 0;
      width: 26px;
      height: 26px;
      position: relative;
      border: 0;
      border-radius: 500px;
      transform: rotate(0deg);
      transition: .5s ease-in-out;
      cursor: pointer; }
      header nav #hamburgerBtn span {
        display: block;
        position: absolute;
        height: 5px;
        width: 100%;
        background: #766F57;
        border-radius: 9px;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out; }
        header nav #hamburgerBtn span:nth-child(1) {
          top: 0px; }
        header nav #hamburgerBtn span:nth-child(2) {
          top: 10px; }
        header nav #hamburgerBtn span:nth-child(3) {
          top: 20px; }
      header nav #hamburgerBtn.open span:nth-child(1) {
        top: 10px;
        transform: rotate(135deg); }
      header nav #hamburgerBtn.open span:nth-child(2) {
        opacity: 0;
        left: -30px; }
      header nav #hamburgerBtn.open span:nth-child(3) {
        top: 10px;
        transform: rotate(-135deg); }
    header nav a {
      color: #FFF;
      z-index: 3; }
      header nav a:focus {
        outline: none; }
      header nav a::-moz-focus-inner {
        border: 0; }
  header .firstLookBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #FFF;
    z-index: 2; }
    header .firstLookBox a {
      color: #FFF; }
      header .firstLookBox a i {
        position: relative;
        animation: nextSectionArrow 1s infinite; }

.aboutMeInfo {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to top left, #223f80, #cc9c00); }
  .aboutMeInfo .aboutMe .aboutMeText {
    color: #FFF; }
    .aboutMeInfo .aboutMe .aboutMeText h2 {
      text-align: center; }
    .aboutMeInfo .aboutMe .aboutMeText p {
      text-align: justify; }

.technologies {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  align-items: center;
  background-color: #766F57; }
  .technologies h2 {
    width: 100%;
    height: auto;
    text-align: center; }
  .technologies .stackImages #tech1 {
    display: flex;
    justify-content: center; }
    .technologies .stackImages #tech1 p {
      font-weight: bold; }
  .technologies .stackImages #tech2 {
    display: flex;
    justify-content: center; }
    .technologies .stackImages #tech2 p {
      font-weight: bold; }
  .technologies .stackImages #tech3 {
    display: flex;
    justify-content: center; }
    .technologies .stackImages #tech3 p {
      font-weight: bold; }
  .technologies .stackImages #tech4 {
    display: flex;
    justify-content: center; }
    .technologies .stackImages #tech4 p {
      font-weight: bold; }
  .technologies .stackImages #tech5 {
    display: flex;
    justify-content: center; }
    .technologies .stackImages #tech5 p {
      font-weight: bold; }
  .technologies .stackImages #tech6 {
    display: flex;
    justify-content: center; }
    .technologies .stackImages #tech6 p {
      font-weight: bold; }
  .technologies .stackImages .iconChange1 {
    background-color: #FFF;
    clip-path: polygon(10% 5%, 90% 5%, 85% 80%, 50% 95%, 15% 80%); }
  .technologies .stackImages .iconChange2 {
    background-color: #FFF;
    display: flex;
    justify-content: center; }

.projects {
  background-image: url("/images/projectBackgroundImage2.jpeg");
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .projects h2 {
    width: 100%;
    height: auto;
    text-align: center; }
  .projects .projectBox {
    width: 80%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    .projects .projectBox .project1 {
      position: relative;
      border-radius: 5%;
      width: 40%;
      height: 40%; }
      .projects .projectBox .project1 img {
        border-radius: 5%;
        width: 100%;
        height: 100%; }
      .projects .projectBox .project1 .hoverBtns {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .projects .projectBox .project1 .hoverBtns i {
          background: #FFF;
          padding: 5px;
          border-radius: 10%;
          color: #000; }
    .projects .projectBox .project2 {
      position: relative;
      border-radius: 5%;
      width: 40%;
      height: 40%; }
      .projects .projectBox .project2 img {
        border-radius: 5%;
        width: 100%;
        height: 100%; }
      .projects .projectBox .project2 .hoverBtns {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .projects .projectBox .project2 .hoverBtns i {
          background: #FFF;
          padding: 5px;
          border-radius: 10%;
          color: #000; }
    .projects .projectBox .project3 {
      position: relative;
      border-radius: 5%;
      width: 40%;
      height: 40%; }
      .projects .projectBox .project3 img {
        border-radius: 5%;
        width: 100%;
        height: 100%; }
      .projects .projectBox .project3 .hoverBtns {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .projects .projectBox .project3 .hoverBtns i {
          background: #FFF;
          padding: 5px;
          border-radius: 10%;
          color: #000; }
    .projects .projectBox .project4 {
      position: relative;
      border-radius: 5%;
      width: 40%;
      height: 40%; }
      .projects .projectBox .project4 img {
        border-radius: 5%;
        width: 100%;
        height: 100%; }
      .projects .projectBox .project4 .hoverBtns {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .projects .projectBox .project4 .hoverBtns i {
          background: #FFF;
          padding: 5px;
          border-radius: 10%;
          color: #000; }

.contact {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  background-color: #000; }
  .contact h2 {
    width: 100%;
    height: auto;
    text-align: center;
    color: #FFF; }
  .contact .contactInfo {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column; }
    .contact .contactInfo p {
      color: #FFF; }
    .contact .contactInfo .contactMethods {
      display: flex;
      justify-content: center;
      flex-direction: row; }
      .contact .contactInfo .contactMethods p {
        display: none; }
      .contact .contactInfo .contactMethods .mailBox i,
      .contact .contactInfo .contactMethods .phoneBox i,
      .contact .contactInfo .contactMethods .messengerBox i,
      .contact .contactInfo .contactMethods .linkedInBox i {
        display: flex;
        justify-content: center;
        background-color: #FFF; }
      .contact .contactInfo .contactMethods .mailBox .mailIcon,
      .contact .contactInfo .contactMethods .phoneBox .mailIcon,
      .contact .contactInfo .contactMethods .messengerBox .mailIcon,
      .contact .contactInfo .contactMethods .linkedInBox .mailIcon {
        color: #D50707; }
      .contact .contactInfo .contactMethods .mailBox .phoneIcon,
      .contact .contactInfo .contactMethods .phoneBox .phoneIcon,
      .contact .contactInfo .contactMethods .messengerBox .phoneIcon,
      .contact .contactInfo .contactMethods .linkedInBox .phoneIcon {
        color: #2DC100; }
      .contact .contactInfo .contactMethods .mailBox .messengerIcon,
      .contact .contactInfo .contactMethods .phoneBox .messengerIcon,
      .contact .contactInfo .contactMethods .messengerBox .messengerIcon,
      .contact .contactInfo .contactMethods .linkedInBox .messengerIcon {
        color: #007FFF; }
      .contact .contactInfo .contactMethods .mailBox .linkedInIcon,
      .contact .contactInfo .contactMethods .phoneBox .linkedInIcon,
      .contact .contactInfo .contactMethods .messengerBox .linkedInIcon,
      .contact .contactInfo .contactMethods .linkedInBox .linkedInIcon {
        color: #FFDA44; }
      .contact .contactInfo .contactMethods .mailBox a:hover,
      .contact .contactInfo .contactMethods .messengerBox a:hover,
      .contact .contactInfo .contactMethods .linkedInBox a:hover {
        text-decoration: none; }
      .contact .contactInfo .contactMethods .phoneBox {
        position: relative; }
        .contact .contactInfo .contactMethods .phoneBox p {
          width: auto;
          position: absolute;
          white-space: nowrap; }
    .contact .contactInfo .mapBox {
      width: 100%;
      padding: 0;
      margin: 0; }
      .contact .contactInfo .mapBox iframe {
        width: 100%; }

footer {
  width: 100%;
  height: auto;
  position: relative; }
  footer .copyRights {
    width: 100%;
    height: auto;
    background-color: #766F57;
    padding: 20px;
    position: absolute;
    top: -4px;
    left: 0; }
  footer .backToTop {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; }
    footer .backToTop .btnToTop {
      display: none;
      outline: none;
      width: 50px;
      height: 50px;
      background-color: #5f4b8b;
      border-radius: 50%;
      position: fixed;
      bottom: 20px;
      right: 20px;
      color: #FFF;
      cursor: pointer; }
      footer .backToTop .btnToTop:hover {
        color: #000;
        background-color: #7d698b; }

@media only screen and (min-width: 1200px) {
  nav {
    justify-content: flex-end;
    font-size: 1.5rem; }
    nav .menuTop {
      display: flex;
      flex-direction: row;
      height: 80px; }
    nav a {
      transition: transform .3s ease-in-out, border-bottom .3s ease-in-out;
      font-weight: bold;
      margin: 15px; }
      nav a:hover {
        color: #766F57;
        transform: scale(1.1);
        border-bottom: 2px #766F57 solid; }
  .firstLookBox h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 4rem;
    margin: 30px auto; }
  .firstLookBox p {
    font-size: 18px; }
  .firstLookBox a {
    font-size: 35px;
    border: none; }
  .aboutMe {
    display: flex;
    justify-content: center;
    align-items: center; }
    .aboutMe .portfolioPhoto {
      width: 200px;
      height: auto;
      min-width: 200px; }
    .aboutMe .aboutMeText {
      padding: 30px; }
      .aboutMe .aboutMeText h2 {
        font-size: 3rem;
        margin-bottom: 20px; }
      .aboutMe .aboutMeText p {
        font-size: 20px; }
  .technologies {
    padding: 40px 150px; }
    .technologies h2 {
      font-size: 3rem;
      margin: 30px auto; }
    .technologies .stackImages {
      display: flex;
      justify-content: center;
      width: 100%;
      height: auto;
      flex-wrap: wrap; }
      .technologies .stackImages #tech1 {
        flex-direction: column;
        align-items: center;
        margin: 70px;
        width: 30%; }
        .technologies .stackImages #tech1 i {
          font-size: 100px; }
        .technologies .stackImages #tech1 p {
          font-size: 50px; }
      .technologies .stackImages #tech2 {
        flex-direction: column;
        align-items: center;
        margin: 70px;
        width: 30%; }
        .technologies .stackImages #tech2 i {
          font-size: 100px; }
        .technologies .stackImages #tech2 p {
          font-size: 50px; }
      .technologies .stackImages #tech3 {
        flex-direction: column;
        align-items: center;
        margin: 70px;
        width: 30%; }
        .technologies .stackImages #tech3 i {
          font-size: 100px; }
        .technologies .stackImages #tech3 p {
          font-size: 50px; }
      .technologies .stackImages #tech4 {
        flex-direction: column;
        align-items: center;
        margin: 70px;
        width: 30%; }
        .technologies .stackImages #tech4 i {
          font-size: 100px; }
        .technologies .stackImages #tech4 p {
          font-size: 50px; }
      .technologies .stackImages #tech5 {
        flex-direction: column;
        align-items: center;
        margin: 70px;
        width: 30%; }
        .technologies .stackImages #tech5 i {
          font-size: 100px; }
        .technologies .stackImages #tech5 p {
          font-size: 50px; }
      .technologies .stackImages #tech6 {
        flex-direction: column;
        align-items: center;
        margin: 70px;
        width: 30%; }
        .technologies .stackImages #tech6 i {
          font-size: 100px; }
        .technologies .stackImages #tech6 p {
          font-size: 50px; }
      .technologies .stackImages .iconChange2 {
        line-height: 88px;
        width: 90px; }
  .projects h2 {
    font-size: 3rem;
    margin: 30px auto; }
  .projects .projectBox .project1 {
    margin: 30px; }
    .projects .projectBox .project1:hover img {
      filter: brightness(35%); }
    .projects .projectBox .project1:hover .hoverBtns {
      display: initial; }
    .projects .projectBox .project1 .hoverBtns {
      display: none; }
      .projects .projectBox .project1 .hoverBtns i {
        font-size: 30px;
        margin: 10px; }
        .projects .projectBox .project1 .hoverBtns i:hover {
          background-color: #c2c9cf;
          color: #766F57;
          transform: scale(1.1); }
  .projects .projectBox .project2 {
    margin: 30px; }
    .projects .projectBox .project2:hover img {
      filter: brightness(35%); }
    .projects .projectBox .project2:hover .hoverBtns {
      display: initial; }
    .projects .projectBox .project2 .hoverBtns {
      display: none; }
      .projects .projectBox .project2 .hoverBtns i {
        font-size: 30px;
        margin: 10px; }
        .projects .projectBox .project2 .hoverBtns i:hover {
          background-color: #c2c9cf;
          color: #766F57;
          transform: scale(1.1); }
  .projects .projectBox .project3 {
    margin: 30px; }
    .projects .projectBox .project3:hover img {
      filter: brightness(35%); }
    .projects .projectBox .project3:hover .hoverBtns {
      display: initial; }
    .projects .projectBox .project3 .hoverBtns {
      display: none; }
      .projects .projectBox .project3 .hoverBtns i {
        font-size: 30px;
        margin: 10px; }
        .projects .projectBox .project3 .hoverBtns i:hover {
          background-color: #c2c9cf;
          color: #766F57;
          transform: scale(1.1); }
  .projects .projectBox .project4 {
    margin: 30px; }
    .projects .projectBox .project4:hover img {
      filter: brightness(35%); }
    .projects .projectBox .project4:hover .hoverBtns {
      display: initial; }
    .projects .projectBox .project4 .hoverBtns {
      display: none; }
      .projects .projectBox .project4 .hoverBtns i {
        font-size: 30px;
        margin: 10px; }
        .projects .projectBox .project4 .hoverBtns i:hover {
          background-color: #c2c9cf;
          color: #766F57;
          transform: scale(1.1); }
  .contact h2 {
    font-size: 3rem;
    margin: 30px auto; }
  .contact .contactInfo > p {
    font-size: 23px;
    margin: 30px auto; }
  .contact .contactInfo .contactMethods {
    margin: 30px auto; }
    .contact .contactInfo .contactMethods .mailBox i,
    .contact .contactInfo .contactMethods .phoneBox i,
    .contact .contactInfo .contactMethods .messengerBox i,
    .contact .contactInfo .contactMethods .linkedInBox i {
      font-size: 55px;
      margin: 30px;
      line-height: 40px;
      cursor: pointer; }
      .contact .contactInfo .contactMethods .mailBox i:hover,
      .contact .contactInfo .contactMethods .phoneBox i:hover,
      .contact .contactInfo .contactMethods .messengerBox i:hover,
      .contact .contactInfo .contactMethods .linkedInBox i:hover {
        transform: scale(1.2); }
    .contact .contactInfo .contactMethods .mailBox .mailIcon,
    .contact .contactInfo .contactMethods .phoneBox .mailIcon,
    .contact .contactInfo .contactMethods .messengerBox .mailIcon,
    .contact .contactInfo .contactMethods .linkedInBox .mailIcon {
      width: 50px; }
    .contact .contactInfo .contactMethods .mailBox .phoneIcon,
    .contact .contactInfo .contactMethods .phoneBox .phoneIcon,
    .contact .contactInfo .contactMethods .messengerBox .phoneIcon,
    .contact .contactInfo .contactMethods .linkedInBox .phoneIcon {
      width: 45px; }
    .contact .contactInfo .contactMethods .mailBox .messengerIcon,
    .contact .contactInfo .contactMethods .phoneBox .messengerIcon,
    .contact .contactInfo .contactMethods .messengerBox .messengerIcon,
    .contact .contactInfo .contactMethods .linkedInBox .messengerIcon {
      line-height: 32px;
      width: 32px; }
    .contact .contactInfo .contactMethods .phoneBox p {
      top: 90px;
      left: 0; } }

@media only screen and (max-width: 1199px) {
  nav {
    justify-content: flex-end;
    font-size: 1.2rem; }
    nav .menuTop {
      display: flex;
      flex-direction: row; }
      nav .menuTop a {
        margin: 10px; }
  .firstLookBox h1 {
    font-size: 3rem;
    margin: 30px auto; }
  .firstLookBox p {
    font-size: 18px; }
  .firstLookBox a {
    font-size: 32px;
    border: none; }
  .aboutMe {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    .aboutMe .portfolioPhoto {
      width: 170px;
      height: auto;
      min-width: 170px; }
    .aboutMe .aboutMeText {
      float: right;
      padding: 10px 30px;
      font-size: 18px; }
      .aboutMe .aboutMeText h2 {
        font-size: 2rem;
        margin-bottom: 10px; }
  .technologies {
    padding: 30px 100px; }
    .technologies h2 {
      font-size: 2rem;
      margin: 25px auto; }
    .technologies .stackImages {
      display: flex;
      justify-content: center;
      width: 100%;
      height: auto;
      flex-wrap: wrap; }
      .technologies .stackImages #tech1 {
        flex-direction: column;
        align-items: center;
        margin: 50px;
        width: 30%; }
        .technologies .stackImages #tech1 i {
          font-size: 80px; }
        .technologies .stackImages #tech1 p {
          font-size: 35px; }
      .technologies .stackImages #tech2 {
        flex-direction: column;
        align-items: center;
        margin: 50px;
        width: 30%; }
        .technologies .stackImages #tech2 i {
          font-size: 80px; }
        .technologies .stackImages #tech2 p {
          font-size: 35px; }
      .technologies .stackImages #tech3 {
        flex-direction: column;
        align-items: center;
        margin: 50px;
        width: 30%; }
        .technologies .stackImages #tech3 i {
          font-size: 80px; }
        .technologies .stackImages #tech3 p {
          font-size: 35px; }
      .technologies .stackImages #tech4 {
        flex-direction: column;
        align-items: center;
        margin: 50px;
        width: 30%; }
        .technologies .stackImages #tech4 i {
          font-size: 80px; }
        .technologies .stackImages #tech4 p {
          font-size: 35px; }
      .technologies .stackImages #tech5 {
        flex-direction: column;
        align-items: center;
        margin: 50px;
        width: 30%; }
        .technologies .stackImages #tech5 i {
          font-size: 80px; }
        .technologies .stackImages #tech5 p {
          font-size: 35px; }
      .technologies .stackImages #tech6 {
        flex-direction: column;
        align-items: center;
        margin: 50px;
        width: 30%; }
        .technologies .stackImages #tech6 i {
          font-size: 80px; }
        .technologies .stackImages #tech6 p {
          font-size: 35px; }
      .technologies .stackImages .iconChange2 {
        line-height: 75px;
        width: 70px; }
  .projects h2 {
    font-size: 2rem;
    margin: 25px auto; }
  .projects .projectBox .project1 {
    margin: 20px; }
    .projects .projectBox .project1 img {
      filter: brightness(35%); }
    .projects .projectBox .project1 .hoverBtns i {
      font-size: 25px;
      margin: 8px; }
  .projects .projectBox .project2 {
    margin: 20px; }
    .projects .projectBox .project2 img {
      filter: brightness(35%); }
    .projects .projectBox .project2 .hoverBtns i {
      font-size: 25px;
      margin: 8px; }
  .projects .projectBox .project3 {
    margin: 20px; }
    .projects .projectBox .project3 img {
      filter: brightness(35%); }
    .projects .projectBox .project3 .hoverBtns i {
      font-size: 25px;
      margin: 8px; }
  .projects .projectBox .project4 {
    margin: 20px; }
    .projects .projectBox .project4 img {
      filter: brightness(35%); }
    .projects .projectBox .project4 .hoverBtns i {
      font-size: 25px;
      margin: 8px; }
  .contact h2 {
    font-size: 2rem;
    margin: 25px auto; }
  .contact .contactInfo p {
    font-size: 18px;
    margin: 20px auto; }
  .contact .contactInfo .contactMethods {
    margin: 30px auto; }
    .contact .contactInfo .contactMethods .mailBox i,
    .contact .contactInfo .contactMethods .phoneBox i,
    .contact .contactInfo .contactMethods .messengerBox i,
    .contact .contactInfo .contactMethods .linkedInBox i {
      font-size: 55px;
      margin: 30px;
      line-height: 40px;
      cursor: pointer; }
    .contact .contactInfo .contactMethods .mailBox .mailIcon,
    .contact .contactInfo .contactMethods .phoneBox .mailIcon,
    .contact .contactInfo .contactMethods .messengerBox .mailIcon,
    .contact .contactInfo .contactMethods .linkedInBox .mailIcon {
      width: 50px; }
    .contact .contactInfo .contactMethods .mailBox .phoneIcon,
    .contact .contactInfo .contactMethods .phoneBox .phoneIcon,
    .contact .contactInfo .contactMethods .messengerBox .phoneIcon,
    .contact .contactInfo .contactMethods .linkedInBox .phoneIcon {
      width: 45px; }
    .contact .contactInfo .contactMethods .mailBox .messengerIcon,
    .contact .contactInfo .contactMethods .phoneBox .messengerIcon,
    .contact .contactInfo .contactMethods .messengerBox .messengerIcon,
    .contact .contactInfo .contactMethods .linkedInBox .messengerIcon {
      line-height: 32px;
      width: 32px; }
    .contact .contactInfo .contactMethods .phoneBox p {
      top: 70px;
      left: -10px; } }

@media only screen and (max-width: 900px) {
  nav a {
    margin: 5px; }
  .firstLookBox h1 {
    font-size: 2rem;
    margin: 30px auto; }
  .firstLookBox p {
    font-size: 16px; }
  .firstLookBox a {
    font-size: 32px;
    border: none; }
  .aboutMe {
    flex-direction: column; }
    .aboutMe .aboutMeText {
      padding: 30px; }
      .aboutMe .aboutMeText h2 {
        font-size: 2rem;
        margin-bottom: 10px; }
  .projects {
    background-position: right center; }
    .projects .projectBox {
      margin-bottom: 30px; }
  .contact h2 {
    font-size: 2rem;
    margin: 25px auto; }
  .contact .contactInfo p {
    font-size: 18px;
    margin: 20px auto;
    width: 80%; }
  .contact .contactInfo .contactMethods {
    margin: 30px auto; }
    .contact .contactInfo .contactMethods .mailBox i,
    .contact .contactInfo .contactMethods .phoneBox i,
    .contact .contactInfo .contactMethods .messengerBox i,
    .contact .contactInfo .contactMethods .linkedInBox i {
      font-size: 55px;
      margin: 30px;
      line-height: 40px;
      cursor: pointer; }
    .contact .contactInfo .contactMethods .mailBox .mailIcon,
    .contact .contactInfo .contactMethods .phoneBox .mailIcon,
    .contact .contactInfo .contactMethods .messengerBox .mailIcon,
    .contact .contactInfo .contactMethods .linkedInBox .mailIcon {
      width: 50px; }
    .contact .contactInfo .contactMethods .mailBox .phoneIcon,
    .contact .contactInfo .contactMethods .phoneBox .phoneIcon,
    .contact .contactInfo .contactMethods .messengerBox .phoneIcon,
    .contact .contactInfo .contactMethods .linkedInBox .phoneIcon {
      width: 45px; }
    .contact .contactInfo .contactMethods .mailBox .messengerIcon,
    .contact .contactInfo .contactMethods .phoneBox .messengerIcon,
    .contact .contactInfo .contactMethods .messengerBox .messengerIcon,
    .contact .contactInfo .contactMethods .linkedInBox .messengerIcon {
      line-height: 32px;
      width: 32px; } }

@media only screen and (max-width: 600px) {
  header .navbarMain nav {
    background-color: rgba(250, 250, 250, 0.6);
    padding-bottom: 5px;
    width: 100%;
    height: auto; }
    header .navbarMain nav .menuTop {
      flex-direction: column;
      display: none; }
      header .navbarMain nav .menuTop a {
        text-align: center;
        color: #766F57; }
  .aboutMe {
    width: 100%;
    height: auto;
    margin-top: 50px; }
    .aboutMe .portfolioPhoto {
      width: 100px;
      height: auto;
      min-width: 100px; }
    .aboutMe .aboutMeText {
      padding: 15px; }
      .aboutMe .aboutMeText h2 {
        font-size: 2rem;
        margin-bottom: 10px; }
      .aboutMe .aboutMeText p {
        font-size: 15px; }
  .technologies {
    padding: 20px 50px; }
    .technologies h2 {
      font-size: 1.5rem;
      margin: 20px auto; }
    .technologies .stackImages {
      display: flex;
      justify-content: center;
      width: 100%;
      height: auto;
      flex-wrap: wrap; }
      .technologies .stackImages #tech1 {
        flex-direction: column;
        align-items: center;
        margin: 15px;
        width: 100%; }
        .technologies .stackImages #tech1 i {
          font-size: 50px; }
        .technologies .stackImages #tech1 p {
          font-size: 20px; }
      .technologies .stackImages #tech2 {
        flex-direction: column;
        align-items: center;
        margin: 15px;
        width: 100%; }
        .technologies .stackImages #tech2 i {
          font-size: 50px; }
        .technologies .stackImages #tech2 p {
          font-size: 20px; }
      .technologies .stackImages #tech3 {
        flex-direction: column;
        align-items: center;
        margin: 15px;
        width: 100%; }
        .technologies .stackImages #tech3 i {
          font-size: 50px; }
        .technologies .stackImages #tech3 p {
          font-size: 20px; }
      .technologies .stackImages #tech4 {
        flex-direction: column;
        align-items: center;
        margin: 15px;
        width: 100%; }
        .technologies .stackImages #tech4 i {
          font-size: 50px; }
        .technologies .stackImages #tech4 p {
          font-size: 20px; }
      .technologies .stackImages #tech5 {
        flex-direction: column;
        align-items: center;
        margin: 15px;
        width: 100%; }
        .technologies .stackImages #tech5 i {
          font-size: 50px; }
        .technologies .stackImages #tech5 p {
          font-size: 20px; }
      .technologies .stackImages #tech6 {
        flex-direction: column;
        align-items: center;
        margin: 15px;
        width: 100%; }
        .technologies .stackImages #tech6 i {
          font-size: 50px; }
        .technologies .stackImages #tech6 p {
          font-size: 20px; }
      .technologies .stackImages .iconChange2 {
        line-height: 45px;
        width: 42px; }
  .projects h2 {
    font-size: 1.5rem;
    margin: 20px auto; }
  .projects .projectBox .project1 {
    width: 100%;
    height: 150px;
    margin: 20px; }
  .projects .projectBox .project2 {
    width: 100%;
    height: 150px;
    margin: 20px; }
  .projects .projectBox .project3 {
    width: 100%;
    height: 150px;
    margin: 20px; }
  .projects .projectBox .project4 {
    width: 100%;
    height: 150px;
    margin: 20px; }
  .contact h2 {
    font-size: 1.5rem;
    margin: 20px auto; }
  .contact .contactInfo > p {
    font-size: 15px;
    margin: 15px auto;
    width: 80%; }
  .contact .contactInfo .contactMethods {
    margin: 20px auto; }
    .contact .contactInfo .contactMethods .mailBox i,
    .contact .contactInfo .contactMethods .phoneBox i,
    .contact .contactInfo .contactMethods .messengerBox i,
    .contact .contactInfo .contactMethods .linkedInBox i {
      font-size: 40px;
      margin: 20px;
      line-height: 30px;
      cursor: pointer; }
    .contact .contactInfo .contactMethods .mailBox .mailIcon,
    .contact .contactInfo .contactMethods .phoneBox .mailIcon,
    .contact .contactInfo .contactMethods .messengerBox .mailIcon,
    .contact .contactInfo .contactMethods .linkedInBox .mailIcon {
      width: 35px; }
    .contact .contactInfo .contactMethods .mailBox .phoneIcon,
    .contact .contactInfo .contactMethods .phoneBox .phoneIcon,
    .contact .contactInfo .contactMethods .messengerBox .phoneIcon,
    .contact .contactInfo .contactMethods .linkedInBox .phoneIcon {
      width: 32px; }
    .contact .contactInfo .contactMethods .mailBox p,
    .contact .contactInfo .contactMethods .phoneBox p,
    .contact .contactInfo .contactMethods .messengerBox p,
    .contact .contactInfo .contactMethods .linkedInBox p {
      top: 45px;
      left: -10px;
      font-size: 13px; }
    .contact .contactInfo .contactMethods .mailBox .messengerIcon,
    .contact .contactInfo .contactMethods .phoneBox .messengerIcon,
    .contact .contactInfo .contactMethods .messengerBox .messengerIcon,
    .contact .contactInfo .contactMethods .linkedInBox .messengerIcon {
      line-height: 22px;
      width: 22px; }
  .contact .contactInfo .mapBox iframe {
    height: 300px; }
  footer .copyRights {
    padding: 15px; }
    footer .copyRights p {
      font-size: 10px; } }

@media only screen and (max-width: 350px) {
  header .navbarMain nav .menuTop a {
    margin: 0; }
  header .firstLookBox {
    justify-content: flex-end; }
    header .firstLookBox a {
      margin-top: 50px; }
  .aboutMeInfo {
    height: auto; }
    .aboutMeInfo .aboutMe {
      margin: 50px auto; }
      .aboutMeInfo .aboutMe .aboutMeText p {
        text-align: left;
        font-size: 14px; }
  .projects .projectBox .project1 .hoverBtns i {
    font-size: 25px;
    margin: 6px; }
  .projects .projectBox .project2 .hoverBtns i {
    font-size: 25px;
    margin: 6px; }
  .projects .projectBox .project3 .hoverBtns i {
    font-size: 25px;
    margin: 6px; }
  .projects .projectBox .project4 .hoverBtns i {
    font-size: 25px;
    margin: 6px; } }

@keyframes nextSectionArrow {
  0% {
    top: 0; }
  25% {
    top: 2px; }
  50% {
    top: 4px; }
  75% {
    top: 5px; }
  100% {
    top: 6px; } }

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