html, body, p, ul, ol, li, h1, h2, h3, h4, form, div, hr, fieldset {
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Geneva9';
    font-style: normal;
    font-weight: normal;
    src: url('geneva-9.ttf') format('truetype');
}

@font-face {
    font-family: 'Chicago12';
    font-style: normal;
    font-weight: normal;
    src: url('chicago-12.ttf') format('truetype');
}

body, table, h1, h2, strong, b, small {
    font-size: 1em;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

html {
    font-family: 'Geneva9', sans-serif;
    background: black;
    font-size: 64px;
    line-height: 40px;
    word-spacing: -.33em;
}

h1, .channels li strong:first-of-type, .bubble strong, body:before {
    font-family: 'Chicago12', sans-serif;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 4px;
    word-spacing: initial;
}

body {
    padding: 2em 1.5em 1em;
}

body {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAP///6XZn90AAAAPSURBVAjXY+BngMAPEAgAEeAD/ReYei0AAAAASUVORK5CYII=') #808080;
    border-radius: 28px;
    height: 100vh;
    overflow: hidden;
}

body:before {
    content: 'File Edit View Fablab';
    display: block;
    background-color: white;
    border-bottom: 4px solid black;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0AQMAAAD/tomoAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///wAAAFXC034AAAA0SURBVBjTpdChAQAwDAJBNmD/LdmARtT2I/rmHAJpz2ErNqjrkp3CRn9u+6hHger96SV2AHaxgsnIW7KIAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: 56px 6px;
    padding: 2px 5em;
    word-spacing: 1em;
    position: absolute;
    top: 0;
    left: 0;
    height: 70px;
    line-height: 64px;
    width: 100%;
    border-radius: 28px 28px 0 0;
    box-sizing: border-box;
}

.cache, small, h1, p {
    display: none;
}

table+p {
    margin-top: 2em;
}

table {
    border-collapse: collapse;
    margin: 0 1em;
}

table, .bubble, .channels li {
    display: block;
    border: 0.1px solid black;
    border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAFgAgMAAACtS/+oAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURQAAAP///wAAAHPGg3EAAAABdFJOUwBA5thmAAABRUlEQVR42u3bUW6DMBCEYS65l5xTtmoEOKUE11Iiz/DzEhTpQ8K74F1bLBo6lsXG1cDxDXG4z7hHplaTtXWR1V5uvdc6nvWM5/RuvdfG/Ws8Z3fEj/gRP+JH/IjfjesX6lbcjG6wMbZxxB2Hw+FwOBwOh8PhcPTv9O/Eb4L4aXA8zZyy3ba5kem0XyDRqblCoFN7iTz3tO2W536209azQJf//OHcnbbsjnQ3qD9z3Wjf4eKIO/lJfuLe6NLnd+o63LQuvr8NX5+IX1/Kf27T13fj1+fj91cs68977G+qXv6ejqeJ06lTgtOLcdFWC7TFj5XTXrjpdyO1TSftAHk5HSb/w/numrrVxKku3CP4av53cqpLVzJ26fHrzmvtz7aX63svPb2LvVzXvOLs+uoCY9dV1/31XbKLqxPX26/M68L7oyXbfQF6eyaOUwP8mgAAAABJRU5ErkJggg==');
    border-image-slice: 216 128 128 84;
    border-image-width: 216px 128px 128px 84px;
    position: relative;
    background-color: white;
    color: black;
    padding: 160px 88px 76px 32px;
    margin-bottom: 30px;
    position: relative;
}

.bubble, .channels li {
    position: relative;
    z-index: 300;
    margin: 0 20px 40px;
    float: left;
}

.bubble, .channels li {
    max-width: 45%;
    text-align: center;
    border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABcAgMAAAD/mRiJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURQAAAP///wAAAHPGg3EAAAABdFJOUwBA5thmAAAAUUlEQVRIx2NYhQswMFBfKhQ7AMqNShEtBQnNUKSQDQUjWkjB7A1FYdFGCmY1khS6C6kmNeqvUX+NVH/RsdwYLbHJl8Jdj1JfajQMKZZioJ8UACHqX9knvVWFAAAAAElFTkSuQmCC');
    border-image-slice: 76 12 8 84;
    border-image-width: 76px 12px 8px 84px;
    padding: 82px 40px 30px;
    line-height: 48px;
}

.channels li strong {
    text-decoration: underline;
}

h1, .channels li strong:first-of-type, .bubble strong {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    text-align: center;
    color: black;
    background: white;
    text-decoration: none;
    overflow: hidden;
    height: 48px;
    line-height: 56px;
    height: 56px;
    overflow: hidden;
    padding: 0 .3em 0 .5em;
}

.channels li strong:first-of-type {
    max-width: 19.7em;
    overflow: hidden;
    display: inline-block;
}

.bubble strong {
    padding: 0 .2em 0 .3em;
}

h1 {
    top: 138px;
    z-index: 200;
}

p, table:before, .bubble:after {
    display: block;
    margin-bottom: 1em;
    background: white;
    color: black;
    padding: 16px 30px 9px;
    position: absolute;
    word-spacing: .2em;
}

p {
    top: calc(1em + 12px);
    left: calc(2.6em + 9px);
    right: calc(2.6em + 57px);
    z-index: 50;
}

table:before {
    content: '4 items 197K in disk 200K available';
    top: 76px;
    left: 9px;
    right: 57px;
}

table tr {
    display: block;
    float: left;
    text-align: center;
    margin: 30px 40px;
    min-width: 180px;
}

table tr td {
    display: none;
}

table tr td:nth-child(2),
table tr td:nth-child(3) {
    display: block;
}

table tr:before, li:before,  .bubble:before {
    content: '';
    display: block;
    width: 128px;
    height: 128px;
    background-image: url('data:image/png;base64,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');
    margin: 0 auto 25px;
}

li:before, .bubble:before {
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon-1:before { background-position: -8px -8px; }
.icon-2:before { background-position: -152px -8px; }
.icon-3:before { background-position: -296px -8px; }
.icon-4:before { background-position: -440px -8px; }
.icon-5:before { background-position: -8px -152px; }
.icon-6:before { background-position: -152px -152px; }
.icon-7:before { background-position: -296px -152px; }
.icon-8:before { background-position: -440px -152px; }
.icon-9:before { background-position: -8px -296px; }
.icon-10:before { background-position: -152px -296px; }
.icon-11:before { background-position: -296px -296px; }
.icon-12:before { background-position: -440px -296px; }
.icon-13:before { background-position: -8px -440px; }
.icon-14:before { background-position: -152px -440px; }
.icon-15:before { background-position: -296px -440px; }
.icon-16:before { background-position: -440px -440px; }

p.bottom, h1.kom, h1.mtm, img {
    display: none;
}


strike {
    text-decoration: none;
    position: relative;
}

strike:after {
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 4px;
    background: black;
}