* {
  box-sizing: border-box;
}

.column {

  width: 33%;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}



#parra {
  word-wrap: break-word;
  /* Forces to wrap the word and cut it*/
  width: 900px;
}

.navbar {
  background-color: black;
}

#bg-img {
  position: relative;
  z-index: -1;
}

#bg-img1 {
  position: relative;
}


.welcomepage {
  margin-top: 249px;
  margin-left: 503px;
  position: absolute;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa:hover {
  opacity: 0.7;
}


.container {
  position: relative;
  text-align: center;

}


.button-viewproject-claculator {
  position: absolute;
  left: 16px;
  font-size: 35px;
  top: 418px;
}



.button-viewproject-webscrapping {
  position: absolute;
  left: 16px;
  font-size: 35px;
  bottom: 3px;
}

h5 {
  font-size: 60px;
  text-align: center;
}

.about-info {
  font-size: 23px;
}

.aboutParra {
  font-size: 23px;

}

.skills {
  background-color: white;
}


.projects {
  background-color: white;
  font-size: 16px;

}

.portfolioImg {
  float: left;
  width: 200px;
  height: 200px;
  object-fit: cover;
}



#contactContact {
  background-color: white;
  text-align: left;
}

.footer {
  background-color: black;
  color: white;
  text-align: center;
}

.info {
  text-align: center;
  font-size: 30px;
}

@media only screen and (max-width:1300px) {


  .bgImg {
    width: auto ! important;
  }


  .welcomepage {
    margin-top: 0px;
    margin-left: 0px;
  }


}

@media only screen and (max-width:400px) {

  body {
    min-height: 144vh;
    width: 61%;
    zoom: 35%
  }

  @media only screen and (max-width:819px) {

    body {

      zoom: 37%
    }
  }
}