@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.logo {
  position: relative;
  top: -12rem;
  -webkit-animation: animateNav 1s ease-in forwards;
          animation: animateNav 1s ease-in forwards;
}

.logo a {
  font-family: "Space Grotesk", sans-serif;
  color: #112063;
  font-size: 0.8rem;
  font-weight: bold;
  color: #545454;
}

.logo a span {
  font-weight: bold;
  font-family: "Karla", sans-serif;
  font-size: 1.8rem;
  color: #112063;
  margin-right: 0.5rem;
  letter-spacing: -2px;
}

.container {
  width: 90%;
  margin: auto;
  font-family: karla, sans-serif;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.header {
  font-family: "Space Grotesk", sans-serif;
}

.navigation .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem 0;
}

.navigation .container .humbargerMenu {
  position: relative;
  -webkit-animation: animateNav 1s ease-in forwards;
          animation: animateNav 1s ease-in forwards;
  cursor: pointer;
}

@media screen and (min-width: 1000px) {
  .navigation .container .humbargerMenu {
    display: none;
  }
}

.navigation .container .humbargerMenu span {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  display: block;
  width: 1.75rem;
  height: 0.25rem;
  background-color: #45bae9;
  border-radius: 0.5rem;
}

.navigation .container .humbargerMenu span:nth-child(2) {
  margin: 0.25rem 0.5rem;
}

.navigation .container .humbargerMenu.active {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.navigation .container .humbargerMenu.active span {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.navigation .container .humbargerMenu.active span:nth-child(1) {
  -webkit-transform: translate(0, 8px) rotate(45deg);
          transform: translate(0, 8px) rotate(45deg);
}

.navigation .container .humbargerMenu.active span:nth-child(2) {
  background-color: transparent;
}

.navigation .container .humbargerMenu.active span:nth-child(3) {
  -webkit-transform: translate(0, -8px) rotate(-45deg);
          transform: translate(0, -8px) rotate(-45deg);
}

.navigation .container .links_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 70%;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

@media screen and (max-width: 1000px) {
  .navigation .container .links_container {
    width: 100%;
    height: 90vh;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    background-color: #e9f9ff;
    top: 5rem;
    right: 0;
    left: 0;
    border-radius: 20px;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
}

@media screen and (max-width: 1000px) {
  .navigation .container .links_container.active {
    -webkit-animation: open 0.5s ease-in forwards;
            animation: open 0.5s ease-in forwards;
  }
}

.navigation .container .links_container .navigation {
  font-family: "Karla", sans-serif;
  position: relative;
  top: -12rem;
  -webkit-animation: animateNav 1s ease-in forwards;
          animation: animateNav 1s ease-in forwards;
}

.navigation .container .links_container .navigation a {
  color: #112063;
  font-weight: 700;
  font-size: 16px;
  margin: 0 1rem;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

.navigation .container .links_container .navigation a:hover {
  color: #45bae9;
}

@media screen and (max-width: 1000px) {
  .navigation .container .links_container .navigation.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 4rem 0 0 0;
    position: relative;
    top: 0;
    -webkit-animation: LinksDelay 2s forwards;
            animation: LinksDelay 2s forwards;
  }
  .navigation .container .links_container .navigation.active a {
    margin: 1.5rem 0;
    font-size: 1rem;
  }
  .navigation .container .links_container .navigation.active a:hover {
    color: #45bae9;
  }
}

.navigation .container .links_container .social_media {
  padding-top: 0.3rem;
  position: relative;
  -webkit-animation: animateNav 1s ease-in forwards;
          animation: animateNav 1s ease-in forwards;
}

.navigation .container .links_container .social_media a {
  font-size: 1.7rem;
  margin: 0 0.7rem;
}

.navigation .container .links_container .social_media a svg {
  color: #112063;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.navigation .container .links_container .social_media a:hover svg {
  color: #45bae9;
}

@media screen and (max-width: 1000px) {
  .navigation .container .links_container .social_media.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 2rem 8rem;
    -webkit-animation: LinksDelay 2s forwards;
            animation: LinksDelay 2s forwards;
  }
  .navigation .container .links_container .social_media.active a {
    font-size: 2rem;
  }
  .navigation .container .links_container .social_media.active a:hover svg {
    color: #45bae9;
  }
}

.navigation .container .circleMobile {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -10;
  -webkit-animation: animateDots 1s ease-in-out 1s forwards;
          animation: animateDots 1s ease-in-out 1s forwards;
  opacity: 0;
}

@media screen and (min-width: 750px) {
  .navigation .container .circleMobile {
    display: none;
  }
}

.navigation .container .circledesktop {
  display: block;
  position: absolute;
  top: -72px;
  right: 0;
  z-index: -10;
  -webkit-animation: animateDots 1s ease-in-out 1s forwards;
          animation: animateDots 1s ease-in-out 1s forwards;
  opacity: 0;
}

@media screen and (max-width: 750px) {
  .navigation .container .circledesktop {
    display: none;
  }
}

@-webkit-keyframes open {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes open {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@-webkit-keyframes LinksDelay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes LinksDelay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes animateNav {
  0% {
    opacity: 0;
    top: -12rem;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes animateNav {
  0% {
    opacity: 0;
    top: -12rem;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0.3px solid #cfcfcf;
  padding-bottom: 5rem;
}

.hero .container .hero_content {
  padding: 5rem 0;
  position: relative;
  opacity: 0;
  bottom: -12rem;
  -webkit-animation: animateHeroContent 1s ease-in-out 1s forwards;
          animation: animateHeroContent 1s ease-in-out 1s forwards;
}

@media screen and (min-width: 750px) {
  .hero .container .hero_content {
    padding-top: 8rem;
    width: 500px;
  }
}

.hero .container .hero_content h1 {
  font-family: "Dosis", sans-serif;
  font-size: 3.7rem;
  font-weight: bold;
  line-height: 0.9;
  color: #112063;
}

@media screen and (min-width: 750px) {
  .hero .container .hero_content h1 {
    font-size: 5rem;
  }
}

.hero .container .hero_content h1 span {
  color: #45bae9;
}

.hero .container .hero_content p {
  color: #908cc2;
  font-family: karla, sans-serif;
  margin: 2rem 0 4rem 0;
  font-size: 1.15rem;
}

@media screen and (min-width: 750px) {
  .hero .container .hero_content p {
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 600;
  }
}

.hero .container .hero_content button {
  background-color: #112063;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  font-size: 1.02rem;
  font-weight: bold;
  font-family: karla, sans-serif;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  overflow: hidden;
  border: 2px solid #112063;
  outline: none;
}

.hero .container .hero_content button a {
  color: white;
}

.hero .container .hero_content button:hover {
  -webkit-box-shadow: 0px 5px 20px #f0f0f0;
          box-shadow: 0px 5px 20px #f0f0f0;
}

.hero .container .hero_content .btn_CV {
  background-color: transparent;
  border: 2px solid #0686c9;
  margin-left: 0.5rem;
  color: #0686c9;
}

.hero .container .dots {
  position: absolute;
  top: 0rem;
  right: 4.5rem;
  width: 90px;
  height: auto;
  -webkit-animation: animateDots 1s ease-in-out 1s forwards;
          animation: animateDots 1s ease-in-out 1s forwards;
  opacity: 0;
}

@media screen and (min-width: 750px) {
  .hero .container .dots {
    width: 100px;
    right: 37.5rem;
  }
}

.hero .container .hero_img {
  width: 650px;
  position: absolute;
  z-index: -20;
  top: 1rem;
  opacity: 0;
  right: -20rem;
  -webkit-animation: animateHeroImg 1s ease-in-out 1s forwards;
          animation: animateHeroImg 1s ease-in-out 1s forwards;
}

@media screen and (max-width: 900px) {
  .hero .container .hero_img {
    display: none;
  }
}

@media screen and (min-width: 1070px) {
  .hero .container .hero_img {
    width: 700px;
  }
}

.hero .container .explore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  opacity: 0;
  -webkit-animation: animateHeroContent 1s ease-in-out 1s forwards;
          animation: animateHeroContent 1s ease-in-out 1s forwards;
}

.hero .container .explore .circle {
  width: 22px;
  height: 35px;
  border: 2px solid #8d8d8d;
  border-radius: 50px;
  position: relative;
}

.hero .container .explore .circle .dot {
  width: 4px;
  height: 4px;
  position: absolute;
  top: 1.2rem;
  left: 36%;
  background-color: #b8b8b8;
  border-radius: 50%;
  -webkit-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
  -webkit-animation: repeatit 0.5s linear 0s infinite alternate;
          animation: repeatit 0.5s linear 0s infinite alternate;
}

.hero .container .explore p {
  font-family: "Karla", sans-serif;
  color: #8d8d8d;
  margin-left: 0.5rem;
}

.hero .container .fixed_arrow {
  width: 60px;
  height: 60px;
  z-index: 100;
  border-radius: 50%;
  border: none;
  -webkit-box-shadow: 4px 4px 30px rgba(134, 135, 209, 0.452);
          box-shadow: 4px 4px 30px rgba(134, 135, 209, 0.452);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: none;
  position: fixed;
  right: 2rem;
  bottom: 1rem;
  background-color: white;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

@media screen and (max-width: 400px) {
  .hero .container .fixed_arrow {
    width: 40px;
    height: 40px;
    right: 1rem;
  }
}

.hero .container .fixed_arrow span svg {
  color: #112063;
}

@-webkit-keyframes repeatit {
  from {
    top: 0.4rem;
  }
  to {
    bottom: 50%;
  }
}

@keyframes repeatit {
  from {
    top: 0.4rem;
  }
  to {
    bottom: 50%;
  }
}

@-webkit-keyframes animateHeroContent {
  0% {
    opacity: 0;
    bottom: -12rem;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@keyframes animateHeroContent {
  0% {
    opacity: 0;
    bottom: -12rem;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@-webkit-keyframes animateDots {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animateDots {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes animateHeroImg {
  0% {
    opacity: 0;
    right: -20rem;
  }
  100% {
    opacity: 1;
    right: 0rem;
  }
}

@keyframes animateHeroImg {
  0% {
    opacity: 0;
    right: -20rem;
  }
  100% {
    opacity: 1;
    right: 0rem;
  }
}

.skills {
  padding: 4rem 0 6rem 0;
}

.skills .container .header {
  text-align: center;
  padding: 2.5rem 0;
}

.skills .container .header h5 {
  color: #747474;
  font-size: 1rem;
}

@media screen and (min-width: 800px) {
  .skills .container .header h5 {
    font-size: 1.2rem;
  }
}

.skills .container .header h1 {
  color: #112063;
  font-size: 45px;
}

@media screen and (min-width: 800px) {
  .skills .container .header h1 {
    font-size: 3rem;
  }
}

.skills .container .skills_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 800px) {
  .skills .container .skills_container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.skills .container .skills_container .skill {
  margin: 1em 0;
  padding: 2rem 1rem;
  border-radius: 20px;
  -webkit-box-shadow: 10px 10px 100px #35499715;
          box-shadow: 10px 10px 100px #35499715;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  cursor: pointer;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@media screen and (min-width: 800px) {
  .skills .container .skills_container .skill {
    width: 45%;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 2rem 2rem;
  }
  .skills .container .skills_container .skill:hover {
    -webkit-box-shadow: 10px 10px 60px #35499715;
            box-shadow: 10px 10px 60px #35499715;
  }
}

.skills .container .skills_container .skill .head_line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.skills .container .skills_container .skill .head_line .icon_box {
  padding: 1rem 1.3rem 0.7rem 1.3rem;
  border-radius: 10px;
  background-color: #7bdffd3b;
  display: block;
}

@media screen and (min-width: 800px) {
  .skills .container .skills_container .skill .head_line .icon_box {
    padding: 1rem 1.2rem;
  }
}

.skills .container .skills_container .skill .head_line .icon_box svg {
  font-size: 1.8rem;
}

@media screen and (min-width: 800px) {
  .skills .container .skills_container .skill .head_line .icon_box svg {
    font-size: 2.2rem;
  }
}

.skills .container .skills_container .skill .head_line h1 {
  margin-left: 1rem;
  color: #112063;
  font-size: 1.5rem;
  font-family: "Dosis", sans-serif;
}

@media screen and (min-width: 800px) {
  .skills .container .skills_container .skill .head_line h1 {
    font-size: 1.6rem;
  }
}

.skills .container .skills_container .skill p {
  font-size: 1rem;
  line-height: 1.5;
  color: gray;
  padding-top: 1rem;
}

@media screen and (min-width: 800px) {
  .skills .container .skills_container .skill p {
    font-size: 1.1rem;
  }
}

.skills .container .skills_container .skill p span {
  color: #112063;
  font-weight: bold;
}

@-webkit-keyframes one {
  0% {
    display: none;
    -webkit-transform: translateX(-900px);
            transform: translateX(-900px);
  }
  100% {
    display: block;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes one {
  0% {
    display: none;
    -webkit-transform: translateX(-900px);
            transform: translateX(-900px);
  }
  100% {
    display: block;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.portfolio {
  position: relative;
  padding-bottom: 4rem;
}

.portfolio .backwall {
  position: absolute;
  z-index: -10;
  right: 0;
  top: 0;
  width: 70%;
  height: 30%;
  background-color: #ffe0e7cc;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

@media screen and (min-width: 800px) {
  .portfolio .backwall {
    height: 100%;
  }
}

.portfolio .container .header {
  padding: 2.5rem 0;
}

@media screen and (min-width: 800px) {
  .portfolio .container .header {
    width: 100%;
    text-align: left;
  }
}

.portfolio .container .header h5 {
  color: #747474;
  font-size: 1.1rem;
}

@media screen and (min-width: 800px) {
  .portfolio .container .header h5 {
    font-size: 1.2rem;
  }
}

.portfolio .container .header h1 {
  color: #112063;
  font-size: 45px;
  padding-top: 1rem;
  line-height: 0.9;
}

@media screen and (min-width: 800px) {
  .portfolio .container .header h1 {
    font-size: 3rem;
  }
}

.portfolio .container .websites_container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[1];
      grid-template-columns: repeat(1, 1fr);
}

@media screen and (min-width: 800px) {
  .portfolio .container .websites_container {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    margin: 2rem;
    gap: 40px;
  }
}

.portfolio .container .websites_container .web {
  width: 100%;
  height: 300px;
  margin: 1.5rem 0;
  -webkit-box-shadow: 0px 5px 20px #b6b6b6;
          box-shadow: 0px 5px 20px #b6b6b6;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  background-image: url("../images/merchify.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 800px) {
  .portfolio .container .websites_container .web {
    height: 400px;
  }
}

.portfolio .container .websites_container .web .view {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
  width: 80%;
  margin: auto;
  font-family: "Space Grotesk", sans-serif;
  height: 80%;
  background-color: #112063;
  text-align: center;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 700px) {
  .portfolio .container .websites_container .web .view {
    width: 80%;
  }
}

.portfolio .container .websites_container .web .view h4 {
  color: white;
  font-size: 2rem;
}

.portfolio .container .websites_container .web .view p {
  color: #d6d6d6;
  font-size: 0.8rem;
  font-weight: lighter;
  padding: 1rem;
  line-height: 1.5;
}

@media screen and (min-width: 800px) {
  .portfolio .container .websites_container .web .view p {
    font-size: 1rem;
  }
}

.portfolio .container .websites_container .web .view button {
  background: transparent;
  padding: 0.8rem 2rem;
  border: 2px solid #45bae9;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  outline: none;
  font-size: 1rem;
}

.portfolio .container .websites_container .web .view button:hover {
  background-color: #45bae9;
}

.portfolio .container .websites_container .web .view button:hover a {
  color: white;
}

.portfolio .container .websites_container .web .view button a {
  color: #45bae9;
  font-weight: bold;
  font-size: 0.9em;
}

.portfolio .container .websites_container .web:hover .view {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: scale(1);
          transform: scale(1);
}

@-webkit-keyframes animPor {
  0% {
    -webkit-transform: translateX(-900px);
            transform: translateX(-900px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes animPor {
  0% {
    -webkit-transform: translateX(-900px);
            transform: translateX(-900px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

.languages .container {
  padding: 5rem 0;
}

.languages .container .header {
  text-align: center;
}

.languages .container .header h5 {
  color: #747474;
}

@media screen and (min-width: 800px) {
  .languages .container .header h5 {
    font-size: 1.2rem;
  }
}

.languages .container .header h1 {
  color: #112063;
  font-size: 45px;
  line-height: 1;
  margin-top: 0.8rem;
}

@media screen and (min-width: 800px) {
  .languages .container .header h1 {
    font-size: 3rem;
  }
}

.languages .container .icons_container {
  padding: 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.languages .container .icons_container div {
  width: 120px;
  height: 120px;
  margin: 2rem 1rem;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
  -webkit-box-shadow: 9px 21px 50px rgba(200, 197, 197, 0.25);
          box-shadow: 9px 21px 50px rgba(200, 197, 197, 0.25);
}

@media screen and (min-width: 800px) {
  .languages .container .icons_container div {
    width: 200px;
    height: 200px;
    margin: 1rem 2rem;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .languages .container .icons_container div:hover {
    -webkit-box-shadow: 9px 21px 50px rgba(200, 197, 197, 0.25);
            box-shadow: 9px 21px 50px rgba(200, 197, 197, 0.25);
  }
}

.languages .container .icons_container div svg {
  font-size: 5rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

@media screen and (min-width: 800px) {
  .languages .container .icons_container div svg {
    font-size: 6rem;
  }
}

.languages .container .icons_container div p {
  color: #dddcdc;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  font-weight: bold;
}

.languages .container .icons_container .html p {
  color: rgba(245, 144, 62, 0.83);
}

.languages .container .icons_container .html svg {
  color: rgba(245, 144, 62, 0.83) !important;
}

.languages .container .icons_container .css p {
  color: rgba(17, 74, 230, 0.83);
}

.languages .container .icons_container .css svg {
  color: rgba(17, 74, 230, 0.83) !important;
}

.languages .container .icons_container .javascript p {
  color: #fcce00;
}

.languages .container .icons_container .javascript svg {
  color: #fcce00 !important;
}

.languages .container .icons_container .react p {
  color: #2fa7f7;
}

.languages .container .icons_container .react svg {
  color: #2fa7f7 !important;
}

.languages .container .icons_container .bootstrap p {
  color: #5e1df5;
}

.languages .container .icons_container .bootstrap svg {
  color: #5e1df5 !important;
}

.languages .container .icons_container .sass p {
  color: #d42c6c;
}

.languages .container .icons_container .sass svg {
  color: #d42c6c !important;
}

.languages .container .icons_container .jquery p {
  color: #116de6;
}

.languages .container .icons_container .jquery svg {
  color: #116de6 !important;
}

.aboutMe {
  height: 800px;
  position: relative;
  overflow: hidden;
}

.aboutMe .backWall {
  width: 100%;
  height: 100%;
  position: absolute;
  height: 100%;
  background-color: #b1aaff57;
  z-index: -10;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

@media screen and (min-width: 800px) {
  .aboutMe .backWall {
    width: 48%;
  }
}

.aboutMe img {
  width: 700px;
  position: absolute;
  right: -4rem;
  top: 5rem;
}

@media screen and (max-width: 500px) {
  .aboutMe img {
    display: none;
  }
}

.aboutMe .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

.aboutMe .container .header {
  text-align: left;
}

@media screen and (min-width: 800px) {
  .aboutMe .container .header {
    width: 50%;
  }
}

.aboutMe .container .header h5 {
  color: #747474;
  font-size: 1.2rem;
}

@media screen and (min-width: 800px) {
  .aboutMe .container .header h5 {
    font-size: 1.2rem;
  }
}

.aboutMe .container .header h1 {
  color: #112063;
  font-size: 45px;
  padding: 1rem 0 2rem 0;
  letter-spacing: -2px;
}

@media screen and (min-width: 800px) {
  .aboutMe .container .header h1 {
    font-size: 3rem;
  }
}

.aboutMe .container p {
  color: #747474;
  padding-bottom: 2rem;
  line-height: 1.5;
  font-size: 1rem;
}

@media screen and (min-width: 800px) {
  .aboutMe .container p {
    width: 45%;
    padding-right: 1rem;
    font-size: 1.1rem;
  }
}

.aboutMe .container .p {
  color: #112063;
  font-weight: bold;
}

.aboutMe .container button {
  background-color: #119bf4;
  padding: 1rem 2rem;
  border-radius: 10px;
  border: none;
  font-size: 1.02rem;
  font-weight: bold;
  font-family: karla, sans-serif;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  overflow: hidden;
}

.aboutMe .container button a {
  color: white;
}

.aboutMe .container button:hover {
  -webkit-box-shadow: 2px 4px 20px #cecece;
          box-shadow: 2px 4px 20px #cecece;
}

.footer {
  height: 750px;
  padding: 4rem 0 2rem 0;
  font-family: "Karla", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}

@media screen and (min-width: 700px) {
  .footer {
    height: 650px;
    padding: 3rem 0 2rem 0;
  }
}

.footer .footerDotes {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 80px;
}

@media screen and (min-width: 700px) {
  .footer .footerDotes {
    width: 100px;
    right: 3rem;
    top: 0;
  }
}

.footer .container {
  height: 100%;
  background-color: #e4f5ff;
  border-radius: 20px;
  padding: 3rem 0;
  position: relative;
}

@media screen and (min-width: 700px) {
  .footer .container {
    height: 80%;
    margin-bottom: 0;
  }
}

.footer .container .header {
  text-align: center;
  width: 300px;
  margin: auto;
}

@media screen and (min-width: 800px) {
  .footer .container .header {
    width: auto;
  }
}

.footer .container .header h5 {
  color: #747474;
}

@media screen and (min-width: 800px) {
  .footer .container .header h5 {
    width: auto;
    font-size: 1.2rem;
  }
}

.footer .container .header h1 {
  color: #112063;
  font-size: 2.5rem;
  padding: 1rem 0;
}

@media screen and (min-width: 800px) {
  .footer .container .header h1 {
    font-size: 3rem;
  }
}

.footer .container .email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 2rem 0 3rem 0;
}

.footer .container .email svg {
  font-size: 2.2rem;
  margin-right: 0.9rem;
}

.footer .container .email p {
  color: #9c9ca1;
}

@media screen and (min-width: 700px) {
  .footer .container .email p {
    margin: 0;
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 700px) {
  .footer .container .navContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    position: absolute;
    bottom: 4rem;
    left: 0;
    right: 0;
  }
}

.footer .container .navContainer .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 700px) {
  .footer .container .navContainer .logo {
    padding: 0;
  }
}

.footer .container .navContainer .footerNav {
  font-family: "Karla", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 2rem;
}

@media screen and (min-width: 700px) {
  .footer .container .navContainer .footerNav {
    margin-top: 0rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.footer .container .navContainer .footerNav a {
  color: #112063;
  font-weight: 700;
  font-size: 16px;
  margin: 1rem 0;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

@media screen and (min-width: 700px) {
  .footer .container .navContainer .footerNav a {
    margin: 0 1rem;
  }
}

.footer .container .navContainer .footerNav a:hover {
  color: #34a1cd;
}

.footer .rights {
  font-size: 0.9rem;
  text-align: center;
  margin: 1rem 0 0 0;
  color: #79797c;
}
/*# sourceMappingURL=style.css.map */