*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
body{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    min-height:100vh;
    background:rgb(36,0,0);
    background:linear-gradient(90deg, rgba(36,0,0,1) 0%, rgba(172,0,0,1) 35%, rgba(33,140,0,1) 100%);
    font-family:arial;
    position:relative;
    text-align:center
}
header{
    color:white;
    letter-spacing:10px;
    font-size:22px;
    padding:10px 5px
}
@media only screen and (min-width: 768px){
    header{
        font-size:28px
    }
}
@media only screen and (min-width: 1024px){
    header{
        font-size:32px;
        padding:10px
    }
    header h1{
        font-weight:400
    }
}
.main{
    background:white;
    width:250px;
    padding-bottom:10px;
    margin:0 auto auto;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.cabeza{
    width:250px;
    margin:auto auto 0
}
@media only screen and (min-width: 400px){
    .cabeza,.main{
        width:310px
    }
}
@media only screen and (min-width: 1024px){
    .cabeza,.main{
        width:410px
    }
}
.box{
    background:#496400;
    width:65px;
    height:65px;
    float:left;
    margin:10px 0 0 10px
}
@media only screen and (min-width: 1024px){
    .box{
        width:70px;
        height:70px
    }
}
.box.play:hover{
    opacity:0.7;
    cursor:pointer
}
.box img{
    width:100%;
    display:block;
    border:solid 1px transparent
}
.box .outlined{
    border:solid 1px #34495e;
    background:#64FD6E;
    opacity:0.7
}
#state{
    background:#496400;
    background-size:250%;
    width:230px;
    line-height:25px;
    float:left;
    margin:10px 0 0 10px;
    padding:0 10px;
    color:white;
    font-size:16px
}
@media only screen and (min-width: 400px){
    #state{
        width:290px
    }
}
@media only screen and (min-width: 1024px){
    #state{
        width:390px;
        line-height:35px
    }
}
#time{
    float:left
}
#time::after{
    content:" segundos"
}
#score{
    float:right
}
#score::after{
    content:" puntos"
}
footer p{
    color:white;
    padding:5px;
    font-size:14px;
    letter-spacing:1px
}
footer p a{
    color:#ddd;
    text-decoration:none
}
footer p a:hover{
    color:white;
    text-decoration:underline
}
.hidden{
    display:none !important
}
.show{
    display:block
}
#pre{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(0, 0, 0, 0.5);
    text-align:center
}
#themes{
    margin:auto;
    padding:20px;
    width:300px;
    background:white;
    color:#496400
}
#themes p{
    margin-top:10px;
    padding:10px 20px;
    border:solid 1px;
    background:white;
    color:#496400;
    cursor:pointer;
    font-size:16px
}
#themes p:hover{
    background:#496400;
    background-size:250%;
    color:white
}
#post h2,#pre h2{
    font-size:24px;
    font-weight:normal;
    letter-spacing:1px;
    margin-bottom:20px
}
#post{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(0, 0, 0, 0.5);
    display:flex
}
#post > div{
    width:300px;
    padding:20px 0 40px;
    background:white;
    color:#496400
}
#post #final,#post p:first-child{
    font-weight:bold;
    letter-spacing:2px;
    margin:auto;
    padding:10px 20px
}
#post #again{
    color:#496400;
    text-decoration:none;
    margin:auto;
    padding:10px 20px;
    width:160px;
    border:solid 1px
}
#post #again:hover{
    background:#496400;
    background-size:250%;
    color:white;
    cursor:pointer
}