@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

body {
    background: #C5C5C5;
    font-size: 1.0em;
}

.content {
    margin: auto;
    width : 55em;
}

.text-block {
    width : 35em;
}

th, td { padding: 0px; }

.attack-button {
    border: 0.1em solid red;
    color: red;
    background-color:#353535;
    width: 20em;
    height : 2em;
    font-size: 100%;
}
.attack-button:hover {
    color: red;
    background-color:black;
    font-size: 100%;
}
.attack-button:active {
    color: red;
    background-color:black;
}

.generic-button {
    border: 0.1em solid black;
    color: black;
    background-color:#B5B5B5;
    width: 25em;
    height : 2em;
    font-size: 100%;
}
.generic-button:hover {
    color: white;
    background-color:black;
    font-size: 100%;
}
.generic-button:active {
    color: white;
    background-color:#232323;
}
.generic-button:disabled {
    border: 0.1em solid #A5A5A5;
    color: #858585;
    background-color:#B5B5B5;
    width: 25em;
    font-size: 100%;
}

.pm_button {
    width: 3em;
    height: 2em;
    text-align: center;
    background-color: #F1F1F1;
    border: 0.1em solid black;
    touch-action: manipulation;
}
.pm_button:hover {
    color: red;
    background-color: black;
}

.radio-column {
    float: left;
    padding-left: 1em;
    padding-right: 1em;
}
.radio_info_text {
    display:none;
    position:absolute;
    background-color:black;
    color:white;
    width:15em;
}
.radio-title:hover span.radio_info_text {
    display:block;
}

/* @media (pointer: coarse) { */
@media (pointer: coarse) {
    .generic-button {
        width: 25em;
        height: 4em;
        font-size: 150%;
    }
    .generic-button:hover {
        width: 25em;
        height: 4em;
        font-size: 150%;
    }
    .generic-button:disabled {
        border: 0.1em solid #A5A5A5;
        color: #A5A5A5;
        background-color:#F1F1F1;
        width: 25em;
        height: 3em;
        font-size: 150%;
    }
    .pm_button {
        width: 4em;
        height: 3em;
    }
    .attack-button {
        width: 25em;
        height : 4em;
        font-size: 150%;
    }
    .attack-button:hover {
        font-size: 150%;
    }
    .radio-column {
        font-size: 150%;
    }
    @media (orientation: landscape) {
        .content {
            margin: auto;
            width : 62em;
        }
    }
}

.villan_panel {
    width: 11em;
    font-size: 80%;
    font-style: normal;
}
.inactive_villan_panel {
    width: 11em;
    font-size: 80%;
    font-style: italic;
    position:relative;
}

.villan_panel:hover {
    background: #A5A5A5;
}
.inactive_villan_panel:hover {
    background: #A5A5A5;
}
.villan_cantbuy_text {
    display:none;
    position:absolute;
    background-color:black;
    color:white;
    width:11em;
}
.inactive_villan_panel:hover span.villan_cantbuy_text { display:block; }

.number_table th, .villan_panel th, .inactive_villan_panel th {
    text-align: left;
}
.number_table td, .villan_panel td, .inactive_villan_panel td {
    text-align: right;
}
.number_table .val_entry {
    font-weight: normal;
    padding-left:0.3em;
    padding-right:1em
}

.delayed_block {
    opacity : 0.0;
}
.compact_block {
    margin : 0;
}

.spacer {
    width : 1em;
}
.hspacer {
    height : 0.5em;
}

.achievements {
    opacity : 0.0;
}
.achievements p {
    margin : 0;
}