:root {
    --PrussianBlue: #011638;
    --HoneyBronze: #F6AE2D;
    --RoseWood: #BD5D70;
    --ForestGreen: #379634;
    --Porcelain: #FAFFFD;

    --fondo: var(--PrussianBlue);
    --color-texto-cabecera: var(--HoneyBronze);
    --color-texto-cuerpo: var(--HoneyBronze);
    --color-texto-pie: var(--color-texto-cabecera)
}

body {
    padding: 0;
    margin: 0;
}

#root {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    background-color: var(--fondo);
}

#cabecera {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--color-texto-cabecera);
}

#cabecera .izq {

    font-size: 24px;
}

#cabecera .der {

    font-size: 20px;
}

#cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-texto-cuerpo);
}

#pie {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--color-texto-pie);
}

#pie .izq {
    font-size: 16px;
}

#pie .der {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}

/* href Contacto */
a.contacto,
a.contacto:visited {
    position: relative;
    color: var(--HoneyBronze);
    text-decoration: none;
    font-size: 0;
    /* ocultamos el texto original */
}

/* Estado normal: muestra "Contacto" */
a.contacto::after {
    content: "Contacto";
    font-size: 16px;
}

/* Hover: muestra el email */
a.contacto:hover::after {
    content: "xoel.maestu@gmail.com";
}

/* href Github */
a.github,
a.github:visited {
    position: relative;
    color: var(--HoneyBronze);
    text-decoration: none;
    font-size: 0;
    /* ocultamos el texto original */
}

/* Estado normal: muestra "Contacto" */
a.github::after {
    content: "Github";
    font-size: 16px;
}

/* Hover: muestra el usuario de Github */
a.github:hover::after {
    content: "xoel-maestu";
}

/* href index.html */
a.index-html,
a.index-html:visited {
    color: var(--HoneyBronze);
    text-decoration: none;
}

a.index-html:hover {
    opacity: 0.8;
}

/* href about.html */
a.about-html,
a.about-html:visited {
    color: var(--HoneyBronze);
    text-decoration: none;
}

a.about-html:hover {
    opacity: 0.8;
}