html,
body {
    margin: 0 0 0 0;
    padding: 0 2rem;
    font-size: 20px;
}

section {
    /* margin-top: 4rem */
}

.content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    height: 100dvh;
    justify-content: center;
    margin: 0 auto;
    max-width: 900px
}

.hidden {
    display: none !important
}

.embedwrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0
}

.embedwrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 480px) {

    html,
    body {
        font-size: 16px
    }
}

@media screen and (max-width: 640px) {

    html,
    body {
        padding: 0 1rem
    }

    html .article-body h1,
    html .article-body p,
    html .article-body li,
    body .article-body h1,
    body .article-body p,
    body .article-body li {
        margin-right: 20px !important
    }

    .mobile-hide,
    .drum-machine__item-key {
        display: none !important
    }

    .noscroll {
        overflow: hidden;
        position: relative;
        height: 100vh
    }
}

@media screen and (min-width: 641px) {

    html,
    body {
        font-size: 18px
    }

    html h1,
    html p,
    body h1,
    body p {
        max-width: 700px
    }

    .mobile-only {
        display: none !important
    }
}

@media screen and (min-width: 1025px) {

    html,
    body {
        font-size: 20px
    }

    section {
        /* margin-top: 5rem */
    }
}

@media screen and (min-width: 1921px) {

    html,
    body {
        font-size: 20px
    }

    html .content,
    body .content {
        max-width: 1200px
    }
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* 
@font-face {
    font-family: 'Icons';
    src: url('/fonts/Icons.eot');
    src: url('/fonts/Icons.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Icons.woff') format('woff'),
         url('/fonts/Icons.ttf') format('truetype'),
         url('/fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;
} */
[class*='icon-']:before {
    display: inline-block;
    font-family: 'Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-OpenAI:before {
    content: '\0041';
}

.icon-LFE:before {
    content: '\0042';
}

.icon-Airtable:before {
    content: '\0043';
}

.icon-Messenger:before {
    content: '\0044';
}

.icon-Twitch:before {
    content: '\0045';
}

.jobicon {
    font-family: Icons;
    font-size: 14px;
}

.strikethrough2 {
    position: relative;
    display: inline-block;
}

.strikethrough2::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    /* Adjust this if needed to align the line better with your text */
    height: 2px;
    /* or the thickness you want */
    background: #46494f;
    /* or the color you want */
}

.oldjobs a:link {
    color: #46494f;
}

.oldjobs a:visited {
    color: #46494f;
}

#clock {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

@font-face {
    font-family: "Lars";
    src: url("../fonts/Lars-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Lars Mono";
    src: url("../fonts/Lars-Mono.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

h1,
h2,
.drum-machine__item-key,
h3,
h4,
h5,
h6,
p {
    padding: 0;
    margin: 0
}

h1 {
    font-family: Lars, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.6
}

h2,
.drum-machine__item-key {
    font-family: "Lars Mono", monospace;
    font-weight: 400;
    color: #9EA1A9;
    font-size: .89rem;
    line-height: 2;
    text-transform: uppercase
}

h3 {
    font-family: Lars, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.9
}

h4 {
    font-family: Lars, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    color: #2D2F32;
    font-size: .89rem;
    line-height: 2
}

h5 {
    font-family: Lars, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    color: #9EA1A9;
    font-size: .89rem;
    line-height: 2
}

@media screen and (max-width: 640px) {

    h2,
    .drum-machine__item-key {
        font-size: 1rem
    }
}

body,
p {
    font-family: Lars, Helvetica Neue, Arial, sans-serif;
    /* font-size: 1rem; */
    line-height: 1.8
}

p {
    margin-bottom: 0rem
}

del {
    color: #9EA1A9
}

sup,
sub {
    color: #9EA1A9;
    font-size: .89rem
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: #46494f
}

a:link,
a:visited {}

a:hover {
    cursor: pointer;
    text-decoration: underline
}

a:active {
    text-decoration: none;
    text-decoration: underline
}

.alt-text {
    color: #9EA1A9
}

.stripe {
    position: fixed;
    top: -500px;
    left: 0;
    width: 100vw;
    height: 504px;
    background-color: #EDEDEE;
    z-index: 99;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.nav {
    display: flex;
    justify-content: space-between;
    z-index: 99
}

.nav p {
    margin-bottom: 0px
}

.nav__left {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.nav__right {
    text-align: right;
    top: 2.5rem
}

.nav__icon-line {
    display: flex;
    flex-direction: row;
    align-items: center
}

.nav__icon-line svg {
    fill: #9EA1A9;
    margin-right: .45rem
}

.nav .social-links-experiment {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.nav .social-links {
    display: flex;
    flex-direction: row
}

.nav .social-links h4,
.nav .social-links p {
    margin-left: 1.1rem
}

.contact-overlay {
    background-color: #FBFBFB;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    overflow: scroll
}

.contact-overlay h1 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem
}

.contact-overlay__content {
    top: 0;
    padding: 0 2.2rem
}

.contact-overlay__header {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    margin-bottom: 2rem
}

.contact-overlay__detail {
    color: #9EA1A9
}

header {
    padding-top: 3rem
}

header .nav__right {
    align-self: center
}

footer {
    margin-top: 6rem
}

.heading {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem
}

.heading h2,
.heading .drum-machine__item-key {
    margin-top: 1rem;
    display: flex;
    align-items: center
}

.heading svg {
    fill: #2017E2
}

ul {
    list-style-type: square
}

li {
    margin-bottom: 1rem;
    max-width: 500px
}

.post-image img {
    max-width: 60%;
    margin-bottom: 2rem
}

.post-image-shadow img {
    -webkit-filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2))
}

.post-image-header img {
    max-width: 60%;
    margin-bottom: -2rem
}

@media screen and (max-width: 640px) {
    .post-image img {
        max-width: 100%
    }

    .post-image-header img {
        max-width: 100%
    }
}

.article-body p {
    margin-bottom: 1rem
}

.article-body h2,
.article-body .drum-machine__item-key {
    margin-bottom: .5rem
}

.post-list {
    margin-top: 4rem
}

.post-title {
    display: flex;
    align-items: center;
    color: #2017E2;
    margin-bottom: 0
}

.post-title svg {
    flex-shrink: 0;
    fill: #2017E2;
    margin: .2rem 0 0 .35rem
}

.post-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.card-wrapper {
    display: grid;
    grid-template-rows: repeat(1, auto);
    grid-gap: 30px
}

.card-wrapper a:hover {
    text-decoration: none
}

.card-wrapper a:hover img {
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
}

.card-wrapper a:hover .post-title {
    text-decoration: underline
}

.card-wrapper a:active img {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.post-card {
    display: flex;
    flex-direction: row
}

.post-card-image {
    display: flex
}

.post-card-image img {
    width: 8rem;
    height: 5rem;
    margin-right: 1rem;
    -o-object-fit: cover;
    object-fit: cover;
    transition: -webkit-transform .14s;
    transition: transform .14s;
    transition: transform .14s, -webkit-transform .14s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0)
}

.post-info-wrapper {
    display: flex;
    align-items: center
}

.post-metadata {
    color: #2D2F32;
    text-decoration: none;
    margin-top: -0.22rem;
    margin-bottom: 0
}

@media screen and (min-width: 641px) {
    .post-list--featured {
        margin-top: 8rem
    }

    .card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px
    }

    .post-card {
        display: flex;
        flex-direction: column
    }

    .post-card .post-card-image {
        margin-bottom: .5rem
    }

    .post-card .post-card-image img {
        width: 100%;
        height: 9rem
    }
}

.drum-machine__wrapper {
    display: grid;
    grid-template-columns: repeat(7, 32px);
    grid-gap: 56px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.drum-machine__section {
    /* margin-top: 9rem; */
    /* margin-bottom: 4rem todo */ 
}

@media screen and (max-width: 319px) {
    .drum-machine__wrapper {
        grid-template-columns: repeat(3, 64px) !important;
        grid-gap: 12px !important
    }

    .drum-machine__wrapper .drum-machine__item {
        width: 64px !important;
        height: 64px !important
    }
}

@media screen and (max-width: 640px) {
    .drum-machine__section {
        margin-top: 2rem
    }

    .drum-machine__wrapper {
        grid-gap: 16px;
        grid-template-columns: repeat(3, 72px)
    }

    .drum-machine__wrapper .drum-machine__item {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1);
        transform: translateZ(0);
        transition: background-color .07s, -webkit-transform .08s;
        transition: transform .08s, background-color .07s;
        transition: transform .08s, background-color .07s, -webkit-transform .08s;
        width: 72px;
        height: 72px;
        border: 1px solid #2017E2
    }

    .drum-machine__wrapper .drum-machine__item svg {
        margin-bottom: 0;
        transition: fill .06s
    }

    .drum-machine__wrapper .drum-machine__item:nth-of-type(4) {
        order: -3
    }

    .drum-machine__wrapper .drum-machine__item:nth-of-type(5) {
        order: -2
    }

    .drum-machine__wrapper .drum-machine__item:nth-of-type(6) {
        order: -1
    }

    .drum-machine__wrapper .drum-machine__item--touched {
        -webkit-transform: scale(.93);
        transform: scale(.93);
        background-color: #2017E2
    }

    .drum-machine__wrapper .drum-machine__item--touched svg {
        fill: #fff
    }

    .drum-intro {
        -webkit-animation: none;
        animation: none
    }
}

.drum-machine__item {
    width: 32px;
    display: flex;
    flex-grow: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: -webkit-transform .09s;
    transition: transform .09s;
    transition: transform .09s, -webkit-transform .09s
}

.drum-machine__item--cowbell .drum-machine__item-key {
    color: #DAA520
}

.drum-machine__item--cowbell svg {
    fill: #DAA520 !important
}

.drum-machine__item:hover {
    cursor: pointer
}

.drum-machine__item:active .drum-machine__item-key {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.drum-machine__item svg {
    fill: #2017E2;
    margin-bottom: 30px
}

.drum-machine__item-key {
    transition: background-color .07s, color .07s, -webkit-transform .07s;
    transition: transform .07s, background-color .07s, color .07s;
    transition: transform .07s, background-color .07s, color .07s, -webkit-transform .07s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(158, 161, 169, 0.11);
    border-radius: 1px
}

@-webkit-keyframes key-pressed {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        color: #fff
    }

    15% {
        background-color: #2017E2;
        border-radius: 0px
    }

    50% {
        background-color: #2017E2;
        -webkit-transform: scale(.85);
        transform: scale(.85);
        color: #fff;
        border-radius: 0px
    }

    100% {
        background-color: rgba(158, 161, 169, 0.11);
        -webkit-transform: scale(1);
        transform: scale(1);
        border-radius: 1px;
        box-shadow: none
    }
}

@keyframes key-pressed {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        color: #fff
    }

    15% {
        background-color: #2017E2;
        border-radius: 0px
    }

    50% {
        background-color: #2017E2;
        -webkit-transform: scale(.85);
        transform: scale(.85);
        color: #fff;
        border-radius: 0px
    }

    100% {
        background-color: rgba(158, 161, 169, 0.11);
        -webkit-transform: scale(1);
        transform: scale(1);
        border-radius: 1px;
        box-shadow: none
    }
}

@-webkit-keyframes key-pressed-hold {
    0% {
        background-color: rgba(158, 161, 169, 0.11);
        -webkit-transform: scale(1);
        transform: scale(1);
        border-radius: 1px;
        box-shadow: none
    }

    1% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        color: #fff
    }

    30% {
        background-color: #2017E2;
        border-radius: 0px
    }

    100% {
        background-color: #2017E2;
        -webkit-transform: scale(.85);
        transform: scale(.85);
        color: #fff;
        border-radius: 0px
    }
}

@keyframes key-pressed-hold {
    0% {
        background-color: rgba(158, 161, 169, 0.11);
        -webkit-transform: scale(1);
        transform: scale(1);
        border-radius: 1px;
        box-shadow: none
    }

    1% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        color: #fff
    }

    30% {
        background-color: #2017E2;
        border-radius: 0px
    }

    100% {
        background-color: #2017E2;
        -webkit-transform: scale(.85);
        transform: scale(.85);
        color: #fff;
        border-radius: 0px
    }
}

.key-pressed-hold {
    background-color: #2017E2;
    -webkit-transform: scale(.85);
    transform: scale(.85);
    color: #fff !important;
    border-radius: 0px
}

@-webkit-keyframes fade-in-out {
    0% {
        opacity: 0
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fade-in-out {
    0% {
        opacity: 0
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.drum-machine__item:nth-of-type(1) {
    -webkit-animation-delay: 350ms;
    animation-delay: 350ms
}

.drum-machine__item:nth-of-type(2) {
    -webkit-animation-delay: 422ms;
    animation-delay: 422ms
}

.drum-machine__item:nth-of-type(3) {
    -webkit-animation-delay: 494ms;
    animation-delay: 494ms
}

.drum-machine__item:nth-of-type(4) {
    -webkit-animation-delay: 566ms;
    animation-delay: 566ms
}

.drum-machine__item:nth-of-type(5) {
    -webkit-animation-delay: 638ms;
    animation-delay: 638ms
}

.drum-machine__item:nth-of-type(6) {
    -webkit-animation-delay: 710ms;
    animation-delay: 710ms
}

@-webkit-keyframes intro-fade-slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    24% {
        opacity: 1
    }

    47% {
        -webkit-transform: translateY(-0.5px);
        transform: translateY(-0.5px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes intro-fade-slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    24% {
        opacity: 1
    }

    47% {
        -webkit-transform: translateY(-0.5px);
        transform: translateY(-0.5px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes intro-fade-slide-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    19% {
        opacity: 1
    }

    34.1% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes intro-fade-slide-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    19% {
        opacity: 1
    }

    34.1% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes wiggle {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

    17% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    83% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px)
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes wiggle {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

    17% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    83% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px)
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

.drum-intro {
    -webkit-animation: intro-fade-slide .415s ease-out;
    animation: intro-fade-slide .415s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.drum-intro-2 {
    -webkit-animation: intro-fade-slide-2 .555s ease-out;
    animation: intro-fade-slide-2 .555s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.sound-played {
    -webkit-animation: key-pressed .14s ease;
    animation: key-pressed .14s ease;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none
}

.sound-played-glyph {
    -webkit-animation: wiggle .13s ease-out;
    animation: wiggle .13s ease-out;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none
}

body {
    background-color: #FBFBFB;
    color: #46494f
}