body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #151515;
    font-family: monospace;
    font-size: 12px;
    color: #fff;
    overflow: hidden
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0
}

p {
    margin: 0;
    padding: 0
}

p.title {
    font-size: 16px;
    margin-bottom: 5px
}

p.desc {
    margin-bottom: 5px
}

p.year {
    margin-bottom: 15px
}

p.load-msg {
    font-size: 16px
}

p.padded {
    margin: 15px 0
}

span.cursor {
    font-family: BLOKKNeue-Regular;
    font-size: 20px
}

span.cursor-lrg {
    font-family: BLOKKNeue-Regular;
    font-size: 28px
}

span.cursor-sml {
    font-family: BLOKKNeue-Regular;
    font-size: 20px
}

a:active, a:focus {
    outline: 0;
    text-decoration: none
}

a:link, a:visited, a:active {
    color: #fff;
    text-decoration: none
}

a:hover {
    color: #444
}

a.work:hover {
    color: #86f8c4
}

a.play:hover {
    color: #fdb9cc
}

a.info:hover {
    color: #f1b2ac
}

a.connect:hover {
    color: #6bd4ff
}

a.nav-item:link, a.nav-item:visited, a.nav-item:active {
    display: inline
}

a.work-content:link, a.work-content:visited, a.work-content:active {
    color: #3de598
}

a.work-content:hover {
    color: #86f8c4
}

a.play-content:link, a.play-content:visited, a.play-content:active {
    color: #ff7ba1
}

a.play-content:hover {
    color: #fdb9cc
}

a.info-content:link, a.info-content:visited, a.info-content:active {
    color: #ff7f72
}

a.info-content:hover {
    color: #f1b2ac
}

a.connect-content:link, a.connect-content:visited, a.connect-content:active {
    color: #46b4e1
}

a.connect-content:hover {
    color: #6bd4ff
}

#content {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0c0c0c;
    z-index: 99;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

#content .stuff {
    margin: 30px 110px 30px 30px
}

#title, #full-title {
    font-size: 16px;
    margin-bottom: 5px;
    min-height: 21px
}

#copy, #full-copy {
    min-height: 16px
}

#logo {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 30px;
    z-index: 100;
    font-size: 18px;
    letter-spacing: 4px
}

#logo .title {
    display: inline
}

#logo .nav-container {
    position: relative;
    overflow: hidden;
    visibility: visible;
    font-size: 15px;
    letter-spacing: 2px;
    padding-bottom: 10px
}

#logo .nav-container .nav {
    position: relative;
    display: inline;
    top: -25px
}

#d404 {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

#d404 span {
    background-color: #0c0c0c;
    padding: 3px
}

.highlight {
    border-bottom: 1px dashed
}

.static-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    filter: alpha(opacity=1)
}

.msg {
    position: absolute;
    z-index: 99;
    font-size: 16px;
    pointer-events: none
}

.open {
    position: absolute;
    bottom: -50px;
    right: 30px;
    background-color: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 98
}

.close {
    position: absolute;
    top: -50px;
    right: 30px;
    background-color: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1
}

.close-mobile, .back-mobile {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 50px;
    height: 50px;
    overflow: hidden;
    z-index: 1
}

.next {
    position: absolute;
    top: -50px;
    right: 80px;
    background-color: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1
}

.prev {
    position: absolute;
    top: -50px;
    right: 130px;
    background-color: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1
}

.back {
    position: absolute;
    top: -50px;
    right: 180px;
    background-color: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1
}

.close .over, .back .over, .next .over, .prev .over, .open .over {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0
}

.close .over .bg, .back .over .bg, .next .over .bg, .prev .over .bg, .open .over .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.close img, .back img, .next img, .prev img, .open img {
    position: absolute;
    z-index: 1
}

.full-item-container {
    position: absolute;
    top: -100%;
    margin-top: 70px
}

.content-container {
    position: absolute;
    top: 0
}

.container {
    position: relative;
    margin: 0 30px;
    overflow: hidden;
    white-space: nowrap
}

.thumb-container {
    position: relative;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    height: 350px
}

.thumb-container-mobile {
    position: relative;
    margin: 0 0 10px;
    padding: 0
}

.thumb-overlay {
    display: inline;
    position: absolute;
    left: 0;
    top: -100%;
    z-index: 1;
    background-color: rgba(10, 10, 10, .9);
    width: 100%;
    height: 100%;
    pointer-events: none
}

.thumb-overlay-mobile {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background-color: rgba(10, 10, 10, .9);
    width: 100%;
    height: auto;
    pointer-events: none
}

.thumb-overlay-text {
    margin: 15px;
    position: relative;
    white-space: normal
}

.thumb-overlay-text-mobile {
    margin: 5px;
    position: relative;
    white-space: normal
}

.thumb {
    height: 350px;
    width: auto
}

.thumb-mobile {
    width: 100%;
    height: auto
}

.blur {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px)
}

.me {
    height: 33%;
    max-height: 400px;
    width: auto
}

.me-mobile {
    width: 100%;
    height: auto
}

.network-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-right: 10px;
    background-color: #46b4e1
}

.network-icon img {
    width: 30px;
    height: 30px;
    padding: 10px
}

.photo-container {
    position: relative;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0;
    overflow: hidden
}

.photo-container-mobile {
    position: relative;
    margin: 0 0 10px;
    padding: 0
}

.photo-mobile {
    width: 100%;
    height: auto
}

.tl {
    top: 30px;
    left: 30px
}

.tr {
    top: 30px;
    right: 30px
}

.bl {
    bottom: 30px;
    left: 30px
}

.br {
    bottom: 30px;
    right: 30px
}

.c {
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px
}

.animate {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.animate-01 {
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    transition: all .1s ease-out
}

.animate-015 {
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    transition: all .15s ease-out
}

.animate-02 {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.animate-025 {
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    transition: all .25s ease-out
}

.animate-03 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.animate-04 {
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    transition: all .4s ease-out
}

.animate-05 {
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    transition: all .5s ease-out
}

.halign {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.valign {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.disable {
    pointer-events: none
}

.copyright {
    position: absolute;
    bottom: -20px;
    right: 30px;
    z-index: 98;
    font-size: 10px;
    display: none
}

.preloader {
    position: absolute;
    height: 100%;
    background-color: #fff;
    z-index: 1
}

.preloader-bg {
    position: absolute;
    height: 100%;
    background-color: #232323;
    z-index: 0
}

.preloader-container {
    position: absolute;
    width: 100%;
    height: 30px;
    z-index: 99;
    overflow: hidden
}

.site-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #0c0c0c;
    text-align: center;
    cursor: pointer;
    z-index: 9999
}

.site-overlay div {
    font-size: 16px;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none
}

.yes, .no, .ok {
    display: inline
}

.list {
    text-align: left
}

.scrollbar {
    position: absolute;
    width: 180px;
    height: 20px;
    background-color: #fff;
    z-index: 100;
    left: 30px;
    top: 100%;
    cursor: ew-resize
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.typewriter h1 {
    color: #fff;
    font-family: monospace;
    font-size: 24px;
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #fff;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation: typing 3s steps(20, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    0% {
        border-color: transparent
    }

    50% {
        border-color: #fff
    }
}