.Main{
  width: 100%;
  overflow: hidden;
  max-width: 1400px;
  margin: 60px auto 0 auto;
}
.Main button{
  cursor: pointer;
}

/* Home */
.Main-home{
  width: 100%;
  max-width: 650px;
  padding-top: 10px;
  margin: 0px auto 20px auto;

  animation: home forwards ease-in-out 2s ;
}

@keyframes home{
  0%{
    transform: translateX(-200%);
  }100%{
    transform: translateX(0%);
  }
}

.Main-home__backgroundImage{
  position: relative;
  width: 100%;
  height: 130px;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)), url('../images/profile_back.jpeg');
  background-position: center;
  background-size: cover;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.Main-home__backgroundImage-profile{
  position: absolute;
  top: calc(35%);
  left: 15px;
  width: 140px;
  height: 140px;
  background-color: var(--background);
  background-image: url('../images/profile.jpeg');
  background-size: cover;
  filter: grayscale(20%);
  border-radius: 50%;
  border: 5px solid var(--font-title);
}
.Main-home__description{
  width: 100%;
  background-color: var(--backgroundSections);
  padding: 60px 20px 20px 20px;
}
.Main-home__description:hover{
  background: rgba(0,0,0,0.1);
}
.Main-home__description h1{
  font-size: 3.5rem;
}
.Main-home__description p{
  font-size: 1.7rem;
  line-height: 2rem;
  margin-top: 12px;
}

/* About me */
.Main-aboutMe{
  width: 100%;
  max-width: 650px;
  background-color: var(--backgroundSections);
  padding: 20px;
  margin: 0 auto 20px auto;

  animation: aboutme ease-in-out forwards 2s;
}

@keyframes aboutme{
  0%{
    transform: translateX(200%);
  }100%{
    transform: translateX(0%);
  }
}
.Main-aboutMe__info h2{
  font-size: 3rem;
}
.Main-aboutMe__info p{
  font-size: 1.7rem;
  line-height: 2.2rem;
  margin-top: 20px;
}

/* My Skills */
.Main-mySkills{
  width: 100%;
  max-width: 650px;
  background-color: var(--backgroundSections);
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('../images/portfolio-small.jpg');
  background-size: cover;
  padding: 20px;
  margin: 0 auto 20px auto;
}
.Main-mySkills__title{
  font-size: 3rem;
  margin-bottom: 10px;
}
.Main-mySkills__container{
  display: flex;
  flex-wrap: wrap;
}
.Main-mySkills__skills{
  width: 220px;
  padding: 15px;
  margin-bottom: 10px;
}
.Main-mySkills__skills-title{
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.Main-mySkills__skills-list li{
  max-width: 290px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-size: 2rem;
  padding: 5px;
}
.Main-mySkills__skills-list li img{
  width: 32px;
  height: 32px;
}

/* Projects */
.Main-projects{
  width: 100%;
  max-width: 650px;
  margin: 0 auto 20px auto;
}
.Main-projects__title{
  font-size: 3rem;
  padding-left: 20px;
  margin-bottom: 20px;
}
.Main-projects__container{
  padding: 20px;
  background-color: var(--backgroundSections);
  border-radius: 5px;
  margin-bottom: 5px;
}
.Main-projects__container h3{
  font-size: 2rem;
  padding-left: 20px;
  margin-bottom: 20px;
}
.Main-projects__container-image{
  width: 100%;
  min-height: 170px;
  background-color: var(--background);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}
.Main-projects__container-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.Main-projects__container-tools{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}
.Main-projects__container-tools img{
  width: 25px;
  height: 25px;
}
.Main-projects__container-description p{
  font-size: 1.7rem;
  color: #505050;
  line-height: 2.2rem;
  margin-bottom: 10px;
}
.Main-projects__container-description p a{
  color: var(--title-color);
}
.Main-projects__container-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 30px auto;
}
.Main-projects__container-buttons button{
  width: 120px;
  height: 35px;
  font-size: 1.7rem;
  font-family: var(--font-title);
  border: 1px solid var(--title-color);
  border-radius: 30px;
}
.Main-projects__container-buttons__site{
  background-color: var(--title-color);
}
.Main-projects__container-buttons__github{
  color: var(--title-color);
  background-color: var(--backgroundSections);
}

/* Other Projects */
.Main-otherProjects{
  width: 100%;
  max-width: 650px;
  padding: 20px;
  margin: 0 auto 20px auto;
}
.Main-otherProjects__title{
  font-size: 3rem;
  padding-left: 20px;
  margin-bottom: 10px;
}
.Main-otherProjects__carousel{
  display: flex;
  overflow-x: scroll;
}
.Main-otherProjects__carousel::-webkit-scrollbar{
  height: 5px;
  background: var(--backgroundSections);
}
.Main-otherProjects__carousel::-webkit-scrollbar-thumb{
  height: 5px;
  border-radius: 5px;
  background-color: var(--title-color);
}
.Main-otherProjects__project{
  min-width: 270px;
  background-color: var(--backgroundSections);
  border-radius: 5px;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
}
.Main-otherProjects__project:hover{
  background: rgba(0,0,0,0.6);
}
.Main-otherProjects__project-image{
  width: 100%;
  height: 130px;
  background-color: var(--background);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
}
.Main-otherProjects__project-image img{
  width: 100%;
  height: 130px;
  object-fit: cover;
  opacity: 0.7;
}
.Main-otherProjects__project-phrase p{
  width: 100%;
  height: 55px;
  display: grid;
  place-content: center;
  font-size: 1.7rem;
  text-align: center;
}
.Main-otherProjects__project-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 15px auto;
}
.Main-otherProjects__project-buttons button{
  width: 80px;
  height: 25px;
  font-size: 1.5rem;
  font-family: var(--font-title);
  border: 1px solid var(--title-color);
  border-radius: 30px;
}
.Main-otherProjects__project-buttons__site{
  background-color: var(--title-color);
}
.Main-otherProjects__project-buttons__github{
  color: var(--title-color);
  background-color: var(--backgroundSections);
}
.Main-projects__container-buttons__github:hover, .Main-otherProjects__project-buttons__github:hover{
  color: var(--backgroundSections);   
  background-color: var(--title-color);
}
@media(min-width: 600px){
  .Main-mySkills__container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .Main-mySkills__skills{
    width: 40%;
  }
}
@media(min-width: 700px){
  .Main p{
    font-size: 1.8rem;
  }
  .Main-home, .Main-aboutMe, .Main-mySkills, .Main-projects{
    border-radius: 5px;
    overflow: hidden;
  }
  .Main-mySkills:hover{
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1)), url('../images/portfolio-small.jpg');
  background-size: cover;
  }
  .Main-otherProjects{
    padding: 0;
  }  
  .Main-projects__container-image{
    height: 250px;
  }
}