@font-face {
    font-family: "Fracktif";
    src: url(/fonts/Fracktif-Light.otf);
}

@font-face {
    font-family: "Gamour";
    src: url(/fonts/Gamour\ Regular.ttf);
}

[touch-action="none"] {
    -ms-touch-action: none;
    touch-action: none;
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    cursor: default;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
    width: 100%;
    height: 20000%;
    margin: 0;
    padding: 0;
    /* Disable text selection: */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                            supported by Chrome, Edge, Opera and Firefox */
    background-color: black;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#canvasContainer {
    width: 100%;
    height: 100%;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.blur {
    -webkit-transition: -webkit-filter 1s ease-in;
    -moz-transition: -moz-filter 1s ease-in;
    -o-transition: -o-filter 1s ease-in;
    -ms-transition: -ms-filter 1s ease-in;
    transition: 1s filter ease-in, 1s -webkit-filter ease-in;
    filter:blur(80px);
    -o-filter:blur(80px);
    -ms-filter:blur(80px);
    -moz-filter:blur(80px);
    -webkit-filter:blur(80px);
}

.no-blur {
    -webkit-transition: -webkit-filter 1s ease-out;
    -moz-transition: -moz-filter 1s ease-out;
    -o-transition: -o-filter 1s ease-out;
    -ms-transition: -ms-filter 1s ease-out;
    transition: 1s filter ease-out, 1s -webkit-filter ease-out;
    filter:blur(0px);
    -o-filter:blur(0px);
    -ms-filter:blur(0px);
    -moz-filter:blur(0px);
    -webkit-filter:blur(0px);
}

.brightness-fade-out {
    -webkit-transition: -webkit-filter 2s ease-in;
    -moz-transition: -moz-filter 2s ease-in;
    -o-transition: -o-filter 2s ease-in;
    -ms-transition: -ms-filter 2s ease-in;
    transition: 2s filter ease-in, 2s -webkit-filter ease-in;
    filter:brightness(0);
    -o-filter:brightness(0);
    -ms-filter:brightness(0);
    -moz-filter:brightness(0);
    -webkit-filter:brightness(0);
}

.brightness-fade-in {
    -webkit-transition: -webkit-filter 1s ease-out;
    -moz-transition: -moz-filter 1s ease-out;
    -o-transition: -o-filter 1s ease-out;
    -ms-transition: -ms-filter 1s ease-out;
    transition: 1s filter ease-out, 1s -webkit-filter ease-out;
    filter:brightness(1);
    -o-filter:brightness(1);
    -ms-filter:brightness(1);
    -moz-filter:brightness(1);
    -webkit-filter:brightness(1);
}

#holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#landing {
    mix-blend-mode: overlay;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    font-family: Fracktif;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#landing > div:first-child {
    display: flex;
    align-items: flex-end;
}

#landing h3 {
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    color: rgba(255, 255, 255, 0.75);
    mix-blend-mode: overlay;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.7), 0px 0px 4px #FFFFFF;
    isolation: isolate;
}

.enter {
    mix-blend-mode: overlay;
    display: block;
    /* font-size: 1.5rem; */
    font-style: normal;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 5vh;
    border-radius: 100vw;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 4px #ffffff);
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 4px #ffffff);
}

.logo {
    opacity: 1.0;
    mix-blend-mode: hard-light;
    align-self: center;
    -webkit-filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 2px #fff);
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 2px #fff);
}

#interface {
    position: fixed;
    top: 0;
    left: 0;
    font: 1.5rem "Fracktif", sans-serif;
    color: white;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.7), 0px 0px 4px #FFFFFF;
    text-transform: uppercase;
}

/* #otium-button {
    margin: 4px 0;
} */

#otium-button img {
    display: inline-block;
    height: 100%;
}

#otium-button > a {
    height: 100%;
    display: inline-block;
}

#info-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#info-button-close {
    max-height: 20px;
}

#player-or-info {
    position: relative;
    grid-column: span 2;
    grid-row: 2;
    overflow-y: hidden;
    scrollbar-width: none;
    max-height: 100%;
    height: 100%;
    display: flex;
}

#player {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#bc-link {
    line-height: 3rem;
    padding-bottom: 1rem;
}

.credits {
    font-size: 1rem;
}

h1, h2 {
    font-family: "Gamour";
    line-height: 82%;
    font-weight: normal;
}

a {
    color: white;
}

.icon {
    object-fit: contain;
    height: 1.5rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.glow {
    -webkit-filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 2px #ffffff);
    filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 2px #ffffff);
}

.hide {
    pointer-events: none;
    touch-action: none;
    -ms-touch-action: none;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    opacity: 0;
}

.show {
    pointer-events: auto;
    touch-action: auto;
    -ms-touch-action: auto;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 1;
}

.no-background {
    -webkit-transition: background-color 1s ease-in;
    -moz-transition: background-color 1s ease-in;
    -o-transition: background-color 1s ease-in;
    -ms-transition: background-color 1s ease-in;
    transition: background-color 1s ease-in;
    background-color: rgba(0, 0, 0, 0.0);
}

.background {
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    -ms-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
    background-color: rgba(0, 0,  0, 0.3);
}