@import "colors.css";

body {
    font-family: sans-serif;
    background-color: var(--bg-color-a);
    color: var(--text-color-a);
}

/* Remove padding & margin for every element inside root_div divs*/
.root_div * {
    margin: 0;
    padding: 0;
}
.root_div {
    margin: 10px;
    margin-bottom: 2rem;

    padding: 1rem;
    background-color: rgb(16, 50, 70);
}

div#bottom-nav {
    margin-top: 0.5rem;
}

/* Change links style */
a:link, a:visited {
    color: var(--accent-color-b);
    text-decoration: none;
}
a:hover {
    text-decoration:underline;
}

#header_div {
    table {
        width: 100%;
    }
    td, th {
        text-align: center;
        vertical-align: middle;
    }

    #header_table_authors {
        text-align: left;
    }

    #header_table_buttons {
        .web_style_button {
            border: 2px solid var(--accent-color-a);
            background-color: var(--bg-color-a);
            color: var(--text-color-a);

            margin: 0 5px 0 5px;
            padding: 3px;
            display: inline-block;

            text-align: center;
            text-decoration: none;

            transition-duration: 0.4s;
            cursor: pointer;
        }

        .web_style_button:hover {
            background-color: var(--accent-color-a);
        }
    }

    #header_table_link {
        text-align:right;
    }
}

#no_js_warning {
    text-align: center;
}

#footer_div {
    table {
        width: 100%;
    }
    td, th {
        text-align: center;
        vertical-align: middle;
    }

    #footer_table_authors {
        text-align: left;
    }

    #footer_table_link {
        text-align:right;
    }
}

/* Layout utilities */

.flex {
    display: flex;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    text-align: center;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}
nav {
    display: flex;
    align-items: center;
    justify-content: center;
}
a {
    color: yellow !important;
}
nav a {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.8rem;
}

.mb20 {
    margin-bottom: 20px;
}
.mb10 {
    margin-bottom: 10px;
}
.mv20 {
    margin-bottom: 20px;
    margin-top: 20px;
}
.p10 {
    padding: 10px;
}
.p20 {
    padding: 20px;
}
.pl50 {
    padding-left: 50px;
}
.mh10 {
    margin-left: 10px;
    margin-right: 10px;
}

.m3rem {
    margin-left: 3rem;
    margin-right: 3rem;
}

/* Form styles */
form.userinput {
    padding: 2rem;
    margin-bottom: 1rem;
}

form>input.send {
    margin-top: 0.5rem;
    padding: 0.2rem;
}

div.section {
    margin-left: 2rem;
    margin-bottom: 2rem;
}
div.section ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2rem;
}
div.section h3 {
    margin-bottom: 0.5rem;
}