/*body {
    display: flex;
    align-items: center;
    height: 100vh;
    background-color: #001524;
}*/
.page-load-container {
  display: block;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: #171616;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: opacity 0.3s linear;
  flex-wrap: wrap;
}

.baton {
  display: block;
  height: 2px;
  width: 70px;
  background-color: #459fa5;
  -webkit-animation: scale 1.25s infinite linear;
          animation: scale 1.25s infinite linear;
  transform-origin: 0;
  transform: rotate(-10deg);
}
.baton:before {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  background-color: #f5a51c;
  position: absolute;
  top: -2px;
  border-radius: 5px;
}
.baton:after {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  background-color: #f5a51c;
  position: absolute;
  top: -2px;
  right: 0;
  border-radius: 5px;
}

.metronome {
  transform-origin: 0;
  -webkit-animation: metronome 1.25s infinite linear;
          animation: metronome 1.25s infinite linear;
}

.baton-0 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}
.baton-0 .baton,
.baton-0 .baton:after,
.baton-0 .metronome {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.baton-1 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
.baton-1 .baton,
.baton-1 .baton:after,
.baton-1 .metronome {
  -webkit-animation-delay: -0.14s;
          animation-delay: -0.14s;
}

.baton-2 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
}
.baton-2 .baton,
.baton-2 .baton:after,
.baton-2 .metronome {
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
}

.baton-3 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
.baton-3 .baton,
.baton-3 .baton:after,
.baton-3 .metronome {
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}

.baton-4 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}
.baton-4 .baton,
.baton-4 .baton:after,
.baton-4 .metronome {
  -webkit-animation-delay: -0.56s;
          animation-delay: -0.56s;
}

.baton-5 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  -o-transform: rotate(50deg);
}
.baton-5 .baton,
.baton-5 .baton:after,
.baton-5 .metronome {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}

.baton-6 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
.baton-6 .baton,
.baton-6 .baton:after,
.baton-6 .metronome {
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}

.baton-7 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(70deg);
  -moz-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  -o-transform: rotate(70deg);
}
.baton-7 .baton,
.baton-7 .baton:after,
.baton-7 .metronome {
  -webkit-animation-delay: -0.98s;
          animation-delay: -0.98s;
}

.baton-8 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  -o-transform: rotate(80deg);
}
.baton-8 .baton,
.baton-8 .baton:after,
.baton-8 .metronome {
  -webkit-animation-delay: -1.12s;
          animation-delay: -1.12s;
}

.baton-9 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.baton-9 .baton,
.baton-9 .baton:after,
.baton-9 .metronome {
  -webkit-animation-delay: -1.26s;
          animation-delay: -1.26s;
}

.baton-10 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
}
.baton-10 .baton,
.baton-10 .baton:after,
.baton-10 .metronome {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}

.baton-11 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -ms-transform: rotate(110deg);
  -o-transform: rotate(110deg);
}
.baton-11 .baton,
.baton-11 .baton:after,
.baton-11 .metronome {
  -webkit-animation-delay: -1.54s;
          animation-delay: -1.54s;
}

.baton-12 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
}
.baton-12 .baton,
.baton-12 .baton:after,
.baton-12 .metronome {
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
}

.baton-13 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(130deg);
  -moz-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  -o-transform: rotate(130deg);
}
.baton-13 .baton,
.baton-13 .baton:after,
.baton-13 .metronome {
  -webkit-animation-delay: -1.82s;
          animation-delay: -1.82s;
}

.baton-14 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(140deg);
  -moz-transform: rotate(140deg);
  -ms-transform: rotate(140deg);
  -o-transform: rotate(140deg);
}
.baton-14 .baton,
.baton-14 .baton:after,
.baton-14 .metronome {
  -webkit-animation-delay: -1.96s;
          animation-delay: -1.96s;
}

.baton-15 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}
.baton-15 .baton,
.baton-15 .baton:after,
.baton-15 .metronome {
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
}

.baton-16 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  -o-transform: rotate(160deg);
}
.baton-16 .baton,
.baton-16 .baton:after,
.baton-16 .metronome {
  -webkit-animation-delay: -2.24s;
          animation-delay: -2.24s;
}

.baton-17 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(170deg);
  -moz-transform: rotate(170deg);
  -ms-transform: rotate(170deg);
  -o-transform: rotate(170deg);
}
.baton-17 .baton,
.baton-17 .baton:after,
.baton-17 .metronome {
  -webkit-animation-delay: -2.38s;
          animation-delay: -2.38s;
}

.baton-18 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.baton-18 .baton,
.baton-18 .baton:after,
.baton-18 .metronome {
  -webkit-animation-delay: -2.52s;
          animation-delay: -2.52s;
}

.baton-19 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(190deg);
  -moz-transform: rotate(190deg);
  -ms-transform: rotate(190deg);
  -o-transform: rotate(190deg);
}
.baton-19 .baton,
.baton-19 .baton:after,
.baton-19 .metronome {
  -webkit-animation-delay: -2.66s;
          animation-delay: -2.66s;
}

.baton-20 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  -o-transform: rotate(200deg);
}
.baton-20 .baton,
.baton-20 .baton:after,
.baton-20 .metronome {
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
}

.baton-21 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}
.baton-21 .baton,
.baton-21 .baton:after,
.baton-21 .metronome {
  -webkit-animation-delay: -2.94s;
          animation-delay: -2.94s;
}

.baton-22 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  -ms-transform: rotate(220deg);
  -o-transform: rotate(220deg);
}
.baton-22 .baton,
.baton-22 .baton:after,
.baton-22 .metronome {
  -webkit-animation-delay: -3.08s;
          animation-delay: -3.08s;
}

.baton-23 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(230deg);
  -moz-transform: rotate(230deg);
  -ms-transform: rotate(230deg);
  -o-transform: rotate(230deg);
}
.baton-23 .baton,
.baton-23 .baton:after,
.baton-23 .metronome {
  -webkit-animation-delay: -3.22s;
          animation-delay: -3.22s;
}

.baton-24 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
}
.baton-24 .baton,
.baton-24 .baton:after,
.baton-24 .metronome {
  -webkit-animation-delay: -3.36s;
          animation-delay: -3.36s;
}

.baton-25 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(250deg);
  -moz-transform: rotate(250deg);
  -ms-transform: rotate(250deg);
  -o-transform: rotate(250deg);
}
.baton-25 .baton,
.baton-25 .baton:after,
.baton-25 .metronome {
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}

.baton-26 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(260deg);
  -moz-transform: rotate(260deg);
  -ms-transform: rotate(260deg);
  -o-transform: rotate(260deg);
}
.baton-26 .baton,
.baton-26 .baton:after,
.baton-26 .metronome {
  -webkit-animation-delay: -3.64s;
          animation-delay: -3.64s;
}

.baton-27 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
}
.baton-27 .baton,
.baton-27 .baton:after,
.baton-27 .metronome {
  -webkit-animation-delay: -3.78s;
          animation-delay: -3.78s;
}

.baton-28 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  -o-transform: rotate(280deg);
}
.baton-28 .baton,
.baton-28 .baton:after,
.baton-28 .metronome {
  -webkit-animation-delay: -3.92s;
          animation-delay: -3.92s;
}

.baton-29 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(290deg);
  -moz-transform: rotate(290deg);
  -ms-transform: rotate(290deg);
  -o-transform: rotate(290deg);
}
.baton-29 .baton,
.baton-29 .baton:after,
.baton-29 .metronome {
  -webkit-animation-delay: -4.06s;
          animation-delay: -4.06s;
}

.baton-30 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -o-transform: rotate(300deg);
}
.baton-30 .baton,
.baton-30 .baton:after,
.baton-30 .metronome {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}

.baton-31 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(310deg);
  -moz-transform: rotate(310deg);
  -ms-transform: rotate(310deg);
  -o-transform: rotate(310deg);
}
.baton-31 .baton,
.baton-31 .baton:after,
.baton-31 .metronome {
  -webkit-animation-delay: -4.34s;
          animation-delay: -4.34s;
}

.baton-32 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(320deg);
  -moz-transform: rotate(320deg);
  -ms-transform: rotate(320deg);
  -o-transform: rotate(320deg);
}
.baton-32 .baton,
.baton-32 .baton:after,
.baton-32 .metronome {
  -webkit-animation-delay: -4.48s;
          animation-delay: -4.48s;
}

.baton-33 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
}
.baton-33 .baton,
.baton-33 .baton:after,
.baton-33 .metronome {
  -webkit-animation-delay: -4.62s;
          animation-delay: -4.62s;
}

.baton-34 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(340deg);
  -moz-transform: rotate(340deg);
  -ms-transform: rotate(340deg);
  -o-transform: rotate(340deg);
}
.baton-34 .baton,
.baton-34 .baton:after,
.baton-34 .metronome {
  -webkit-animation-delay: -4.76s;
          animation-delay: -4.76s;
}

.baton-35 {
  height: 1px;
  width: 150px;
  position: absolute;
  top: calc(50% - 8px);
  transform-origin: 100%;
  -webkit-transform: rotate(350deg);
  -moz-transform: rotate(350deg);
  -ms-transform: rotate(350deg);
  -o-transform: rotate(350deg);
}
.baton-35 .baton,
.baton-35 .baton:after,
.baton-35 .metronome {
  -webkit-animation-delay: -4.9s;
          animation-delay: -4.9s;
}

@-webkit-keyframes metronome {
  0% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

@keyframes metronome {
  0% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}
@-webkit-keyframes scale {
  0% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(0.74);
  }
  50% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(1.16);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes scale {
  0% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(0.74);
  }
  50% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(1.16);
  }
  100% {
    transform: scaleX(1);
  }
}
/*ICONS */
.wrapper {
  display: inline-flex;
}

.wrapper .icon {
  position: relative;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background-color: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background-color: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background-color: #333333;
  color: #ffffff;
}

.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
  background-color: #0e76A8;
  color: #ffffff;
}

.wrapper .upwork:hover,
.wrapper .upwork:hover .tooltip,
.wrapper .upwork:hover .tooltip::before {
  background-color: #73bb44;
  color: #ffffff;
}

.linkedin {
  color: black;
}

.github {
  color: black;
}

/*BUTTON */
.glow-on-hover {
  width: 220px;
  height: 50px;
  /*border: none;*/
  outline: none;
  color: #111;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  -webkit-animation: glowing 20s linear infinite;
          animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: black;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@-webkit-keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.gg {
  display: flex;
  height: 14px;
  margin-bottom: 11px;
}

.gg-symbol {
  height: 14px;
  width: 14px;
  background: #969696;
  margin-right: 14px;
}

.gg-symbol--2 {
  width: 56px;
}

.gg-symbol--3 {
  width: 84px;
}

.gg-symbol--5 {
  width: 140px;
}

.gg-symbol--8 {
  width: 224px;
}

.gg-symbol--disc {
  border-radius: 14px;
}