body {
    margin: 0px;
}

#versioninfo {
    display: inline;
    font-family: "Lucida Console", Monaco, monospace;
}

h2 {
    margin-top: 0px;
}

#details {
    color: #aaa;
    text-align: justify;
}

#details h2 {
    color: #fff;
    text-align: left;
}

#details h3 {
    margin-bottom: 0px;
    margin-top: 5px;
    margin-left: 10px;
    color: #ddd;
    text-align: center;
}

#details strong {
    color: #fff;
}

#suspects {
    cursor: pointer;
}

.monstername {
    font-weight: bolder;
}

.foundmonster {
    background-color: green;
}

.monstererror {
    background-color: red;
    font-style: italic;
}

.cluebuttoncell {
    padding: 0px;
    font-size: 0.7em;
    font-family: "Lucida Console", Monaco, monospace;
}

.cluebuttoncell button {
    height: 28px;
}

.cluebuttonoff {
    background-color: #213;
    color: #999;
}

.cluebuttonon {
    background-color: #74b;
    color: #ddd;
}

.cluebuttonon:hover {
    background-color: #53a;
    color: #aaa;
}

.cluenamecell {
    padding: 0px 0px 0px 5px;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 5px;
}

.unmatchedclue {
    color: red;
    cursor: not-allowed;
    text-decoration: line-through;
}

.cluenamedimmed {
    color: #222;
    font-style: italic;
}

/* collapse system */

.collapsed {
    display: none;
}

.clicktouncollapse {
    font-style: italic;
    color: #aaa;
    cursor: pointer;
}

.clicktouncollapse::before {
    /* squared plus &#x229E */
    content: "\229E";
    font-style: normal;
    font-size: 50%;
    padding-right: 10px;
    vertical-align: middle;
    color: #aaa;
}

.clicktocollapse {
    font-style: normal;
    cursor: pointer;
}

.clicktocollapse::before {
    /* squared minus &#8863 or &#x229F */
    content: "\229F ";
    font-style: normal;
    font-size: 50%;
    padding-right: 10px;
    vertical-align: middle;
    color: #aaa;
}

/* grid layout assignment */
header {
    grid-area: title;
}

#cluesbox {
    grid-area: clues;
}

#suspectsbox {
    grid-area: suspects;
}

#details {
    grid-area: details;
}

#infosbox {
    grid-area: infos;
}

/* mobile layout */
#wrapper {
    grid-template-columns: 100%;
    grid-template-areas:
    "title"
    "clues"
    "suspects"
    "details" 
    "infos";
    border-radius: 0px;
}

@media only screen and (min-width: 900px) {
    #wrapper {
        grid-template-columns: 30% auto;
        grid-template-rows: auto minmax(min-content, 10px) auto auto;
        grid-template-areas:
        "title title"
        "clues suspects"
        "details suspects"
        "infos infos";
        border-radius: 5px;
    }
    body {
        margin: 10px;
    }
}