:root {
  --blue: #2d9cdb;
  --green: #27ae60;
  --red: #eb5757;
  --grey-1: #333333;
  --grey-2: #4f4f4f;
  --grey-3: #828282;
  --grey-4: #bdbdbd;
  --grey-6: #f2f2f2;
}

* {
  font-family: 'Heebo', sans-serif;
}

/* Global */
/* Headers */
h2 {
  font-weight: 500;
  font-size: 4.8rem;
  line-height: 7.2rem;
  color: var(--grey-1);
}

@media only screen and (max-width: 600px) {
  #home p:first-child {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  h2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  #home p {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

/* Contact Form (Global) */
.contact label {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: var(--grey-3);
}

.contact input::placeholder {
  opacity: 1; /* Firefox */
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--grey-4);
}

.contact input {
  background-color: var(--grey-6);
  border-radius: 1.2rem;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--grey-1);
}

.contact button {
  background: var(--blue);
  border-radius: 1.2rem;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--grey-6);
}

@media only screen and (max-width: 600px) {
  .contact label {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .contact input::placeholder {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }

  .contact input {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }

  .contact button {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}

/* Header */
header h1 {
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 5.3;
  color: var(--grey-1);
}

nav a {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--grey-1);
}

/* Main */

/* Home */
#home p:first-child {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--blue);
}

#home p {
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--grey-2);
}

@media only screen and (max-width: 600px) {
  #home p:first-child {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  #home p {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

/* Services */
#services .card-icon span {
  color: white;
}

#services .edit-icon {
  background-color: var(--blue);
}

#services .code-icon {
  background-color: var(--green);
}

#services .storage-icon {
  background-color: var(--red);
}

#services h3 {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--grey-1);
}

#services p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--grey-2);
}

#services button {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--grey-3);
}

@media only screen and (max-width: 600px) {
  #services h3 {
    font-size: 2rem;
    line-height: 3rem;
  }

  #services p {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  #services button {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

/* Our Works */
#our-works p {
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: var(--grey-3);
}

#our-works h3 {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--grey-1);
}

#our-works a {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--blue);
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  #our-works p {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  #our-works h3 {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

  #our-works a {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}

/* Our Team */
#our-team a {
  text-decoration: none;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--red);
}

@media only screen and (max-width: 600px) {
  #our-team a {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}

#our-team p {
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--grey-2);
}

@media only screen and (max-width: 600px) {
  #our-team p {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

/* Clients */
#clients h3 {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--grey-1);
}

#clients span {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: var(--grey-3);
}

@media only screen and (max-width: 600px) {
  #clients h3 {
    font-size: 2rem;
    line-height: 3rem;
  }

  #clients span {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

/* Footer */
footer {
  background-color: #100e1d;
}

footer nav a {
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1.7rem;
  color: #ffffff;
}

footer h2 {
  font-size: 3.6rem;
  line-height: 5.3rem;
  color: var(--grey-6);
}

footer .contact label {
  color: var(--grey-6);
}

footer .attribution {
  font-size: 1.4rem;
  line-height: 1.7rem;
  color: var(--grey-6);
}

footer .attribution a {
  text-decoration: none;
  font-weight: 600;
  color: var(--grey-6);
}