/* locking down the site */
a {
    -webkit-user-drag: none;
}

body {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    font-size:18px;
    -webkit-user-drag: none;
}

img {
    -webkit-user-drag: none;
}

.game-title{
    padding-top:200px;
    font-size: 10vh;
}



html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}
body {
    padding:0;
    margin: 0;
    overflow: hidden;
    background: #000;
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%) translateY(-50%);
}




.glitch {
    text-align: center;
    position: relative;
    animation: shake 0.4s infinite;
    animation-direction: alternate;
}
.glitch_fixed {
    text-align: center;
    position: relative;
    color: #EEEEEE;
    animation: color 0.4s infinite;
    animation-direction: alternate;
}
.glitch_opacity {
    text-align: center;
    position: relative;
    color: #EEEEEE;
    /*position: absolute;*/
    top: 0;
    left: -2px;
    animation: show 0.2s infinite;
    animation-direction: alternate;
}
.glitch_opacity span {
    color: #F802F8;
}
@keyframes show {
    50% {
        opacity: 0;
        text-shadow: 2px 2px #AAE90E;
    }
}
@keyframes color {
    50% {
        color: #b1b1b1;
    }
}
@keyframes shake {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(2px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}
.span, .glitch span:first-child, .glitch span:nth-child(2),
.glitch span:nth-child(3), .glitch span:nth-child(4),
.glitch span:nth-child(5), .glitch span:nth-child(6) {
    color: #0301FA;
    animation: glitch 0.4s linear infinite;
    animation-direction: alternate;
    position: absolute;
    transform: translateY(0px);
}
.glitch span {
    position: absolute;
}
.glitch span:first-child {
    left: 0;
}
.glitch span:nth-child(2) {
    left: 25px;
}
.glitch span:nth-child(3) {
    left: 50px;
}
.glitch span:nth-child(4) {
    left: 75px;
}
.glitch span:nth-child(5) {
    left: 100px;
}
.glitch span:nth-child(6) {
    left: 125px;
}
@keyframes glitch {
    0% {
        transform: translateY(-10%);
        transform: translateX(-5%);
    }
    50% {
        transform: translateY(-10%);
        transform: translateX(-10%);
        color: #01FA01;
    }
    100% {
        transform: translateY(10%);
        transform: translateX(5%);
        color: #FA0103;
        clip: rect(40px, 0px, 40px, 0px);
    }
}
/*.rmbg-wrapper > .rmbg {*/
/*    !*height: 200%;*!*/
/*    !*width: 200%;*!*/
/*    !*vertical-align: bottom;*!*/
/*    position: relative;*/
/*}*/

.rmbg {
    display: block;
    height: auto;
    width: 100%;
    margin:auto;
    /*width: 100%;*/
    /*display: flex;*/
    /*margin: auto;*/
}
.rmbg-wrapper {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
    margin: auto;
    top: 0;
}

.selection{
    height:0px;
    width:0px;
    position: absolute;
    top:0px;
    left:0px;
    background-color: #000;
    opacity: 0%;
}

.navleft, .navright , .navcenter {
    position: fixed;
    font-size: 60px;
    font-weight: 20;
    top: 85%;
}
.navleft {
    left: 5%;
}
.navright {
    right: 5%;
}
.navcenter {
    left: 50%;
    top: 90%;
}

.btn2.navleft:before,
.btn2.navright:before,
.btn2.navleft:after,
.btn2.navright:after {
    border: none;
}


.btn2 {
    text-decoration: none;
    color: #fff;
    /*padding: 8px 16px;*/
    /*margin: 0 10px;*/
    /*border: 1px solid #fff;*/
    letter-spacing: 1px;
    border: none;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin: 0 25px;
    z-index: 2;
}
.btn2:hover {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
    border-width: 1px 0 1px 0;
    color:white;
    text-decoration: none;
    text-decoration-color: white;
}
.btn2:before,
.btn2:after {
    width: 15px;
    border: 1px solid #fff;
    content: "";
    height: 40px;
    top: -1px;
}
.btn2:before {
    left: -16px;
    border-right: none;
}
.btn2:after {
    right: -16px;
    border-left: none;
}
.btn2:hover,
.btn2:hover:before,
.btn2:hover:after {
    transition: all .1s;
    /*background: rgba(255,255,255,0.2);*/
    border-color: #ffffff;
}

/*CTR Screen*/
/*@import "compass/css3";*/
body {
    background: #111;
    color: white;
}
#switch {
    display: none;
}
.switch-label {
    display: inline-block;
    cursor: pointer;
    background: #fff;
    color: #111;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 0 2px #666;
}
.switch-label::after {
    content: "on";
}
.switch-label::before {
    content: " ";
    display: inline-block;
    border-radius: 100%;
    width: 10px;
    height: 10px;
    background: #003321;
    margin-right: 10px;
    border: 1px solid #111;
}
.switch-label:active {
    box-shadow: none;
    transform: translate3d(0, 2px, 0);
}
#switch:checked + .switch-label::before {
    background: #2f5;
}
#switch:checked + .switch-label::after {
    content: "off";
}
@keyframes flicker {
    0% {
        opacity: 535128636;
    }
    5% {
        opacity: 1085501393;
    }
    10% {
        opacity: 712145056;
    }
    15% {
        opacity: 369979274;
    }
    20% {
        opacity: 622943620;
    }
    25% {
        opacity: 1937204623;
    }
    30% {
        opacity: 1334624017;
    }
    35% {
        opacity: 991598566;
    }
    40% {
        opacity: 726161316;
    }
    45% {
        opacity: 918829493;
    }
    50% {
        opacity: 199138288;
    }
    55% {
        opacity: 1006494975;
    }
    60% {
        opacity: 1971473327;
    }
    65% {
        opacity: 2067086645;
    }
    70% {
        opacity: 546465801;
    }
    75% {
        opacity: 1317491290;
    }
    80% {
        opacity: 692204715;
    }
    85% {
        opacity: 1197469634;
    }
    90% {
        opacity: 1449897681;
    }
    95% {
        opacity: 168499130;
    }
    100% {
        opacity: 1238219018;
    }
}
.full-height {
    height: 100%;
}

.container {
    padding:0;
    margin: 0;
    background: #121010;
    position: relative;
    overflow: hidden;
}
.container::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}
.container::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}
#switch:checked ~ .container::after {
    animation: flicker 0.15s infinite;
}
@keyframes turn-on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 1;
    }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 0;
    }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(0) brightness(0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }
    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
        filter: contrast(1) brightness(1.2) saturate(1.3);
        opacity: 1;
    }
}
@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}
.screen {
    width: 100%;
    height: 100%;
    border: none;
}
#switch ~ .container > .screen {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}
#switch:checked ~ .container > .screen {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
}
@keyframes overlay-anim {
    0% {
        visibility: hidden;
    }
    20% {
        visibility: hidden;
    }
    21% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
}
.overlay {
    color: #0f0;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 60px;
    visibility: hidden;
    pointer-events: none;
}
#switch:checked ~ .container .overlay {
    animation: overlay-anim 5s linear;
    animation-fill-mode: forwards;
}

/* text CSS */

/*.var-highlight {*/
/*    color: #c0ad60;*/
/*}*/

/*.string-highlight {*/
/*    color: rgba(253, 149, 90, 0.8);*/
/*}*/

.text {
    display: inline-block;
    position: fixed;
    top: 10%;
    left: 5%;
    z-index: 3;
}

#typewriter {
    font-size: 1em;
    margin: 0;
    font-family: "Courier New", monospace;
    z-index: 3;
}
#typewriter:after {
    content: "|";
    -webkit-animation: blink 500ms linear infinite alternate;
          animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}