/* 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 {
 margin: 0;
 padding: 0;
 font-family: Verdana, Arial, sans-serif;
 background: linear-gradient(135deg, #ffe1f0, #d0ffd7);
 color: #222;
}

/* --- SIDEBAR --- */

.sidebar {
  width: 260px;
  background: url(https://i.pinimg.com/736x/9d/b2/05/9db205cec93e26630ac8905ef133f3bc.jpg) no-repeat center center;
  background-size: cover; /* hace que la imagen cubra toda la caja */
  padding; 20px;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  border-right: 3px solid #ff8ad4;
  box-shadow: 0 0 20px rgba(255, 100, 200, 0.4);
  color: white; /* letras blancas para que se vean encima */
  text-shadow: 1px 1px 3px black; /* sombra para que resalten */
}

.side-box {
  background-size: cover; /* hace que la imagen cubra toda la caja */
  border: 2px solid #ffb3e6;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  color: white; /* letras blancas para que se vean encima */
  text-shadow: 1px 1px 3px black; /* sombra para que resalten */  
  position: relative;
  overflow: hidden;
}

.side-box h3, .side box p {
  position: relative;
  z-index: 1; /* asegura que el texto quede encima +7
  }

/* --- CONTENIDO PRINCIPAL --- */

.content {
  margin-left: 300px;
  padding: 20px;
}

header {
  text-align: center;
}

header h1 {
  font-size: 40px;
  color: #00a86b;
  text-shadow: 1px 1px #fff;
}

.subtitule {
  color: #444;
}

/* --- BOTONES BRILLANTES --- */
 
 nav a {
  background: linear-gradient(180deg, #ffb3e6, #ff66c4);
  padding; 10px 20px;
  margin: 5px;
  color: white;
  text-decoration: none;
  border-radius: 15px;
  box-shadow: 0 0 12px rgba(255, 100, 200, 0.7);
  font-weight: bold;
 }
 
 nav a:hover {
   background: linear-gradient(180deg, #ff66c4, #ff1493);
 }
 
 /* --- CAJAS DE CONTENIDO --- */
 
 .box {
    background: white;
  padding; 20px;
  border: 2px solid #a8ffcb;
  border-radius: 15px;
  box-shadow: 0 0 12px rgba(100, 255, 150, 0.4);
 }
 
 footer {
   text-align: center;
   margin-top: 30px;
   padding: 10px;
 }