@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

/*===== ROOTS ===== */

:root{
  --big-font-size: 3.5rem;
  --h2-font-size: 2rem;
  --normal-font-size: 1rem;
  --body-font: 'Poppins', sans-serif;
  --big-font-size: 2.5rem;
  --h2-font-size: 1.75rem;
  --normal-font-size: 1rem;
  --first-color: #FF5129;
  --second-color: #1F282E;
}


/*===== CLASSES  ===== */


header {
  display: flex;
  justify-content: space-between;
  margin: 3rem 0;
}

header ul {
  display: flex;
  justify-content: space-between;

     list-style-type: none;
     margin: 0;
     padding: 0;
     display: flex;
     }

     header ul li {
  margin-left: 1rem;
}

body{
  margin: 1rem auto;
  max-width: 960px;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--second-color);
}

main {
   margin: 3rem 0;
 }

a{
  text-decoration: none;
}

section {
        margin: 3rem 0;
      }

img{
  max-width: 100%;
}

#intro {
       display: flex;
       justify-content: space-between;
     }
     #about {
       display: flex;
       justify-content: space-around;
     }
     #projects {
       display: flex;
       justify-content: space-between;
     }

.section-title{
  font-size: var(--h2-font-size);
  color: var(--first-color);
  text-align: center;
}


/*===== NAV ===== */

.nav__logo{
  color: var(--second-color);
}

.nav__item{
  margin-left: 3rem;
  margin-bottom: 0;
}

.l-header{
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(146,161,176,.15);

}

/*===== FIRST SCREEN ===== */
  .home__title{
    font-size: var(--big-font-size);

 }
  .home__title-color{
    color: var(--first-color);
  }


  /*===== BUTTON ===== */
    .button{
     background-color: var(--first-color);
      color: #fff;
      padding: .75rem 2.5rem;
      font-weight: var(--font-semi);
      border-radius: .5rem;
    }


/* ===== WORK =====*/




.work__img img{
  transition: 1s;
  cursor: pointer;
}
.work__img{
  display: flex;
  width: 100%

}
.work__img img:hover{
  transform: scale(1.1);
}

/* ===== CONTACT =====*/

.contact__input {
width: 960px;
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi);
  padding: 1rem;
  border-radius: .5rem;
  border: 1.5px solid var(--second-color);
  outline: none;
  margin-bottom: 1.8rem;

}



/* ===== FOOTER =====*/
.footer{
  background-color: var(--second-color);
  height: 300px;
  color: #fff;
  text-align: center;

  font-weight: var(--font-semi);
  padding: 2rem 0;
  margin-top: 15rem;
}
.footer__title{
  padding-top: 60px;
  font-size: 2rem;
  margin-bottom: var(--mb-4);
}
}