/* Global */
* {
  transition: all 0.1s linear;
}

html {
  scroll-behavior: smooth !important;
}

body {
  font-family: "Oswald", sans-serif, arial;
  background: #681757;
  background: -webkit-linear-gradient(right, #f7acac, #f3c9cb, #ffdf2b);
  background: linear-gradient(to right, #f7acac, #f3c9cb, #ffdf2b);
  color: #fff;
}

section {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.separator {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 8rem;
  margin-bottom: 2rem;
  div {
    width: 90%;
    height: 1px;
    background-color: #000;
  }
}
/* NAVEGADOR */
.navbar {
  display: flex;
  justify-content: center;
  height: 90px;
  align-items: center;
  background: linear-gradient(to right, #f7acac, #f3c9cb, #ffdf2b);
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}

.lista {
  list-style: none;
  color: black;
  font-size: 20px;
  top: 5px;
}

/* HEADER */

#Hero-Section {
  background-image: url("../imgs/fondo-cabecera.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  display: block;
}
.foto-perfil {
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

/* ACERCA DE MI */
#acerca-de-mi {
  color: #000;
  display: flex;
  flex-direction: column;
  margin: -40px;
  padding: 40px;
}
#acerca-de-mi h1 {
  text-shadow: 2px 2px 5px #681757;
  padding-top: 40px;
  padding-bottom: 20px;
  font-size: 25px;
  font-weight: bolder;
  text-align: center;
}
.sobre-mi {
  width: 100%;
  text-align: center;
  padding: 0px;
}

@media only screen and (min-width: 1200px) {
  #acerca-de-mi h1 {
    font-size: 50px;
  }
}

/* SKILLS */

#skills {
  opacity: 70%;
  color: black;
  align-items: center;
}
.texto {
  padding: 1rem;
  text-align: center;
  width: 150%;
}

/* PORTFOLIO */

#portfolio {
  color: #000;
  text-shadow: 2px 2px 5px #681757;
}
#portfolio h1 {
  text-align: center;
}
.descripcion {
  padding: 30px;
}
.proyecto img {
  width: 150px;
  height: auto;
  border-radius: 20%;
}
.proyecto {
  justify-content: space-around;
  padding: 20px;
}
.descripcion h1 {
  padding-bottom: 25px;
}
.button {
  background-color: #000000;
  color: #fff;
  border: none;
  width: 100px;
  padding: 3px;
  box-shadow: 0 8px 16px 0 #681757, 0 6px 20px 0 #681757;
}
.button:hover {
  box-shadow: 0 20px 20px 0 #681757, 0 50px 50px 0 #681757;
}

/* CONTACTO */
#contacto {
  color: #000;
  padding: 3rem;
  width: 100%;
  margin: 0px;
}

#contacto h1 {
  padding-bottom: 40px;
  text-shadow: 2px 2px 5px #681757;
}
#contacto .boton {
  padding-top: 30px;
}

/* FOOTER */

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 20px;
  color: #000;
}
.footer-derechos {
  padding-top: 20px;
}
.footer-logo img {
  width: 70px;
}
.footer-redes a {
  color: #000;
  font-size: 30px;
  padding: 15px;
}
.red-social:hover {
  text-shadow: 2px 2px 5px #681757;
}