:root {
    /* Colors */
    --color-venusian-light: #faf9fb;
    --color-venusian-accent: #c59754;
    --color-venusian-highlight: #c79563;
    --color-venusian-background: #924410d9;
    --color-venusian-foreground: #fde48d;
    --color-venusian-dark: #2a2c3505;
    --color-transparent: rgba(0, 0, 0, 0);
}


html {
    margin: 0;
    padding: 0;
}

body {
    font-size: calc(1em + .1vw);
    /* font grows 1px for every 100px of viewport width */
    line-height: calc(1.7em + 0.5vw);
    /* leading grows along with font, with an additional 0.1em + 0.5px per 100px of the viewport */
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-weight: 200;
    color: var(--color-venusian-foreground);
    align-content: center;
    background-color: rgb(0, 0, 0);
    background-image: url('../images/maat-mons-on-venus1200.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-y: 225px;
    background-position-x: center;
}
#container {
    /* align-content: center; */
    /* margin: 0 auto; */
    background-color: var(--color-venusian-dark);
    min-height: 1200px;
    max-width: 968px;
}
#header {
    width: auto;
    background-color: var(--color-transparent);
    height: 300px;
    margin: 0;
    padding: 0 10px;
    background-image: url('../images/mercury-venus-earth-mars900trans.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    z-index: 0;
}
#hacker {
    width: 100%;
    margin: 0;
    padding: 0;
    align-content: center;
}
#hacker img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    width: 100vw;
    position: sticky;
    top: 0;
    opacity: 0.8;
    z-index: 1;
    /* border: solid aliceblue; */
}
#logo {
    width: 100%;
    margin: 0;
    padding: 0;
    align-content: center;
}
#logo img {
    margin: 0 auto;
    padding: 5px;
    display: block;
    max-width: 100%;
    position: sticky;
    top: 0;
    z-index: 3;
}
article p, article ul {
    text-align: justify;
    padding: 1%;
    background-color: var(--color-venusian-background);
    border-radius: 3px;
    list-style-image: url('../images/venusbullet.png');
    z-index: 2;
}
article ul {
    margin-left: 30px;
    padding-left: 15px;
}
article a, article p a:link, article p a:visited, article p a:active, article p a:hover {
    color: inherit;
}

/* Link Logos and Flags */
.link_logo {
    height: 1em;
    margin: 0;
    padding: 0;
    align-content: center;
}

/* Grid System */


/*  SECTIONS  */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child {
    margin-left: 0;
}

/*  GROUPING  */

.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
    /* For IE 6/7 */
}

/*  GRID OF FIVE  */

.span_3_of_5 {
    width: 59.36%;
    min-width: 768px;
    max-width: 968px;
}
.span_1_of_5 {
    width: 18.72%;
    /* width: calc(calc(100vh - 968px) \ 2); */
}

/*  GO FULL WIDTH BELOW 968 PIXELS */

@media only screen and (max-width: 768px) {
    .col {
        margin: 1% 0 1% 0%;
    }
    .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 {
        width: 100%;
    }
    .span_3_of_5 {
        min-width: 100vmin;
    }
}

/* Table Styles */
/* from:  https://codepen.io/Orangetronic/pen/pJgpXw */
/* 
body {
    padding: 2em;
} */

table {
    width: 100%;
    background-color: var(--color-venusian-background);
    font-size: 1em;
    border-radius: 3px;
}

table th,
table td {
    text-align: left;
    font-size: 0.7em;
    padding: 0.25em;
    word-wrap: normal;
}

table tr:nth-child(odd) {
    background-color: var(--color-venusian-dark);
}

td.edit-buttons {
    text-align: right;
}

button {
    border-radius: 3px;
    border: none;
    margin: 0 0.25em;
    transition: all 0.3s;
}

button:hover {
    box-shadow: 0 0 4px rgba(3, 3, 3, 0.8);
    opacity: 0.9;
}

button.edit {
    background: #6F9;
}

button.delete {
    background: #F69;
}

@media screen and (max-width: 800px) {
    tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0.5em 0;
        border: 1px solid rgba(3, 3, 3, 0.2);
    }

    td,
    th {
        flex: 1 1 150px;
        border: 0.5px solid rgba(3, 3, 3, 0.2);
    }

    /* td.edit-buttons,
    td.empty {
        /*flex: 1 0 90%;
        text-align: center;
    } */
}

table * {
    box-sizing: border-box;
    font-family: 'futura';
}