@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,700&subset=latin,greek);
* {font-family: "Open Sans", Helvetica, Arial, sans-serif;}

:root {
    /* alto del menú */
    --bulma-navbar-height: 3.25rem;

    /* alto botones */
    --button-padding-vertical: 0.20em !important;
    --button-padding-horizontal: 1em !important;

    /* espacio de main */
    --padding-vertical-main: 0.25rem;
    --padding-horizontal-main: 0.50rem;

    /* espaciado del título */
    --encabezado-padding-vertical: 0.25rem;
    --encabezado-padding-horizontal: 0.50rem;

    /* espacio de article */
    --padding-vertical-article: 0.50rem;
    --padding-horizontal-article: 0.50rem;
    --margin-vertical-article: 0.50rem;
    --margin-horizontal-article: 0.50rem;

    /* Colores */
    --body-bg: #000000;
    --body-color: #ffffff;
    --body-hover: #7a7a7a;
    --sidebar-bg: #2e3379;
    --sidebar-color: #ffffff;
    --sidebar-hover: #694444;
    --encabezado-bg: #7a7a7a;
    --encabezado-color: #000000;
    --encabezado-hover: #01393d;
    --article-bg: #ffffff;
    --article-color: #000000;
    --article-hover: #242a3f;
    --allauth-bg: #7e3900;
    --allauth-color: #ffffff;
    --allauth-hover: #5a668f;


    /* Porcentaje del sidebar */
    --sidebar-porcentaje: 0.25;
    --sidebar-padding-vertical: 0.25rem;
    --sidebar-padding-horizontal: 0.50rem;

    /* Tipografías */
    --font-menu: 'Roboto Condensed', sans-serif;
    --font-header: 'Montserrat', sans-serif;
    --font-main: 'Open Sans', sans-serif;
}


/* Para pantallas en orientación horizontal (landscape) */
@media (orientation: landscape) {
    :root {
        --sidebar-porcentaje: 0.25; /* Máximo 25% en horizontal */
    }
}
/* Para pantallas en orientación vertical (portrait) */
@media (orientation: portrait) {
    :root {
        --sidebar-porcentaje: 0.75; /* Máximo 75% en vertical */
    }
    .main-content.is-shrinked {
        margin-left: 0 !important; /* es el porcentaje restante del aside */
    }
}



html {box-sizing: border-box;}

*, *::after, *::before {box-sizing: inherit;}

*, *:before, *:after {box-sizing: border-box; outline: none;}

body {
  position: relative;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-top: var(--bulma-navbar-height); /* Usa la variable de Bulma o 3.25rem */
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body-color);
  background-color: var(--body-bg);
  overflow-x: hidden;
}

.main-content {
    width: 100%;
    transition: width 0.3s ease;
    padding: var(--padding-vertical-main) var(--padding-horizontal-main); /* Añade padding interno*/
}

.main-content article {
    padding: var(--padding-vertical-article) var(--padding-horizontal-article); /* Añade padding interno*/
    margin: var(--margin-vertical-article) var(--margin-horizontal-article); /* Añade padding interno*/
    background-color: var(--article-bg);
    color: var(--article-color);
}

/* hay cuentas en el encabezado para anular el padding de main-content */
.encabezado {
    width: calc(100% + 2 * var(--padding-horizontal-main));
    margin-left: calc(-1 * var(--padding-horizontal-main));
    margin-right: calc(-1 * var(--padding-horizontal-main));
    margin-top: calc(-1 * var(--padding-vertical-main));
    padding: var(--encabezado-padding-vertical) var(--encabezado-padding-horizontal);
    background-color: var(--encabezado-bg);
    color: var(--encabezado-color); /* Asumo que esto es lo que querías para el color de texto */
}