@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* transition: .3s all ease; */
}
body{
  color: #fffffe;
  background: #16161a;
  font-family: 'Quicksand', sans-serif;
}
/* Barra de desplazamiento vertical */
::-webkit-scrollbar {
  width: 8px; /* Ancho de la barra */
  background-color: #16161a; /* Color de fondo */
}

/* Pista */
::-webkit-scrollbar-track {
  background-color: #16161a; /* Color de fondo */
}

/* Pulgar */
::-webkit-scrollbar-thumb {
  background-color: #c6c0c0d3; /* Color del pulgar */
  border-radius: 10px; /* Borde redondeado */
}

/* Al pasar el ratón sobre la barra de desplazamiento */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* Color del pulgar al pasar el ratón */
}
li{
  list-style: none;
}
.contenedor{
  width: 100%;
  min-height: auto;
}
.contenedor-nav{
  height: auto;
  width: 100%;
  padding: 0 45px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background-color: #16161a;
  z-index: 8;
}
.contenedor-nav-logo{
  font-weight: bold;
}
.contenedor-nav-button{
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 9;
}
.contenedor-paletas{
  padding: 130px 0 0 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 55px;
}
.contenedor-favoritos{
  width: 250px;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #16161a;
  transform: translateX(250px);
  position: fixed;
  transition: transform .3s ease;
  display: flex;
  align-items: center;
  gap: 35px;
  flex-direction: column;
  padding: 85px 0 0 0;
  z-index: 8;
  overflow-y: auto;
}
.contenedor-favoritos::-webkit-scrollbar{
  width: 0;
}
.is-active{
  transform: translateX(0px);
  display: flex;
  flex-direction: column;
}
/* * estilos paleta de color */
.contenedor-paleta{
  width: 200px;
  border-radius: 50%;
}
.contenedor-colors{
  width: 200px;
  border-radius: 6px;
}
.color{
  width: 100%;
  height: 50px;
  cursor: pointer;
  padding-top: 10px;
  padding-left: 10px;
  font-weight: bold;
}
.color:first-child{
  border-radius: 6px 6px 0 0;
}
.color:last-child{
  border-radius: 0 0 6px 6px; 
}
.color:hover{
  transition: all 0.3s ease-in-out;
  transform: scale(1.1);  
  z-index: 1;
}

.contenedor-buttons{
  height: 35px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
}
.btn-copiar, .btn-like{
  background: none;
  border: none;
  cursor: pointer;
}
.btn-copiar{
  color: #fffffe;
  font-weight: bold;
}
.container-boton-generar{
  height: 80px;
  text-align: center;
  display: grid;
  place-items: center;
}
.btn-generar{
  color: #fffffe;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 6px;
  background-color: #5326d9;
  border: 1px solid #5326d9;
  font-weight: bold;
  outline: none;
}
.btn-generar:hover{
  background-color: #5326d981;
}
/* * contenedor footer */
.contenedor__footer{
  margin-top: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contenedor__redes{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.link__red{
  text-decoration: none;
  color: #fffffe;
  display: block;
  padding: 15px 10;
}
.link__red:hover, .link__red:focus{
  color: #7f5af0;
}
.copyright{
  display: block;
  margin: 25px;
}
/* ! estilos anteriores 
.contenedor__header{
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contenedor__header__web{
 width: 100%;
 text-align: center;
}
.contenedor__aside__web{
  padding: 35px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  border-left: 1px solid #eee;
  min-height: 100vh;
}
.header__titulo{
  padding: 20px 0 0 0;
  font-size: 7vw;
}
.contenedor__paletas{
  margin: 0 auto;
  padding: 40px 0;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
}
.contenedor__paleta{
  width: 200px; 
  border-radius: 6px;
  text-align: left;
}
.color{
  width: 100%;
  height: 50px;
  cursor: pointer;
  padding-top: 10px;
  padding-left: 10px;
  font-weight: bold;
}
.color:nth-child(1){
  border-radius: 6px 6px 0 0;
}
.color:nth-child(4){
  border-radius: 0 0 6px 6px;
}
.color:hover, .color:active{
  transition: all 0.3s ease-in-out;
  transform: scale(1.1);
}
.contenedor__buttons{
  padding: 0 15px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn__copiar{
  color: #fffffe;
  background: none;
  cursor: pointer;
  border: none;
  margin: 10px 0;
  font-weight: bold;
  padding: 5px;
}
.btn__copiar:hover, .btn__copiar:active{
  color: #72757e;
}
.btn__like{
  color: #fffffe;
  cursor: pointer;
  border: none;
  background: transparent;
}
.icon-heart{
  color: #fffffe;
}
.generarBtn{
  color: #fffffe;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 6px;
  background-color: #5326d9;
  border: 1px solid #5326d9;
  font-weight: bold;
  outline: none;
}
.generarBtn:hover{
  background-color: #5326d981;
}