*
{
    font-family: 'Courier New', Courier, monospace;
}

body,span.plain
{
    background-color: black;
    color: #33FF00;
}

div.zombie
{

    max-width: 1024px;
    min-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

h1
{
    background-color: #33FF00 ;
    color: black;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.5em;
    font-weight: bold;
}

h2,h3
{
    background-color: #33FF00 ;
    color: black;
    margin-top: 10px;
    margin-bottom: 10px;
}

h2
{
    text-align: center;
}

h3
{
    padding: 2px;
}

h3.you
{
    background-color: #ffcc00;
}

p.msg
{
    color: #ffcc00;
    font-size: larger;
}

a
{
    color: #ffcc00;
}
div.tagline
{
    color: #ffcc00;
    text-align: center;
}
span.star
{
    color: #ffcc00;
    font-size: larger;
}
span.star0
{
    color: pink;
    font-size: larger;
}

span.meter_label
{
    background-color: #33FF00;
    color:black;
    font-weight:bold;
}

div.tiles
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding: 10px;

}
div.tile
{
    cursor: pointer;

    padding: 0px;
    margin: 1px;
    background-color: black;
    color: #33FF00;
    border-radius: 10px;
    border: #33FF00 1px solid;
}
div.tile:hover
{
    border: #ffcc00 1px solid;
}
div.tile_title
{
    padding: 10px;
    
    color: #ffcc00;
    text-align: center;
    font-size: large;
    font-weight: bold;
}
div.tile_img
{
    background-image: url(./tile_img/zombie2100.png);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;

    min-width: 200;
    min-height: 200px;
}
div.tile_info
{
    padding: 10px;

    color: #33FF00;
}
span.info
{
    color: #ffcc00;
}

button
{
    display: block;
    font-weight: bold;
    font-size: 1.3em;
    background-color: #FF3333;
    color: white;
    border: none;
    padding: 10px 2px 10px 2px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    border: 1px solid black;
    width: 80%;
    max-width: 275px;
    min-width: 80px;
}
button output.tip
{
    color: green;

}
div.item_search button
{
    height: 100%;
}

button:disabled
{
    background-color: #5a1111;
    color: rgb(136, 135, 135);
    cursor: initial;
}

table.button_set
{
    width:300px; 
    margin-left: auto;
    margin-right: auto;
}
table.button_set td button
{
    margin-top: 0px;
}
div.resources
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
}

div.myresources
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding: 10px;
}

div.resources div.about
{
    grid-column: 1 / 4;

    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    font-size: larger;
}

div.myresources div.about
{
    grid-column: 1 / 4;

    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    font-size: larger;
}

div.resources div.hazzards
{
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    font-size: larger;
}

div.resources div.item_label,
div.myresources div.item_label
{
    font-size: larger;
}

div.resources div.item_count,
div.myresources div.item_count
{
    color: #ffcc00;
    font-size: larger;
}

table.survivor
{
    border-collapse: collapse;
}
table.survivor th
{
    border: 1px black solid;
    background-color: #33FF00 ;
    color: black;
}
table.survivor th,
table.survivor td
{
    padding: 10px;
}
table.survivor tr.you td
{
    color: #ffcc00;
}

@media (max-width: 800px)
{
    
    div.tiles
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-columns: 1fr;
        padding: 10px;

    }
    div.zombie
    {
        width: 100%;
        min-width: auto ;
    }
    button
    {
        font-size: 1.0em;
    }

    
    div.resources div.about,
    div.resources div.hazzards
    {
        display: none;
    }
    div.resources
    {
        grid-template-columns: 1fr 1fr;
    }

    div.resources div.label_ammo
    {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    div.resources div.label_zombies
    {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }

    div.resources div.count_ammo
    {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }

    div.resources div.count_zombies
    {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
    }
}

@media (max-width: 500px)
{
    .hide500
    {
        background-color: blueviolet;
        display: none;
    }
}