fourth-wall.css

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
body {
    font-family: ntatabularnumbers, nta, sans-serif;
    background:black;
    margin:10px;
}
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    background-color: white;
}

.username {
    text-shadow: 0 1px 1px black
}

.status {
    padding: 10px;
}

.success {
    background-color:green;
}

.failure, .error {
    padding: 1rem;
    background-color: #BF1E2D;
    color: white;
    float: none;
    margin: 0;
}

.error a {
    color: white;
}

.error a:focus {
    color: #0b0c0c;
    outline: 3px solid transparent;
    background-color: #ffdd00;
    box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
    text-decoration: none;
}

.not-mergeable {
    background-color: #9FA098;
    font-size: 0.9em;
}
.pending {
    background-color: orange;
}

#pulls {
    list-style:none;
    padding:0;
    font-size:1.5em;
    text-shadow: 0 1px 1px #666;
    margin: 0;
}
#pulls li {
    background:#9FA098;
    padding: 10px;
    color:white;
    margin-bottom:10px;
    position:relative;
    min-height:100px;
}
#pulls li:after {
    display:block;
    content:'';
    clear:both;
}
#pulls li.failed {
    background: #B10E1E;
}
#pulls li.age-fresh.under-review {
  background: #0C56E8;
}
#pulls li.age-aging.under-review {
    background: #370CE8;
}
#pulls li.age-old.under-review {
    background: #7E0DFF;
}
#pulls li.age-aging {
    background: #f4ab38;
}
#pulls li.age-old {
    background: #F47738;
}
#pulls li.unimportant-user.unimportant-repo {
  display: none;
}

#pulls li.thumbsup {
    background: #5c9317;
}
#pulls li.changes-requested {
    background: #BF1E2D;
}
#pulls li h2 {
    margin:0;
}
#pulls li p {
    margin:0;
}
#pulls a {
  color: white;
  text-decoration: none;
}

#pulls li.wip {
  padding-left: 10px;
  padding-right: 10px;
  min-height: 50px;
  background: #505050;
}
#pulls li.wip .avatar,
#pulls li.wip .status,
#pulls li.wip .elapsed-time,
#pulls li.wip .comments {
  display: none;
}
#pulls li.wip h2,
#pulls li.wip p {
  display: inline-block;
  clear: none;
}
#pulls li.wip p {
  padding-top: 0.2em;
  padding-left: 0.5em;
}

#all-quiet {
    color: #b7b7b7;
    font-size:3em;
    margin:1em;
}

#no-connectivity {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(32, 32, 32, 0.85);
    color: #b7b7b7;
    font-size:3em;
    font-family: monospace;
}

.elapsed-time {
    line-height: 110%;
    font-size: 1.5em;
    font-weight: 700;
    white-space: nowrap;
}

h2 {
    line-height: 110%;
}

@media (min-width: 580px) {
    #pulls li {
        padding-right: 120px;
        padding-left: 100px;
    }

    .avatar {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .status {
        position: absolute;
        min-height: 80px;
        width: 100px;
        right: 10px;
        top: 10px;
    }

    p.comments {
        float: right;
        clear: right;
    }

    .elapsed-time {
        float: right;
    }

    h2 {
        float: left;
    }

    p {
        float: left;
        clear: left;
    }
}