@import "../fonts/fonts.css";

:root {
    font-family : roboto, sans-serif;
}

html, body, p, div {
    margin  : 0;
    padding : 0;
}

html {
    background-image  : var(--background-image);
    background-repeat : repeat;
}

nav {
    display        : flex;
    flex-direction : row;

    height         : var(--height-navbar);
    width          : var(--width-content);
    min-width      : min-content;

    margin         : 0;
    padding        : 0;

    position       : fixed;
    z-index        : 10;
    top            : var(--distance-navbar-top);
    left           : calc((100% - var(--width-content)) / 2 - var(--default-border-width));

    background     : var(--color-background);

    border-style   : solid;
    border-width   : var(--default-border-width);
    border-color   : var(--color-primary);
    border-radius  : var(--default-border-radius);
}

nav div {
    display         : inline-flex;
    flex-grow       : 1;

    align-items     : center;
    align-content   : center;
    justify-content : center;

    height          : 100%;
    min-width       : min-content;

    border-right    : solid 2px var(--color-structural);
}

nav div:last-child {
    border-style : none;
}

nav div:last-child > a {
    border-bottom-right-radius : calc(var(--default-border-radius) * 0.8);
    border-top-right-radius    : calc(var(--default-border-radius) * 0.8);
}

nav a {
    flex-grow       : 1;

    align-self      : center;

    height          : 100%;

    color           : var(--color-primary);

    text-align      : center;
    text-decoration : none;
    font-family     : telivigala, sans-serif;
    font-size       : var(--navbar-font-size);
    line-height     : calc(1.7 * var(--navbar-font-size));
}

nav .active {
    font-style            : italic;
    text-decoration       : underline;
    text-decoration-color : var(--color-primary);
}

nav a:hover {
    color      : var(--color-background);
    background : var(--color-primary);
}

/*noinspection CssUnusedSymbol*/
nav .placeholder {
    flex-grow : 6;
}

nav a img {
    vertical-align : middle;
}

nav a .fitimage {
    margin-bottom : 5%;
}

.fitimage {
    max-width  : 90%;
    max-height : 90%;
}

.facebook-container {
    display         : flex;
    width           : 500px;
    height          : 500px;
    text-align      : center;
    font-weight     : bold;
    text-decoration : none;
    border-style    : dashed;
    align-items     : center;
    align-self      : center;
    border-color    : var(--color-structural);
}

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

#content {
    display        : flex;
    min-height     : 100%;
    width          : calc(var(--width-content) - (2 * var(--padding-content-horiz)));
    min-width      : min-content;
    margin         : 5rem auto 2rem;
    background     : var(--color-background);
    border-style   : solid;
    border-color   : var(--color-primary);
    border-radius  : var(--default-border-radius);
    border-width   : var(--default-border-width);
    padding        : 1rem var(--padding-content-horiz);
    flex-direction : column;
}

#content > * {
    align-self : center;
}

#content h1 {
    text-decoration       : underline;
    text-decoration-style : dashed;
    color                 : var(--color-primary);
}

#content .error {
    font-size             : x-large;
    text-decoration       : underline;
    text-decoration-style : double;
    text-decoration-color : var(--color-negative);
}

.legal-text {
    text-align : justify;
    padding    : 0 4rem;
}

.legal-text address, .legal-text p {
    margin     : 0;
    margin-top : 1rem;
}

.archive {
    border-collapse: collapse;
}

.archive thead {
    font-size   : large;
    font-weight : bold;
    text-align  : center;
    border-bottom: solid 0.2rem var(--color-structural);
}

.archive td:first-child {
    padding : 0 1rem;
    border-right: solid 0.2rem var(--color-structural);
}
.archive td:last-child {
    padding : 0 1rem;
}