@font-face {
    font-family: "IBMPlexMono";
    src: url("IBMPlexMono-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

html {
    font-size: 16px;
    padding: 0;
    margin: 0;
}

body {
    background: #0a0a0a;
    font-weight: 300;
    font-family: "IBMPlexMono";
    color: #9a9ea6;
    padding: 0;
    margin: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Edge */
}

.content {
    position: relative;
    width: 100vw;
    height: 100dvh;
}

.title {
    display: block;
    width: 62vw;
    font-size: calc(62vw / 11);
    white-space: nowrap;
    left: 8vw;
    bottom: 8vh;
    position: absolute;
}

h1 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: inherit;
    display: inline;
    position: relative;
}

.lc {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    width: 1ch;
    background: #0a0a0a;
}

.l1  { left: 0ch;  animation: typing 0s linear 2.28s forwards; }
.l2  { left: 1ch;  animation: typing 0s linear 2.36s forwards; }
.l3  { left: 2ch;  animation: typing 0s linear 2.84s forwards; }
.l4  { left: 3ch;  animation: typing 0s linear 3.42s forwards; }
.l5  { left: 4ch;  animation: typing 0s linear 3.80s forwards; }
.l6  { left: 5ch;  animation: typing 0s linear 4.08s forwards; }
.l7  { left: 6ch;  animation: typing 0s linear 4.38s forwards; }
.l8  { left: 7ch;  animation: typing 0s linear 4.68s forwards; }
.l9  { left: 8ch;  animation: typing 0s linear 4.78s forwards; }
.l10 { left: 9ch;  animation: typing 0s linear 5.14s forwards; }
.l11 { left: 10ch; animation: typing 0s linear 5.34s forwards; }
.l12 { left: 11ch; animation: typing 0s linear 5.52s forwards; }
.l13 { left: 12ch; animation: typing 0s linear 5.74s forwards; }
.l14 { left: 13ch; animation: typing 0s linear 5.80s forwards; }
.l15 { left: 14ch; animation: typing 0s linear 6.16s forwards; }
.l16 { left: 15ch; animation: typing 0s linear 6.46s forwards; }

.cursor {
    position: absolute;
    display: block;
    bottom: 0;
    width: 1ch;
    height: 0.1ch;
    background: #3644ff;
    left: 0;
    transform: translateX(0);
    animation: 
        cursor .95s step-end infinite,
        moveToChar1 0s linear 2.28s forwards,
        moveToChar2 0s linear 2.36s forwards,
        moveToChar3 0s linear 2.84s forwards,
        moveToChar4 0s linear 3.42s forwards,
        moveToChar5 0s linear 3.80s forwards,
        moveToChar6 0s linear 4.08s forwards,
        moveToChar7 0s linear 4.38s forwards,
        moveToChar8 0s linear 4.68s forwards,
        moveToChar9 0s linear 4.78s forwards,
        moveToChar10 0s linear 5.14s forwards,
        moveToChar11 0s linear 5.34s forwards,
        moveToChar12 0s linear 5.52s forwards,
        moveToChar13 0s linear 5.74s forwards,
        moveToChar14 0s linear 5.80s forwards,
        moveToChar15 0s linear 6.16s forwards,
        moveToChar16 0s linear 6.46s forwards;
}
  
@keyframes typing {
    from { opacity: 1 }
    to { opacity: 0 }
}
  
@keyframes cursor {
    from, to { opacity: 0 }
    50% { opacity: 1; }
}

@keyframes moveToChar1 {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes moveToChar2 {
    from { transform: translateX(100%); }
    to { transform: translateX(200%); }
}

@keyframes moveToChar3 {
    from { transform: translateX(200%); }
    to { transform: translateX(300%); }
}

@keyframes moveToChar4 {
    from { transform: translateX(300%); }
    to { transform: translateX(400%); }
}

@keyframes moveToChar5 {
    from { transform: translateX(400%); }
    to { transform: translateX(500%); }
}

@keyframes moveToChar6 {
    from { transform: translateX(500%); }
    to { transform: translateX(600%); }
}

@keyframes moveToChar7 {
    from { transform: translateX(600%); }
    to { transform: translateX(700%); }
}

@keyframes moveToChar8 {
    from { transform: translateX(700%); }
    to { transform: translateX(800%); }
}

@keyframes moveToChar9 {
    from { transform: translateX(800%); }
    to { transform: translateX(900%); }
}

@keyframes moveToChar10 {
    from { transform: translateX(900%); }
    to { transform: translateX(1000%); }
}

@keyframes moveToChar11 {
    from { transform: translateX(1000%); }
    to { transform: translateX(1100%); }
}

@keyframes moveToChar12 {
    from { transform: translateX(1100%); }
    to { transform: translateX(1200%); }
}

@keyframes moveToChar13 {
    from { transform: translateX(1200%); }
    to { transform: translateX(1300%); }
}

@keyframes moveToChar14 {
    from { transform: translateX(1300%); }
    to { transform: translateX(1400%); }
}

@keyframes moveToChar15 {
    from { transform: translateX(1400%); }
    to { transform: translateX(1500%); }
}

@keyframes moveToChar16 {
    from { transform: translateX(1500%); }
    to { transform: translateX(1600%); }
}

@media print {
    body {
        background: transparent;
        color: #000;
    }

    .content {
        width: auto;
        height: auto;
    }

    .title {
        left: 20pt;
        bottom: auto;
        top: 40pt;
        font-size: 30pt;
    }

    .lc {
        display: none;
    }

    .cursor {
        left: auto;
        right: -20pt;
        animation: none;
        height: 3pt;
        width: 20pt;
    }
}

body.images {
    background: #fff;
    color: #0a0a0a;
    padding: 8vh 8vw;
    overflow: auto;
}

.images h1 {
    font-size: calc(62vw / 11);
    color: #3644ff;
    display: inline-block;
    margin-bottom: 1ch;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 1.3em;
    row-gap: 1.3em;
}

.image-wrap
img {
    max-width: 100%;
}

.breadcrumbs,
.breadcrumbs:visited {
    text-decoration: none;
    color: #9a9ea6;
}

.breadcrumbs:hover,
.breadcrumbs:visited:hover {
    text-decoration: none;
    color: #0a0a0a;
}

.home .breadcrumbs:hover,
.home .breadcrumbs:visited:hover {
    color: #fff;
}

.no-js-warning {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    background: #d74242;
    color: #fff;
    z-index: 100;
    top: 0;
    left: 0;
    padding: 30px 50px;
}