@font-face {
    font-family: 'Press Start 2P';
    src: url('PressStart2P-Regular.eot');
    src: url('PressStart2P-Regular.eot?#iefix') format('embedded-opentype'),
        url('PressStart2P-Regular.woff2') format('woff2'),
        url('PressStart2P-Regular.woff') format('woff'),
        url('PressStart2P-Regular.svg#PressStart2P-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', arial;
    scroll-behavior: smooth;
    box-sizing: content-box;
    border: none;
}

.box.out .box.in .wrap .box {
    float: left;
    width: 100%;
}

html {
    background-color: black;
    color: white;
    overflow: hidden;
    scroll-behavior: auto;
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
}

html * {

    -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 */

}

body {
    /*overflow: hidden;*/
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background-color: red;
}

a,
a:active,
a:hover {
    color: red;
}

.box.out {
    perspective: 40vw;
    perspective-origin: 100vw -50vh;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-color: #000;
}

.box.in {
    transform: skewX(-10deg) skewY(25deg) scaleY(2) rotateX(-10deg) rotateY(5deg) rotateZ(-15deg) translateX(10vw) translateY(0) translateZ(7vw);
    transform-style: preserve-3d;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -25px;
    height: 0;
    padding: 0;
    border: 0;
    width: 75%;
    font-size: 3vw;
    /*transition: transform 1s ease-in-out;*/
    line-height: 5vw;
    color: red;
    display: block;
}

.box.in * {
    transform-style: preserve-3d;
    text-align: center;
    /*overflow: hidden;*/
    -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 */

}

.box.in h2 {
    font-size: 0.75em;
    line-height: 2vw;
    opacity: .6;
    color: rgba(255, 0, 0, .6);
    padding-top: 1em;
}

.box.in h1 {
    font-size: 6vw;
    line-height: 6vw;
    text-align: justify;
}

.wrap {
    display: block;
    float: left;
    width: 100%;
    clear: both;
    height: auto;
}

.dashed {
    margin-top: 1em;
    border-top: .1em dashed rgba(255, 0, 0, .6);
    padding-top: 1em;
}

p {
    margin: 0;
}

.retrocursor {
    margin: 0 -5px;
    display: inline-block;
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 1s;
}

.inputText,
.inputedText {
    width: calc(100% - 2em);
    float: left;
    clear: none;
    word-break: break-all;
    line-height: 1em;
    color: white;
    text-align: left;
    padding: 1.5em 1em;
    background: rgba(255, 255, 255, .2);
    margin-bottom: 1em;
}

.end {
    width: 10vw;
    height: 150vh;
    display: block;
    position: absolute;
    right: 0;
    background-color: rgba(255, 255, 255, .2);
    z-index: 10;
}

.positionelement {
    transform: rotateZ(90deg) translate(-10px);
    width: 100vh;
    position: fixed;
    top: -15px;
    left: calc(100vw - 40px);
    background: rgba(255, 255, 255, .2);
    transform-origin: left;
    border: 0;
    height: 50px;
}

.submitit {
    font-size: 1em;
    background: red;
    border: none;
    margin: 0 auto;
    display: table;
    clear: both;
    text-transform: uppercase;
    opacity: .6;
    color: #000;
}

.infovalue {
    display: none;
    background-color: red;
    width: auto;
    height: auto;
    position: fixed;
    z-index: 10;
    padding: .5em;
    color: #000;

}

#pushstart,
#emailvalue {
    position: fixed;
    text-transform: uppercase;
    /*cursor: crosshair;*/
    text-align: center;
}
#pushstart {
    left: calc(50vw - 125px);
    top: calc(50vh - 35px);
    font-size: 3em;
    width: 250px;
    height: 70px;
    line-height: 70px;
    background: #FFF;
    color: black;
}
#emailvalue {
    font-size: 1em;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background-color: red;
    top: 0;
    left: calc(100vw - 100px);
    cursor: pointer;
    z-index: 2;
}

#emailvalue a {
    color: #000;
    text-decoration: none;
}
.dame table {
    width:100vw;
    height:100vh;
}

#backgroundInterface::before {
    opacity: .75;
}
#backgroundInterface, #pushstart{

    cursor: url(Protoss.cur), pointer;


}
#warningGMS {
    z-index: 3;
    position: absolute;
    background-color: red;
    display: block;
    bottom: 0;
    animation: hideItOut 10s forwards;
}
#warningGMS a {
    color: #FFF;
}
@keyframes hideItOut{
    0%   {opacity: 1;}
    99%  {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes blink {
    0% {
        color: #fff;
    }

    50% {
        color: #fff;
    }

    51% {
        color: transparent;
    }

    100% {
        color: transparent;
    }
}

@keyframes blinkred {
    0% {
        color: red;
        background-color: transparent;
    }

    50% {
        color: red;
        background-color: transparent
    }

    51% {
        color: #000;
        background-color: red;
    }

    100% {
        color: #000;
        background-color: red;
    }
}

@keyframes blinkred-reverse {
    0% {
        color: #000;
        background-color: red;
    }

    50% {
        color: #000;
        background-color: red;
    }

    51% {
        color: red;
        background-color: transparent;
    }

    100% {
        color: red;
        background-color: transparent
    }
}

.box.out .box.in .wrap.info .box,
.box.out .box.in .wrap.new,
.box.out .box.in .wrap.board .inputedText,
.box.out .box.in .wrap.new .submitit {
    display: none;
}

.dowhatlabel {
    margin: 0;
    display: inline;
}

.dowhatlabel:not(.disabled):hover {
    cursor: pointer;
    animation: 1s blinkred infinite alternate 0s;
    opacity: 1;
}

.submitit:not(.disabled):hover {
    cursor: pointer;
    animation: 1s blinkred-reverse infinite alternate 0s;
    opacity: 1;
}

.submitit.disabled {
    opacity: .3;
    background: #000;
    color: red;
    pointer-events: none;
}

#dowhatmessage:checked~.box.out .box.in .wrap.new,
#dowhatmessage:checked~.box.out .box.in .wrap.new .submitit.message,
#dowhatmessage:checked~.box.out .box.in .wrap.info .box.message,
#dowhatmessage:checked~.box.out .box.in .wrap.board .inputedText,
#dowhatlog:checked~.box.out .box.in .wrap.info .box.log,
#dowhatabout:checked~.box.out .box.in .wrap.info .box.about {
    display: block;
    opacity: 1;
}

.wrap.legal {
    font-size: .75em;
    line-height: 1em;
    color: rgba(255, 0, 0, .6);
}

#dowhatmessage:not(:checked)~.box.out .box.in .dowhatlabel.message,
#dowhatlog:not(:checked)~.box.out .box.in .dowhatlabel.log,
#dowhatabout:not(:checked)~.box.out .box.in .dowhatlabel.about,
#dowhatPost1:not(:checked)~.box.out .box.in .dowhatlabel.post.post1,
#dowhatPost1:not(:checked)~.box.out .box.in .dowhatlabel.post.post2,
#dowhatPost1:not(:checked)~.box.out .box.in .dowhatlabel.post.post3 {
    background-color: #000;
    color: red;
}

#dowhatmessage:checked~.box.out .box.in .dowhatlabel.message,
#dowhatlog:checked~.box.out .box.in .dowhatlabel.log,
#dowhatabout:checked~.box.out .box.in .dowhatlabel.about {
    /*background-color: red;
    color: #000;*/
    opacity: 1;
}

#dowhatmessage:checked~.box.out .box.in .dowhatlabel.message:not(.disabled):hover,
#dowhatlog:checked~.box.out .box.in .dowhatlabel.log:not(.disabled):hover,
#dowhatabout:checked~.box.out .box.in .dowhatlabel.about:not(.disabled):hover {
    animation: 1s blinkred-reverse infinite alternate 0s;
}

.dowhat {
    display: none;
}


.box.about h3,
.box.about p {
    text-align: justify;
}

.box.about p {
    color: rgba(255, 0, 0, .6)
}

.post {
    display: none;
    float: left;
    width: inherit;
}

.post.active:nth-child(2) {
    display: block;
}

.submitit.dowhatlabel.postItem {
    background-color: #000;
    color: red;
}

.box.out .box.in .post-title,
.box.out .box.in .post-text,
.box.out .box.in .post-date,
.box.out .box.in .post-multimedia {
    padding: 0;
    margin: 0;
    line-height: 1em;
    text-align: justify;
}
.box .inspiration{
    width:100%;
    max-width: 100%;
}

#postItem1:checked~.postItem1 {
    background-color: red;
    color: #000;
    opacity: 1;
}

.box.out .box.in .post-text.leftalign {
    text-align: left;
}
.box.out .box.in .post.active .post-multimedia {
    display: block;
    float: left;
    width: calc(50% - 1em);
    padding: 0 .5em;
    visibility: visible;
}
.box.out .box.in .post-title {
    font-size: .75em;
    padding: 0 1em 0 1em;
}

.box.out .box.in .post-text,
.box.out .box.in .post-date {
    font-size: 0.5em;
    padding: 1em 1.5em 0 1.5em;
    color: rgba(255, 0, 0, .6);
    line-height: 1.5em;

}

.box.out .box.in .post-text b {
    color: rgba(255, 0, 0, 1);
}

.box.out .box.in .post-date {
    text-align: center;
}

.navigation .submitit {
    display: inline;
}

.box.out .box.in .post.magenta .post-title,
.box.out .box.in .post.magenta .post-text a {
    color: rgba(255, 0, 255, 1);
}

.box.out .box.in .post.magenta .post-text,
.box.out .box.in .post.magenta .post-date {
    color: rgba(255, 0, 255, .6);
}

.box.out .box.in .post.yellow .post-title,
.box.out .box.in .post.yellow .post-text a {
    color: rgba(255, 255, 0, 1);
}

.box.out .box.in .post.yellow .post-text,
.box.out .box.in .post.yellow .post-date {
    color: rgba(255, 255, 0, .6);
}

.box.out .box.in .post.cyan .post-title,
.box.out .box.in .post.cyan .post-text a {
    color: rgba(0, 255, 255, 1);
}

.box.out .box.in .post.cyan .post-text,
.box.out .box.in .post.cyan .post-date {
    color: rgba(0, 255, 255, .6);
}


@media screen and (max-width: 450px) {
    .box.out .box.in .post-title {
        font-size: 2em;
        padding-top: .5em;
    }

    .box.out .box.in .post-text,
    .box.out .box.in .post-date {
        font-size: 1em;
    }

    .box.out .box.in .post.active .post-multimedia {
        width: calc(100% - 1em);
        margin: .5em 0 0;
    }
}

.footer .submitit {
    display: inline;
}

.border {
    animation: colors 10s infinite;
    background-color: red;
    color: black;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    display: none;
    z-index: 300;
    width: inherit;
    height: inherit;
    opacity: .5;
}

.border:before,
.border:after {
    background-image: repeating-linear-gradient(transparent,
            transparent 3vh,
            red 1vh,
            black 4vh);
    content: "";
    height: 200%;
    left: 0;
    position: absolute;
    top: -100%;
    width: 100vw;
}

.border:before {
    animation: downwards 1.1s ease-in infinite;
}

.border:after {
    animation: downwards 1.5s ease-out infinite reverse;
}



@keyframes colors {

    0%,
    20% {
        filter: hue-rotate(0);
        transform: scale(2);
    }

    20.01%,
    100% {
        filter: hue-rotate(0);
        transform: scale(1);
    }
}

@keyframes downwards {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(0, 100vh) scale(1.5);
    }
}


#radioshowname.glitch {
    animation: glitch-skew .5s infinite linear alternate-reverse;
    background-color: #000;
    z-index: 100;
    height: 100vh;
    font-weight: 100;
    text-align: end;
    margin-top: 15vh;
}

#radioshowname.glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: 2px;
    text-shadow: -2px 0 #ff00c1 !important;
    /* Creates an initial clip for our glitch. This works in
    a typical top,right,bottom,left fashion and creates a mask
    to only show a certain part of the glitch at a time. */
    clip: rect(44px, 450px, 56px, 0);
    /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
    with an alternating animation to keep things fresh. */
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

#radioshowname.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1 !important;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

/* Creates an animation with 20 steaps. For each step, it calculates 
  a percentage for the specific step. It then generates a random clip
  box to be used for the random glitch effect. Also adds a very subtle
  skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
    0% {
        clip: rect(65px, 9999px, 4px, 0);
        transform: skew(0.02deg);
    }

    5% {
        clip: rect(52px, 9999px, 67px, 0);
        transform: skew(0.22deg);
        font-size: 6vw;

    }

    10% {
        clip: rect(85px, 9999px, 74px, 0);
        transform: skew(0.02deg);
        font-size: 10vw;
    }

    15% {
        clip: rect(88px, 9999px, 59px, 0);
        transform: skew(0.99deg);
        font-size: 8vw;
    }

    20% {
        clip: rect(13px, 9999px, 39px, 0);
        transform: skew(0.95deg);
    }

    25% {
        clip: rect(99px, 9999px, 27px, 0);
        transform: skew(0.52deg);
        font-size: 3vw;

    }

    30% {
        clip: rect(57px, 9999px, 68px, 0);
        transform: skew(0.5deg);
        font-size: 4vw;
    }

    35% {
        clip: rect(21px, 9999px, 10px, 0);
        transform: skew(0.1deg);
        font-size: 10vw;
    }

    40% {
        clip: rect(59px, 9999px, 90px, 0);
        transform: skew(0.75deg);
    }

    45% {
        clip: rect(58px, 9999px, 88px, 0);
        transform: skew(0.22deg);
        font-size: 16vw;
    }

    50% {
        clip: rect(34px, 9999px, 43px, 0);
        transform: skew(0.58deg);
        font-size: 1vw;
    }

    55% {
        clip: rect(3px, 9999px, 53px, 0);
        transform: skew(0.76deg);
        font-size: 3vw;
    }

    60% {
        clip: rect(95px, 9999px, 49px, 0);
        transform: skew(0.39deg);
        font-size: 22vw;
    }

    65% {
        clip: rect(14px, 9999px, 93px, 0);
        transform: skew(0.75deg);
        font-size: 25vw;
    }

    70% {
        clip: rect(84px, 9999px, 78px, 0);
        transform: skew(0.49deg);
        font-size: 3vw;
    }

    75% {
        clip: rect(39px, 9999px, 34px, 0);
        transform: skew(0.63deg);
        font-size: 5vw;
    }

    80% {
        clip: rect(48px, 9999px, 32px, 0);
        transform: skew(0.83deg);
        font-size: 1vw;
    }

    85% {
        clip: rect(64px, 9999px, 94px, 0);
        transform: skew(0.49deg);
    }

    90% {
        clip: rect(11px, 9999px, 21px, 0);
        transform: skew(0.21deg);
        font-size: 5vw;
    }

    95% {
        clip: rect(14px, 9999px, 98px, 0);
        transform: skew(0.93deg);
    }

    100% {
        clip: rect(94px, 9999px, 85px, 0);
        transform: skew(0.8deg);
        font-size: 15vw;
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(22px, 9999px, 77px, 0);
        transform: skew(0.5deg);
        font-size: 3vw;

    }

    5% {
        clip: rect(61px, 9999px, 73px, 0);
        transform: skew(0.98deg);
        font-size: 1vw;

    }

    10% {
        clip: rect(5px, 9999px, 64px, 0);
        transform: skew(0.31deg);
        font-size: 8vw;

    }

    15% {
        clip: rect(13px, 9999px, 54px, 0);
        transform: skew(0.74deg);
        font-size: 15vw;

    }

    20% {
        clip: rect(82px, 9999px, 75px, 0);
        transform: skew(0.4deg);
        font-size: 50vw;

    }

    25% {
        clip: rect(11px, 9999px, 28px, 0);
        transform: skew(0.09deg);
        font-size: 9vw;

    }

    30% {
        clip: rect(3px, 9999px, 99px, 0);
        transform: skew(0.64deg);
        font-size: 15vw;
    }

    35% {
        clip: rect(93px, 9999px, 42px, 0);
        transform: skew(0.64deg);
        font-size: 10vw;

    }

    40% {
        clip: rect(54px, 9999px, 60px, 0);
        transform: skew(0.31deg);
    }

    45% {
        clip: rect(26px, 9999px, 34px, 0);
        transform: skew(0.39deg);
        font-size: 8vw;

    }

    50% {
        clip: rect(36px, 9999px, 77px, 0);
        transform: skew(0.55deg);
        font-size: 8vw;

    }

    55% {
        clip: rect(58px, 9999px, 7px, 0);
        transform: skew(0.82deg);
    }

    60% {
        clip: rect(75px, 9999px, 85px, 0);
        transform: skew(0.93deg);
        font-size: 10vw;

    }

    65% {
        clip: rect(78px, 9999px, 21px, 0);
        transform: skew(0.51deg);
        font-size: 7vw;

    }

    70% {
        clip: rect(93px, 9999px, 39px, 0);
        transform: skew(0.05deg);
    }

    75% {
        clip: rect(52px, 9999px, 19px, 0);
        transform: skew(0.17deg);    font-size: 35vw;

    }

    80% {
        clip: rect(47px, 9999px, 96px, 0);
        transform: skew(0.06deg);
        font-size: 10vw;

    }

    85% {
        clip: rect(80px, 9999px, 67px, 0);
        transform: skew(0.92deg);
        font-size: 4vw;
    }

    90% {
        clip: rect(74px, 9999px, 86px, 0);
        transform: skew(0.39deg);
        font-size: 15vw;

    }

    95% {
        clip: rect(42px, 9999px, 75px, 0);
        transform: skew(0.06deg);
        font-size: 3vw;

    }

    100% {
        clip: rect(11px, 9999px, 66px, 0);
        transform: skew(0.18deg);
        font-size: 9vw;
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    10% {
        transform: skew(5deg);
        font-size: 5vw;

    }

    20% {
        transform: skew(-1deg);
    }

    30% {
        transform: skew(1deg);
    }

    40% {
        transform: skew(0deg);    font-size: 15vw;

    }

    50% {
        transform: skew(4deg);
    }

    60% {
        transform: skew(0deg);    font-size: 6vw;

    }

    70% {
        transform: skew(5deg);
    }

    80% {
        transform: skew(2deg);
    }

    90% {
        transform: skew(3deg);
    }

    100% {
        transform: skew(-3deg);
    }
}