styledGameboy.css

#gameboy
{
    margin: auto;
    background-color: #d22e35;
    width: 466px;
    height: 710px;
    border-radius: 15px;
    border-bottom-right-radius: 100px;
    border: 1px solid #000;
    
    box-shadow: 10px 10px 20px 0px #000;
}

#logo
{
    width: 466px;
    padding-top: 10px;
}

#detalhedovisor1
{
    margin: auto;
    background-color: #ee696e;
    width: 356px;
    height: 270px;
    border: 1px solid #000;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    
    box-shadow: 2px 2px 8px 1px #991a20,
                -2px -2px 8px 1px #991a20;
}

#detalhedovisor2
{
    margin: auto;
    /*background-color: #fb9394;*/
    background-color: #ee696e;
    width: 356px;
    height: 52px;
    border: 1px solid #000;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 15px;
    margin-top: 5px;
    
    box-shadow: 2px 2px 8px 1px #991a20,
                -2px -2px 8px 1px #991a20;
}

#visor1 /* isso aqui vai ser o visual, o de baixo é o texto*/
{
    width: 240px;
    height: 240px;

    margin: auto;
    margin-top: 15px;
    background-color: #927801;
    border: 2px solid #544f23;
    box-shadow: inset 0px 3px 8px 0px #000;

}


#visor2
{
    width: 240px;
    height: 48px;

    margin: auto;

    background-color: #927801;
    border: 2px solid #544f23;
    box-shadow: inset 0px 3px 8px 0px #000;

}

#visor1
{
    font-size: 200pt;
    text-align: center;
    /*font-weight: bold;*/
    font-family:fantasy;
    line-height: 255px;
    color: #426545;
    

}

#visor2
{
    font-size: 33pt;
    text-align: center;
    /*font-weight: bold;*/
    font-family:fantasy;

    color: #426545;
}


#gameplay
{
    margin: auto;
    width: 426px;
    height: 225px;
    /*background-color: #fff;*/
    margin-top: 20px;
}

#reset /*caixa do botao de reset*/
{
    /*background-color: #000;*/
    width: 91px;
    height: 225px;
    float: left;
}

#play /*caixa do botao de jogar*/
{
    /*background-color: #000;*/
    width: 91px;
    height: 225px;
    float: left;
}

#resetar
{
    height: 80px;
    width: 80px;
    border-radius: 80px;
    background-color: #a90000;
    border: 1px solid #000;
    margin: auto;
    box-shadow: 1px 1px 3px 1px #000;
    
    position: relative;
    top: 50px;
    
}

#jogar
{
    height: 80px;
    width: 80px;
    border-radius: 80px;
    background-color: #a90000;
    border: 1px solid #000;
    margin: auto;
    box-shadow: 1px 1px 3px 1px #000;
    
    position: relative;
    top: 50px;
    left: 10px;
    
}

#jogar
{
    background-image: url(img/button.png);
    background-repeat: no-repeat;
    background-position: 20px;
}
#resetar 
{
    background-image: url(img/button2-2.png);
    background-repeat: no-repeat;
    background-position: 14px;
}




#jogar:active, #resetar:active
{
    box-shadow: 0px 0px 0px 0px #000;
}



/*@-webkit-keyframes botaoapertando
{
  0%   {box-shadow: 1px 1px 3px 1px #000;}
  100% {}
}*/

button:focus {outline:0;}

/* explicando acima /\ Pra tirar a linha que fica no Chrome, Azul, quando clica no botão, e a animação ali não faz sentido, porque não precisa de uma animação prum botão sendo apertado, só colocar o active normal e tirar a box-shadow ^-^" */

#meiuca
{
    /*background-color: #000;*/
    width: 244px;
    margin: auto;
    height: 225px;
    
    float: left;
}


#numero
{
    /*background-color: #91121d;*/
    /*background-color: #b82830;*/
    background-color: #ab262c;
    /*background-color: #9e2329;*/
    height: 65px;
}

#tentativas
{
    background-color: #0f0;
    height: 35px;
    width: 55px;
    margin: auto;
    
    background-color: #927801;
    border: 2px solid #544f23;
    box-shadow: inset 0px 3px 8px 0px #000;
    
    font-size: 22pt;
    text-align: center;
    font-weight: bold;
    font-family:fantasy;

    color: #426545;
}

#botoesnum
{
    /*background-color: #00f;*/
    height: 101px;
    padding: 10px;
    margin-top: 13px;
}

#chute
{
    font-size: 41pt;
    width: 244px;
    /*margin: auto;*/
    background-color: transparent;
    border: 0px;
    text-align: center;
    font-family: monospace;
    
    outline: 0;
    
    box-shadow: inset 0px 0px 8px 1px #000,
                inset 0px -1px 0px 0px #fff;
    
}

.btnnum
{
    height: 40px;
    width: 40px;
    margin-right: 1.60px;
    margin-bottom: 6px;
    font-family: monospace;
    font-size: 14pt;
    background-color: #ee696e;
    
    box-shadow: 0px 0px 5px 0.5px #000;
    
    border-radius: 15px;
}

#voltar{position: absolute;top: 19%;left: 36.45%;} /* to manjando dos position rsrsrs */
#volta{background-color: #000;} #volt {color: #fff;} /* tá, vamo arrumar o position pra porcentagem, nois. */

#eu{color: #a90000;}

body
{
    
    background-image: url(img/bluelightning.png);
    background-repeat: repeat;
    background-color: #0ff;     

} 

/* lembrei de por o logo da minha empresous vlw s2
dica do mettal rsrsrs / o cinza sagrado, mas acho q vou deixar ciano */

#resposta
{
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 200px;
    /*display: none;*/
}

span
{
    position: relative;
    left: 70px;
    bottom: 227px;
    
    width: 240px;
    height: 240px;
    
    color: #426545;

    
}