/*=============================*/
/*==========Buttons============*/
/*=============================*/

/* button-primary */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;

  font-size: 2rem;
  font-weight: 400;
  padding: 2.4rem 3.2rem;
  border-radius: 100px;

  /* For the btn itself */
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s;
}

@media only screen and (max-width: 900px) {
  .btn,
  .btn:link,
  .btn:visited {
    font-size: 1.2rem;
    padding: 1.8rem 2rem;
  }
}

@media only screen and (max-width: 600px) {
  .btn,
  .btn:link,
  .btn:visited {
    font-size: 1.2rem;
    padding: 1.8rem 2.2rem;
  }
}

.btn-outline:link,
.btn-outline:visited {
  background-color: var(--color-white);
  box-shadow: inset 0 0 0 3px var(--color-white);
  color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:active {
  background-color: var(--color-accent-3);
  font-weight: 400;

  box-shadow: inset 0 0 0 3px var(--color-white);
  color: var(--color-white);

  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.2);
}

.btn-secondary:link,
.btn-secondary:visited {
  background-color: transparent;
  border: 2px solid var(--color-accent-3);
  color: var(--color-accent-3);
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--color-accent-3);
  font-weight: 400;
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.2);
}

/* button secondary */

/* Links */

/* Home page case study */

.case-studies__link:link,
.case-studies__link:visited {
  display: inline-block;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-primary);
  /* border: 2px solid var(--color-primary); */
  font-size: 1.6rem;
  font-weight: 400;
  padding: 2.4rem 3.2rem;
  border-radius: 10rem;

  transition: all 0.3s;
  margin-left: 26.2rem;
}

@media only screen and (max-width: 900px) {
  .case-studies__link:link,
  .case-studies__link:visited {
    font-size: 2rem;
    margin-left: 20.2rem;
  }
}

@media only screen and (max-width: 600px) {
  .case-studies__link:link,
  .case-studies__link:visited {
    font-size: 1.8rem;
    margin-left: 4.2rem;
  }
}

.case-studies__link:hover,
.case-studies__link:active {
  background-color: var(--color-accent-1);
  color: var(--color-white);
  font-weight: 400;
  box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.2);
}

/* Gallery link */
.gallery-link:link,
.gallery-link:visited {
  display: inline-block;
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 400;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.gallery-link:hover,
.gallery-link:active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.9rem;
  font-weight: 500;
}

/* Gallery link */
.project-link:link,
.project-link:visited {
  display: inline-block;
  text-decoration: none;
  color: var(--color-white);
  font-weight: 400;
  font-size: 1.4rem;
  transition: all 0.3s;
}

.project-link:hover,
.project-link:active {
  color: var(--color-white);
  border-bottom: 2px solid var(--color-white);
  padding-bottom: 0.9rem;
  font-weight: 500;
}