/* ================================================================================================================== */
/* || General setup */
/* ================================================================================================================== */
html, body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
    /*background-color: #262626;*/
    /*background-color: #272727;*/
    background-color: #000000;
}

body {
    width: 80%;
    margin: 0 auto;
}

/* ================================================================================================================== */
/* || typography */
/* ================================================================================================================== */
h1, h2, h3 {
    font-family: 'Sonsie One', cursive;
    /*color: #2a2a2a;*/
    color: black;
}

h1 {
    font-size: 4rem;
    text-align: center;
    color: white;
    /*text-shadow: 2px 2px 10px black;*/
}

h2 {
    font-size: 3rem;
    text-align: center;
}

h3 {
    font-size: 2.25rem;
}

p, li {
    /*font-family: 'Open Sans Condensed', sans-serif;*/
    font-family: sans-serif;
    /*color: #2a2a2a;*/
    color: black;
    font-size: 2em;
    line-height: 1.5;
}

/* ================================================================================================================== */
/* || header layout */
/* ================================================================================================================== */
/*nav, section, aside {*/
/*    background-color: white;*/
/*    !*padding: 1%;*!*/
/*}*/

section, aside {
    padding: 1%;
}

nav {
    height: 50px;
    /*background-color: #ff80ff;*/
    /*background-color: #1a94ff;*/
    /*coolors*/
    background-color: #363946;
    display: flex;
    margin-bottom: 10px;
}

/* ##################################################################### */
/* this section makes the header fixed */
/*
    I'm not sure that this is the best way to do it, but it seems reasonable.
    I'm a little boxed in by the way they're using the "section, aside { padding: 1% } above, but as lon as it
    displays properly, I think I can keep it an move on.
    There are too many other things I need to be getting onto.
 */
/*
 This this commented out for now, because it creates problems for the aside links on project pages.
 The padding-top: 175px seems to be the problem and I don't want to get side-tracked with it right now
 */
/*header {*/
/*    !* from fixed menu *!*/
/*    position: fixed;*/
/*    width: 70%;*/
/*    background-color: black;*/
/*}*/

/*.page-content, aside {*/
/*    !*padding-top: 175px;*!*/
/*    margin-top: 175px;*/
/*}*/

/* from fixed menu */
/*.navbar {*/
/*    overflow: hidden;*/
/*    background-color: #333;*/
/*    position: fixed;*/
/*    top: 0;*/
/*    width: 100%;*/
/*}*/
/* ##################################################################### */

nav ul {
    padding: 0;
    list-style-type: none;
    flex: 2;
    display: flex;
}

nav li {
    display: inline;
    text-align: center;
    flex: 1;
}

nav a {
    display: inline-block;
    font-size: 2rem;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
}

/* from fixed menu */
/*.navbar a {*/
/*    float: left;*/
/*    display: block;*/
/*    color: #f2f2f2;*/
/*    text-align: center;*/
/*    padding: 14px 16px;*/
/*    text-decoration: none;*/
/*    font-size: 17px;*/
/*}*/

/* ================================================================================================================== */
/* || main layout */
/* ================================================================================================================== */
main {
    display: flex;
}

section {
    flex: 4;
    /*background-color: #ffcc99;*/
    /*coolors
    background-color: #819595;*/
    /*background-color: #acb9b9;*/
    background-color: #EBDAC1;
}

aside {
    /* I tried to add to fix the aside, but it isn't so simple and I don't think it is worth spending more time on now */
    /*position: fixed;*/
    /*height: 100%;*/
    /*padding-top: 175px;*/

    flex: 1;
    margin-right: 10px;
    /*background-color: #ff80ff;*/
    /* coolors
    background-color: #696773; */
    /*background-color: #888593;*/
    background-color: #9BAB9F;
}

aside li {
    padding-bottom: 10px;
}

aside a {
    display: inline-block;
    font-size: 1.75rem;
    /*text-decoration: none;*/
    /*color: white;*/
}

/* ================================================================================================================== */
/* || Additional stuff I added */
/* ================================================================================================================== */
footer {
    margin-top: 10px;
    background-color: #363946;
    padding: 1%;
    color: white;
    font-size: 1.5em;

    display: flex;
    flex: 1;
    flex-direction: row;
}

div#footer-div-copyright {
    width: 50%;
    /*align-content: ;*/
    /*justify-content: left;*/
    text-align: left;
}

div#visitorCount {
    width: 50%;
    text-align: right;
    /*justify-content: right;*/
    /*justify-items: right;*/
}

.top-of-page {
    text-align: right;
    font-size: 1.25em;
}

/* ================================================================================================================== */
/* tables */
/* ================================================================================================================== */
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
table {
    table-layout: fixed;
    width: 100%;
}
th {
    font-weight: bold;
    font-size: 2em;
    /*color: #f5f0f2;*/
    /*background-color: #704C5E;*/
    /*background-color: #363946;*/

    background-color: #9BAB9F;
    color: black;
}
td {
    text-align: left;
    padding: .5%;
    font-size: 1.75em;
}
td.page-link, td.table-title-td {
    text-align: center;
}
td.table-title-td {
    font-weight: bold;
}

thead th:nth-child(1) { width: 12% }
thead th:nth-child(2) { width: 33% }
thead th:nth-child(3) { width: 7% }
thead th:nth-child(4) { width: 46% }
/*tbody tr:nth-child(odd) { background-color: #eae1e6; }*/
/*tbody tr:nth-child(even) { background-color: #d6c2cc; }*/
tbody tr:nth-child(odd) { background-color: #f1f3f2; }
tbody tr:nth-child(even) { background-color: #d5dcd7; }

/* ================================================================================================================== */
/* Project pages */
/* ================================================================================================================== */
div.tech-used {
    display: flex;
    flex-direction: row;
}
div.tech-used-1 {
    width: 50%;
}
img.project-diagram {
    width: 100%;
}