/* ================================ Neocities — Naturaleza Boho + Diario 2000s Paleta: - Verde oliva: #6B8E23 - Terracota: #E2725B - Beige: #F5F5DC - Madera: #8B4513 ================================= */ /* Fuentes: títulos Comic Sans / Trebuchet; texto Georgia / Verdana */ @import url('https://fonts.googleapis.com/css2?family=Trebuchet+MS:wght@400;700&display=swap'); :root { --oliva: #6B8E23; --terracota: #E2725B; --beige: #F5F5DC; --madera: #8B4513; --negro-suave: #2b2b2b; } /* Fondo tipo papel — reemplaza la URL por tu textura subida a Neocities */ body { background: url('/images/papel.jpg') repeat; background-color: var(--beige); color: var(--negro-suave); font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; margin: 0; padding: 0; } /* Contenedor principal */ main { max-width: 900px; margin: 20px auto; background: rgba(245, 245, 220, 0.85); /* beige translúcido */ border: 2px dashed var(--madera); box-shadow: 0 8px 20px rgba(0,0,0,0.15); backdrop-filter: blur(1px); padding: 20px; } /* Cabecera */ header { text-align: center; padding: 20px; background: linear-gradient(90deg, rgba(107,142,35,0.25), rgba(226,114,91,0.25)); border-bottom: 2px solid var(--madera); } header h1 { font-family: 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif; color: var(--terracota); margin: 0; } header button { margin-top: 10px; } /* Subtítulos */ h2, h3 { font-family: 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif; color: var(--terracota); border-bottom: 2px dotted var(--oliva); padding-bottom: 6px; margin-bottom: 12px; } /* Texto general */ p, li { font-family: Georgia, Verdana, serif; color: var(--negro-suave); } /* Enlaces */ a { color: var(--oliva); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s ease; } a:hover { color: var(--terracota); border-bottom: 2px solid var(--terracota); text-shadow: 0 0 6px rgba(226,114,91,0.5); } /* Botones */ button { background: var(--oliva); color: #fff; border: 2px solid var(--madera); padding: 8px 14px; border-radius: 8px; font-family: 'Trebuchet MS', sans-serif; cursor: pointer; } button:hover { background: var(--terracota); } /* Caja tipo diario */ .diario-box { background: #fffef6; border: 2px dashed var(--madera); padding: 14px; margin: 16px 0; position: relative; } /* Doodles en los bordes */ .diario-box::before, .diario-box::after { content: ""; position: absolute; width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; opacity: 0.9; } .diario-box::before { top: -20px; left: -20px; background-image: url('/images/doodle-star.png'); } .diario-box::after { bottom: -20px; right: -20px; background-image: url('/images/doodle-heart.png'); } /* Stickers */ .sticker { position: absolute; width: 90px; height: 90px; background-size: contain; background-repeat: no-repeat; z-index: 10; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); } .sticker.flower { top: 40px; left: -30px; background-image: url('/images/flower.png'); } .sticker.butterfly { top: 120px; right: -30px; background-image: url('/images/butterfly.png'); } .sticker.star { bottom: 60px; left: -20px; background-image: url('/images/star.png'); } /* GIFs brillantes */ .gif-corner { position: absolute; width: 70px; height: 70px; background-size: cover; opacity: 0.85; } .gif-corner.top-left { top: -10px; left: -10px; background-image: url('/images/glitter.gif'); } .gif-corner.bottom-right { bottom: -10px; right: -10px; background-image: url('/images/heart.gif'); } /* Bloques de mood, canciones, frases */ .section-title { font-family: 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif; color: var(--terracota); font-size: 1.2rem; margin-bottom: 8px; } .mood, .songs, .quotes { background: rgba(107,142,35,0.08); border: 2px dotted var(--oliva); padding: 12px; margin-bottom: 14px; } .mood li, .songs li, .quotes li { list-style: none; padding-left: 22px; position: relative; } .mood li::before, .songs li::before, .quotes li::before { content: "✦"; color: var(--oliva); position: absolute; left: 0; } /* Citas estilo diario */ blockquote { background: #fffef6; border-left: 6px solid var(--terracota); padding: 10px 12px; font-style: italic; color: var(--madera); } /* Separadores */ hr { border: none; border-top: 2px dotted var(--oliva); margin: 16px 0; } /* Footer */ footer { background: rgba(139,69,19,0.08); border-top: 2px dashed var(--madera); padding: 10px; text-align: center; font-family: 'Trebuchet MS', sans-serif; } /* Responsive */ @media (max-width: 720px) { main { margin: 10px; } .sticker, .gif-corner { display: none; } }