@font-face {
    font-family: ag;
    src: url(../fonts/AktivGroteskMedium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

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

*,
*:before,
*:after {
    -webkit-tap-highlight-color: transparent
}

html,
body {
    width: 100%;
    height: auto;
    margin: 0;
    overscroll-behavior: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: none
}

@media(min-width:1100px)and (pointer:fine) {

    html,
    body {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden
    }
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none
}

html {
    font-size: .5787037037vw;
    line-height: 100%
}

@media(max-width:1099px), (max-width:1366px)and (pointer:coarse) {
    html {
        font-size: 1vw
    }
}

@media(max-width:767px) {
    html {
        font-size: 2.5vw
    }
}

html.is-transitioning {
    pointer-events: none
}

body {
    font-size: 1.6rem;
    font-family: ag, sans-serif;
    font-weight: 500;
    letter-spacing: .016rem;
    line-height: 120%;
    color: #fff;
    background: #00031f url("../media/my-desk.png") center / cover no-repeat
}

.page {
    opacity: 1
}

html:not(.loaded) .page {
    visibility: hidden
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 20;
    pointer-events: none
}

.loader .loader-progress-wrapper {
    font-family: ag, sans-serif;
    overflow: hidden
}

.loader .loader-progress-wrapper .loader-progress-inner {
    display: block;
    font-weight: 500
}

.loader .loader-icon {
    position: relative;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 2.4rem
}

.loader .loader-icon svg {
    display: block;
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%
}

.loader .loader-icon .loader-icon-inner {
    transform-box: fill-box;
    transform-origin: center;
    animation: loader-logo-pulse 1.6s ease-in-out infinite alternate
}

.loader .loader-icon .loader-icon-inner path {
    fill: #fff
}

@keyframes loader-logo-pulse {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.06)
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader .loader-icon .loader-icon-inner {
        animation: none
    }
}

.overlay,
.canvas {
    top: 0;
    left: 0;
    position: fixed;
    pointer-events: none;
    touch-action: none
}

.overlay {
    width: 100%;
    height: 100%;
    z-index: 5;
    background: #000
}

.canvas {
    max-width: unset;
    z-index: 10;
    backface-visibility: hidden;
    opacity: 0
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 9999;
    padding: .8rem 1.6rem;
    background: #fff;
    color: #00031f;
    font-family: ag, sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: .4rem;
    text-decoration: underline
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    outline: 2px solid #00031F;
    outline-offset: 2px
}