/* 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: #e0a81b;  /* Mostaza retro */
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    margin: 0;
    padding: 20px;
}

/* HEADER - con imagen flotante */
header {
    max-width: 800px;
    margin: 0 auto 20px auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3);  /* Fondo semitransparente */
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 {
    color: white;
    font-size: 48px;
    margin: 0;
    text-shadow: 4px 4px 0 #8B4513;  /* Sombra café */
    font-family: 'Impact', 'Arial Black', sans-serif;
    letter-spacing: 2px;
}

#reloj img {
    border: 5px solid white;
    border-color: #ffffff #8B4513 #8B4513 #ffffff;  /* Efecto 3D */
    background-color: #fcba03;
    padding: 3px;
}
.miboton {
  float: right;
  
}
.blog-entries ul li a {
    color: #e0a81b;  /* Mostaza */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 15px;
    background-color: black;
    border: 2px solid white;
    font-family: 'Verdana', sans-serif;
    text-transform: uppercase;
    display: inline-block; /* Para que el padding funcione correctamente */
    margin: 5px 0; /* Espacio entre links si están apilados */
}

.blog-entries ul li a:hover {
    background-color: white;
    color: #8B4513;
    border-color: #e0a81b;
}

/* NAVBAR */
.navbar {
    max-width: 800px;
    margin: 0 auto 30px auto;
    background-color: #8B4513;  /* Café */
    border: 3px solid white;
    padding: 15px;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.navbar ul li {
    display: inline-block;
    margin: 0 10px;
}

.navbar ul li a {
    color: #e0a81b;  /* Mostaza */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 15px;
    background-color: black;
    border: 2px solid white;
    font-family: 'Verdana', sans-serif;
    text-transform: uppercase;
}

.navbar ul li a:hover {
    background-color: white;
    color: #8B4513;
    border-color: #e0a81b;
}

/* MAIN CONTAINER */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.5);  /* Negro semitransparente */
    border: 3px solid white;
}

/* TIPOGRAFÍA */
h2 {
    color: white;
    font-size: 20px;
    border-left: 10px solid #8B4513;
    padding-left: 15px;
    margin-top: 0;
    line-height: 1.5;
    font-weight: normal;
}

h3 {
    color: #fcba03;
    font-size: 24px;
    margin-bottom: 10px;
    text-decoration: underline wavy white;
    font-family: 'Courier New', monospace;
}

p {
    line-height: 1.8;
    font-size: 15px;
    background-color: rgba(139, 69, 19, 0.3);  /* Café semitransparente */
    padding: 15px;
    border: 2px dashed white;
}

/* GUESTBOOK (iframe) */
iframe {
    width: 100%;
    height: 500px;
    border: 5px solid white;
    border-color: #ffffff #8B4513 #8B4513 #ffffff;
    margin: 20px 0;
    background-color: #8B4513;
}

/* EFECTO PARA "under construction" */
p:first-of-type {
    background-color: black;
    color: #e0a81b;
    font-weight: bold;
    text-align: center;
    animation: blink 1.5s infinite;
    border: 3px solid white;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

/* RESPONSIVE */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        text-align: center;
    }
    
    header h1 {
        font-size: 36px;
        margin-bottom: 15px;
    }
    
    .navbar ul li {
        display: block;
        margin: 10px 0;
    }
    
    .navbar ul li a {
        display: block;
    }
    
    h2 {
        font-size: 18px;
    }
}

/* EXTRAS RETRO */
::selection {
    background-color: #8B4513;
    color: #e0a81b;
}