html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    /* Centrado absoluto */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita scrolls raros */
}

.tv-container {
    position: relative;
    /* El contenedor será tan grande como la imagen */
    display: inline-block; 
    line-height: 0; /* Elimina espacios fantasma debajo de la imagen */
}

.tv-background {
    /* Esto hace que el televisor se ajuste al alto de la pantalla 
       sin importar si es un monitor grande o pequeño */
    height: 95vh; 
    width: auto;   /* Mantiene la proporción original del dibujo */
    display: block;
}

/* --- BOTONES DE NAVEGACIÓN --- */
.nav-btn {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    /* background: rgba(255, 0, 0, 0.4); */ /* ACTIVA ESTO PARA CALIBRAR */
}

/* Posiciones basadas en el dibujo de SSX */
.home    { top: 82%; left: 21%; width: 7%; height: 9%; }
.blog    { top: 82%; left: 29%; width: 7%; height: 9%; }
.about   { top: 82%; left: 37%; width: 7%; height: 9%; }
.contact { top: 82%; left: 45%; width: 7%; height: 9%; }

/* --- PANTALLA DEL TV (Donde va tu blog) --- */
.tv-screen-content {
    position: absolute;
    line-height: normal; /* Restaura el interlineado para el texto */
    top: 17%;
    left: 16.5%;
    width: 61%;
    height: 48%;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    font