/* 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." */

/* Reseteamos márgenes básicos */
body {
    margin: 0;
    padding: 0;
    background-color: #2A2A35; /* Un gris oscuro con un toque azulado, típico de SGI */
    color: #FFFFFF;
    font-family: "Courier New", Courier, monospace; /* La fuente de terminal */
}

/* --- LA BARRA DE MENÚ --- */
.menu-bar {
    background-color: #C0C0C0; /* El gris clásico de Windows/SGI */
    padding: 4px 8px;
    display: flex;
    gap: 4px; /* Espacio entre los botones */
    
    /* EL SECRETO DEL ESTILO 90s: Bordes biselados (Elevados) */
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080;
}

/* --- LOS BOTONES DEL MENÚ --- */
.menu-item {
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    padding: 4px 12px;
    background-color: #C0C0C0;
    
    /* Aquí invertimos los bordes para que parezca un botón hundido */
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}

/* Efecto cuando pasas el ratón por encima */
.menu-item:hover {
    background-color: #D4D4D4; /* Un poquito más claro */
}

/* --- EL ÁREA PRINCIPAL --- */
.main-content {
    padding: 20px;
    /* Le damos el borde opuesto (hundido) para que parezca una ventana */
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    margin: 10px;
    min-height: 400px; /* Solo para que se vea el área por ahora */
}

/* --- EL TÍTULO PRINCIPAL --- */
.site-title {
    font-size: 48px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #FFFFFF;
    text-transform: uppercase; /* Todo en mayúsculas */
    letter-spacing: 5px; /* Espacio entre las letras */
}

/* --- LA DESCRIPCIÓN --- */
.site-description {
    font-size: 16px;
    color: #A0A0A0; /* Un gris más clarito para que no compita con el título */
    margin-top: 0;
    margin-bottom: 30px;
}

/* --- EL MARCO DE LA FOTO (Estilo SGI) --- */
.photo-frame {
    width: 100%;
    max-width: 600px; /* Para que no sea gigantesca en monitores muy grandes */
    height: 350px;
    background-color: #111111; /* Un negro muy oscuro, placeholder para tu foto */
    
    /* Aquí usamos el borde elevado (outset) para que el marco sobresalga */
    border-top: 4px solid #FFFFFF;
    border-left: 4px solid #FFFFFF;
    border-bottom: 4px solid #808080;
    border-right: 4px solid #808080;
}