s1llyw0rdz/assets/style.css

body {
    max-width: 940px;
    margin: 0 auto;
    padding: 1em;
    font-family: Verdana;
    background-color: azure;
    color: midnightblue;
}

.faces {
    margin-bottom: 1em;
    max-width: 500px;
}

.flash {
    background-color: lightgreen;
    padding: 0.5em 1em;
    color: darkgreen;
    animation: 500ms ease-out 3s 1 forwards fadeout;
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
        font-size: inherit;
        height: inherit;
    }
    100% {
        font-size: 0;
        height: 0;
    }
}

.cols {
    display: grid;
}

a {
    font-weight: bold;
}

.status-username {
    margin-bottom: .5em;
}

.status-content {
    margin: 0 1em 0.5em 1em;
}

.status nav {
    font-size: 0.8em;
    margin-left: 1em;
}

.status {
    margin-bottom: 1em;
}

dt {
    font-weight: bold;
}

dd {
    margin-bottom: 1em;
}

.edit-status {
    width: 100%; box-sizing: border-box; height: 100px;
}

.tools {
    list-style-position: inside;
    padding-left: 0;
}

@media (min-width: 650px) {
    .cols {
        grid-template-columns: 1fr 2fr;
        grid-gap: 2em;
    }
}

.radio { display: inline-block }
.field { margin-bottom: 1rem; max-width: 500px; }
.field > label { margin-bottom: .25rem; }
.field > * { display: block; width: 100%; box-sizing: border-box; }

.info {
    margin-bottom: 1em;
}