@font-face {
    font-family: cmd;
    src: url("font/cmd.ttf");
}
@font-face {
    font-family: ubunto;
    src: url("./font/ubunto.ttf");
}
@font-face {
    font-family: pixelmania;
    src: url("font/Pixelmania.ttf");
}



body {
    background-color: rgb(74, 32, 170);
    color: white;
    text-align: center;
    font-family: cmd;
}

body.menu {
    background-color: black;
    color: white;
    font-family: cmd;
    background-image: url("./img/matrix.gif");
    /*background-image: url("https://media.giphy.com/media/5ba7Il0evF1LO/giphy.gif");
    */
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: top;
}

body.ingame {
    background-color: black;
    background-image: url("img/glitch.gif");
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    user-select: none;
}

body.dif {
    background-color: black;
    color: white;
    text-align: center;
    font-family: cmd;
    background-image: url("https://media.giphy.com/media/5ba7Il0evF1LO/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
}

.title {
    font-size: 100px;
    color: white;
}
.mainmenu{
    display: flexbox;
    align-content: center;
    align-items: center;
}
.root{
    align-self: center;
}
.mainlogo{
    width: 120px;
    height: 120px;
}
.github-logo{
    width: 40px;
    height: 40px;
}

h1 {
    display: block;
    font-size: 30px;
    cursor: default;
}

.footer-container-div{
    text-align: center;
}
.play-button{
    font-size: 90px;
    cursor: url("cursor/cursor_tutorialyt.cur"), auto;
}

h2 {
    color: white;
    cursor: default;
}

div.interface {
    font-family: ubunto;
    position: fixed;
    bottom: 0;
    background-color: black;
    width: 98%;
    height: 25%;
    border: 1px solid gainsboro;
    text-align: left;
}


.div-input-line{
    display: block ruby;
    /*On chrome*/
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
}
.p-input-line{
    font-size: 30px;
}

input.user {
    /*position: absolute;
    top: 38%;
    left: 20%;
    */
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: none;
    color: rgb(38, 220, 233);
    font-size: 30px;
    font-family: cmd;
    user-select: none;
}
input.user:focus{
    outline: none;
}

input.user:hover{
    cursor: default;
}

input.certo {
    position: absolute;
    top: 11%;
    left: 14%;
    height: 100px;
    width: 100px;
    background-color: transparent;
    border: 5px solid green;
    font-size: 35px;
    color: greenyellow;
    text-align: center;
    font-family: cmd;
}

input.errado {
    position: absolute;
    top: 11%;
    left: 25%;
    height: 100px;
    width: 100px;
    background-color: transparent;
    border: 5px solid green;
    font-size: 35px;
    color: red;
    text-align: center;
    font-family: cmd;
}


img.programmer {
    position: absolute;

    top: 2%;
    cursor: url("cursor/cursor_tutorialyt.cur"),
        auto;
    left: 28%;
    width: 600px;
    height: 720px;
    border: 5px solid green;
}

article>h1.select {
    color: yellow
}

input.programmer {
    position: absolute;
    left: 44%;
    top: 90%;
    width: 20%;
    background-color: transparent;
    border: none;
    color: yellow;
    font-size: 30px;
    font-family: cmd;
}


img.cmd {
    position: absolute;
    top: 75%;
    width: 2%;
    left: 1%;
}

h2.cmd {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    transform: revert;
    top: 73%;
    left: 5%;
}

.exit {
    position: absolute;
    top: 76%;
    left: 96%;
}

.exit:hover {
    background-color: gray;
}

p {
    font-size: 20px;
    color: rgb(0, 255, 0);
}
/*
p:nth-of-type(1) {
    position: absolute;
    top: 78%
}

p:nth-of-type(2) {
    position: absolute;
    top: 80%
}

p:nth-of-type(3) {
    position: absolute;
    top: 85%;
    font-size: 30px;
}
*/
.p-counter{
    position: absolute;
    top: 10%;
    left: 45%;
    font-size: 200px;
    color: red;
}


p:nth-of-type(5) {
    position: absolute;
    top: 10%;
    left: 45%;
    font-size: 20px;
    color: black;
}

body.almost_on {
    background-color: black;
    background-image: url("img/glitch.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:top;
    display: block;
    user-select: none;
}

input.game {
    color: rgb(0, 255, 0);
    background-color: transparent;
    position: absolute;
    left: 0%;
    border: none;
    font-size: 31px;
    font-family: cmd;
    user-select: none;
    
}
#div-rows{
    background-image: url("img/noise.gif");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 76%;
    top: 2%;
    border: 2px gainsboro solid;
    height: 68%;
    overflow: hidden;
}

input.game:focus{
    outline: none;
}

input.game:hover{
    cursor: default;
}

input.al_critic {
    color: rgb(247, 189, 0);
}

input.critical {
    color: rgb(204, 28, 28);
}
input#r1 {
    margin-top: 5%;
}
input#r2 {
    margin-top: 10%;
}

input#r3 {
    margin-top: 15%;
}

input#r4 {
    margin-top: 20%;
}

input#r5 {
    margin-top: 25%;
}

input#r6 {
    margin-top: 30%;
}

input#r7 {
    margin-top: 35%;
}

input#r8 {
    margin-top: 40%;
}

input#r9 {
    margin-top: 45%;
}

input#r10 {
    margin-top: 50%;
}

input#r11 {
    margin-top: 55%;
}

input#r12 {
    margin-top: 60%;
}

section>div#scorestreak {
    background-image: url("img/skull.gif");
    background-position: center;
    background-size: contain;
    background-color:black;
    background-repeat: no-repeat;
    position: absolute;
    border: 2px solid gainsboro;
    width: 20%;
    height: 68%;
    right: 2%;
    top: 2%;
    text-align: left;
    overflow: hidden;
}
/*
div#scorestreak>p:nth-of-type(1) {
    position: absolute;
    top: -8%;
    left: 12%;
    color: black;
}

div#scorestreak>img {
    width: 8%;
    position: absolute;
    top: -4%;
    left: 1%;
}
*/
div#scorestreak>p:nth-of-type(1) {
    top: 1%;
    color: gainsboro;
}

div#scorestreak>p:nth-of-type(2) {
    top: 10%;
    font-size: 20px;
    color: gainsboro;
}

div#scorestreak>p:nth-of-type(3) {
    color: gainsboro;
    top: 20%;
    left: 0%;
    font-size: 20px;
}
div#scorestreak>p:nth-of-type(4) {
    color: gainsboro;
    top: 30%;
    left: 0%;
    font-size: 20px;
}
/*
div#scorestreak>p:nth-of-type(5) {
    color: yellow;
    position: absolute;
    top: 80%;
    left: 0%;
    font-size: 52px;
}
*/
.div-score{
    position: absolute;
    bottom:0;
    height: 120px;
}
#score{
    color: rgb(0, 255, 0);
    font-size: 52px;
}

/*RICHTOFEN:true*/
body.richtofen {
background-color: black;
}

section>div#scorestreak.richtofen {
    background-image: url("img/935.png");
    border: 2px solid red;
    background-repeat: no-repeat;
    background-color: black;
}
#div-rows.richtofen{
    background-image: url("img/richtofen.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
}
div.interface.richtofen {
    border-top-color: red;
    background-color: rgba(0, 0, 0, .6);
}

p.richtofen {
    color: red
}

/*Hackerman:true*/
body.hackerman {
    background-image: url("img/hackermanback.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:top;
}

body.ls{
    background-image: none;
    background-color: black;
}

#div-rows.ls{
    background-image: url("img/lsback.gif");
    background-position:top;
    border: 2px solid greenyellow;
}
#div-rows.hackerman{
    background-image: url("img/hackermanback.gif");
    background-position:top;
    border: 2px solid blue;
}

section>div#scorestreak.hackerman {
    background-image: url("img/hackerman.gif");
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid blue;
}
section>div#scorestreak.ls {
    background-image: url("img/leo_otako.png");
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid greenyellow;
}
section>div#scorestreak.spaceman {
    background-image: url("https://media.giphy.com/media/FFjhwKduhObZe/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid rebeccapurple;
    border-top: 26px solid rebeccapurple;
}
p.ls {
    color: cyan;
}
body.spaceman{
    background-image: url("https://media.giphy.com/media/RUAMYH27wUhqg/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
}
div.interface.hackerman {
    border-top-color: white;
    background-color: blue;
}
div.interface.ls {
    background-color: green;
    opacity: 0.9;
    border: 2px solid greenyellow;
}
div.interface.spaceman {
    background-color: transparent;
    border-top-color: rebeccapurple;
}

p.hackerman {
    color: white
}
p.ls{
    color: greenyellow;
}
input.hackerman {
    color: white;
}
p.spaceman{
    color: greenyellow
}
p.pause {
    font-family: Pixelmania;
    font-size: 77px;
    position: absolute;
    top: 22%;
    left: 18%;
    color: yellow;
}

p.pause.richtofen {
    color: white;
}

input.richtofen {
    color: red;
}

p#score.richtofen {
    color: white;
}

section>div#scorestreak>p.disponivel {
    color: greenyellow;
}

#richtofen-overlay {
    background-color: red;
    opacity: 0.2;
    border: none;
    height: 10000px;
    visibility: visible;
    display: block;
}

video {
    width: 100%;
}



div#test.end {
    border: 2px solid rebeccapurple;
    border-top-color: rebeccapurple;
    border-top-style: solid;
    border-top-width: 2px;
    border-top: 34px rebeccapurple solid;
    background-image: url("https://media.giphy.com/media/l1Lc1Kn9hImgpx5Re/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 11%;
    min-height: 70%;
    min-width: 70%;
    right: 16%;
}

div#test.end>input {
    background-color: transparent;
    border: none;
    position: absolute;
    font-family: Impact,
        Haettenschweiler,
        'Arial Narrow Bold',
        sans-serif;
    font-size: 50px;
    color: greenyellow;
    top: 85%;
    left: 33%;
}
div#test.end>button{
    width: 5%;

    height: 6%;

    position: absolute;

    top: -6%;

    left: 94%;
    font-size: 30px;
    border: none;
    color: greenyellow;
    background-color: transparent;
}
div#test.end>button:hover{
    background-color: greenyellow;
    color: rebeccapurple;
}
div#test.end>p{
    color: greenyellow;

    position: absolute;

    top: -9%;

    left: 5%;
}
div#test.end>img {
    width: 3%;

    position: absolute;

    left: 1%;

    top: -6%;
}
body.end{
    background-image: url("https://media.giphy.com/media/bsOt2FWfbLx0A/giphy.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:top;
}
body.nuke{
    background-image: none;
    background-color: black;
    background-position:center;
}