@import url('root.css');

body {
    margin: 0 auto;
    max-width: var(--max-width);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color:  var(--link-over-color);
}

abbr,
acronym {
    border-bottom: 1px dotted;
    cursor: help;
}

img {
    border: 0;
}

@media (max-width: 763px) {
    body {
        margin: 0 0.5rem;
    }

    nav {
        display: none;
    }

    footer {
        text-align: center;
    }
}

/* Footer */
footer {
    position: fixed;
    bottom: 0;

    background-color: var(--footer-bg-color);
    border-top: 1px dotted var(--footer-border-color);
    font-size: var(--font-size-subtitulo);
    height: 1.5rem;
    margin: 0 auto;
    padding-top: 0.2rem;
    text-align: center;
    width: 100%;
    max-width: var(--max-width);
}

/* Header */
header img {
    float: left;
    margin: 5px 10px 15px 0;
    text-align: center;
}

header div {
    font-size: var(--font-size-subtitulo);
}

@media (max-width: 550px) {
    header h1 {
        clear: both;
    }
}

/* Navigation */
nav {
    position: sticky;
    top: 0;

    background-color: var(--nav-bg-color);
    clear: both;
    padding: 0.5rem;
}

nav a {
    background-color: var(--nav-link-bg-color);
    border-radius: 0.5rem;
    color: var(--nav-link-text-color);
    display: inline-block;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
}

nav a:hover {
    background-color: var(--nav-link-hover-bg-color);
    color: var(--text-color);
}

/* Main content */

main {
    padding-bottom: 1.5rem;
}

section {
    clear: both;
    padding-top: 3.25rem;
}

h2 {
    background-color: var(--section-bg-color);
    border-radius: 0 0.75rem 0.75rem 0;
    color: var(--section-text-color);
    margin-bottom: 1rem;
    padding: 0.1rem 1rem 0.1rem 0;
    text-align: right;
    width: 90%;
}    

/* Titulos */

#titulos .titulacion {
    clear: both;
}

#titulos .logo {
    float: left;
    margin: 0 1rem 1rem 5px;
}

#titulos .logo img {
    height: 70px;
    width: 60px;
}

#titulos .titulo {
    font-size: var(--font-size-titulo);
}

#titulos .titulo:first-letter {
    font-size: var(--font-size-first-letter);
}

#titulos .universidad {
    margin-left: 5rem;
}

/* Puestos */

#puestos .puesto {
    border-top: 1px dotted var(--section-border-color);
    padding: 0.25rem 0 1rem 5px;
}

#puestos .puesto .empresa {
    float: left;
    font-size: var(--font-size-titulo);
}

#puestos .puesto .fecha {
    color: var(--section-border-color);
    float: right;
    font-size: var(--font-size-subtitulo);
    font-style: italic;
    margin: 0 0.5rem 1rem 1rem;
}

#puestos .puesto .cargo {
    clear: both;
    margin-left: 2rem;
}

#puestos .puesto .modulos {
    font-size: var(--font-size-subtitulo);
    margin: 0.5rem 0 0 4rem;
}

#puestos .puesto .descripcion {
    font-size: var(--font-size-subtitulo);
    font-style: italic;
    margin: 0.5rem 0 0 4rem;
}

/* Ponencias */

#ponencias .ponencia {
    border-top: 1px dotted var(--section-border-color);
    padding: 0.25rem 0 1rem;
}

#ponencias .ponencia .titulo {
    font-size: var(--font-size-titulo);
    margin-left: 5px;
}

#ponencias .ponencia .titulo:first-letter {
    font-size: var(--font-size-first-letter);
}

#ponencias .ponencia .lugar {
    font-size: var(--font-size-subtitulo);
    margin-left: 2rem;
}

/* Libros */

#libros .libro {
    clear: both;
}

#libros .libro .portada {
    float: left;
    margin: 0 1rem 1rem 0;
}

#libros .libro .titulo {
    font-size: var(--font-size-titulo);
}

#libros .libro .titulo:first-letter {
    font-size: var(--font-size-first-letter);
}

#libros .libro .autoria {
    font-size: var(--font-size-subtitulo);
}

#libros .libro .autoria:before {
    content: "[";
}

#libros .libro .autoria:after {
    content: "]";
}

/* Proyectos */

#proyectos .proyecto {
    border-top: 1px dotted var(--section-border-color);
    padding: 0.25rem 0 1rem;
}

#proyectos .proyecto .empresa {
    font-size: var(--font-size-titulo);
    margin-left: 5px;
}

#proyectos .proyecto .desc {
    margin: 0.5rem 0 0 4rem;
}

#proyectos .proyecto .herramientas {
    font-size: var(--font-size-subtitulo);
    margin: 0.5rem 0 0 8rem;
}

/* Cursos */

#cursos .ponencia {
    border-top: 1px dotted var(--section-border-color);
    padding: 0.25rem 0 1rem;
}

#cursos .curso {
    display: inline-block;
    font-size: var(--font-size-titulo);
    margin-left: 5px;
}

#cursos .lugar {
    display: inline-block;
    font-size: var(--font-size-subtitulo);
    font-style: italic;
    margin-left: 1rem;
}

#cursos .lugar:before {
    content: "( ";
}

#cursos .lugar:after {
    content: " )";
}