/* Meta */
html, body {
    padding: 0px;
    margin: 0px;

    background-color: #222;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Sections */
header, footer, main {
    padding: 1ch;
}

header {
    background-color: #222;
    text-align: center;
}

footer {
    vertical-align: text-top;
    background-color: #222;

    color: #FFF;
}

a {
    color: #C9C;
}

a:focus {
    color: #DAD;
}

a:visited {
    color: #DBD;
}


footer a {
    color: #CCC;
}

footer a:focus {
    color: #DDD;
}

footer a:visited {
    color: #999;
}

footer ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

main {
    background-color: #333;
    text-align: center;

    padding-left: 5vw;
    padding-right: 5vw;
}

section {
    margin-bottom: 1ch;
}

/* Text */
h1, h2, h3, h4, h5, h6 {
    color: #C9C;
    margin-top: 1ch;
    margin-bottom: 1ch;
}

p {
    color: #DDD;
}

/* Stack columns horizontally if screen is wide enough */
@media (min-width: 1200px) {
    main {
        display: flex;
        flex-direction: row;
    }

    /* Two-column Layout */
    .column {
        flex: 50%;

        padding-left: 5vw;
        padding-right: 5vw;
    }

    .column_left {
        flex: 33%;
    }
}

/* Tables */
table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2ch;

    table-layout: fixed;

    max-width: 50vw;

    color: #DDD;
}

th, td {
    outline-style: solid;
    outline-width: 3px;
    outline-color: #222;

    padding: 0.5ch 1ch;
    margin: 0px;
}

th {
    padding: 1ch 2ch
}

.column_name {
    min-width: 8vw;
    max-width: 10vw;
}

.column_price {
    min-width: 8vw;
    max-width: 10vw;
}

.column_description {
    width: 100%;
}

/* Images */
img {
    max-width: 50%;
}