/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: mistyrose;
  color: black;
  font-family: "Pinyon Script";
 
}

.sidebar {
    width: 260px;
    height: 100vh;
    background-color: #ffffff;
    border-right: 1px solid #d0d4c6;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
}

.nav-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    text-decoration: none;
    color: #403e3e;
    transition: all 0.3s ease;
}

.nav-item img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.nav-text {
    font-size: 17px;
    border-bottom: 1px solid transparent;
}

/* Efectos al pasar el mouse */
.nav-item:hover .nav-text {
    border-bottom: 1px solid #ff6b9d;
    color: #ff6b9d;
}

.nav-item:hover img {
    opacity: 1;
    transform: scale(1.1);
}

.decoracion {
    text-align: center;
    font-family: 'Pinyon Script', cursive;
    font-size: 24px;
    color: #d0d4c6;
    margin: 20px 0;
    
.nav-item img {
    transition: transform 0.3s ease; /* Hace que el movimiento tarde 0.3 segundos */
}

.nav-item:hover img {
    transform: translateY(-5px); /* Mueve el icono 5 píxeles hacia arriba */
}

.nav-item:active img {
    transform: translateY(2px); /* El icono se hunde un poquito al cliquear */

}