/* Messaggio PHP */

.pixel-error{
    color: var(--bs-red);
    text-align: center;
    margin-top: 2rem;
    font-size: 0.7rem;
}

/* Regole globali */

body.pixel-body{
    background-color: #1b263b;
    background-image:
        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px);
    background-size:32px 32px;
    color:var(--bs-light);
    font-family:"Press Start 2P", cursive;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
}

/* Logo */ 

@keyframes floating{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
}

.pixel-logo{
    display:block;
    width:64px;
    margin:0 auto 2rem;
    image-rendering: pixelated;
    animation:floating 3s ease-in-out infinite;
}


/* Card */

.pixel-card{
    background:#39414d;
    border:4px solid var(--bs-light);
    outline:4px solid var(--bs-dark);
    outline-offset:-8px;
    padding:2.5rem;
}

/* Testo */ 

@keyframes pixelGlow{
    0%,100%{
        text-shadow:
        0 0 0 var(--bs-light);
    }
    50%{
        text-shadow:
        0 0 8px var(--bs-success),
        0 0 16px var(--bs-success);
    }

}

.pixel-title{
    text-align:center;
    font-size:1.4rem;
    line-height:1.6;
    margin-bottom:2rem;
    animation:pixelGlow 2s infinite;
}

.pixel-subtitle,
.pixel-warning{
    text-align:center;
    font-size:.70rem;
}

.pixel-subtitle{
    color:var(--bs-secondary);
}

.pixel-warning{
    color:var(--bs-red);
    text-shadow:
        -1px 0 var(--bs-light),
         1px 0 var(--bs-light),
         0 -1px var(--bs-light),
         0  1px var(--bs-light);
    margin-bottom:2.5rem;
}

/* Label */

.form-label{
    font-size:.70rem;
    margin-bottom:.8rem;
}

/* Input */

.pixel-input{
    border:3px solid var(--bs-light);
    border-radius:0;
    height:54px;
    background:var(--bs-dark);
    color:var(--bs-light);
    font-size:.75rem;
    padding:.9rem;
}

.pixel-input:focus{
    border-color:var(--bs-success);
    box-shadow:none;
    background:var(--bs-dark);
    color:var(--bs-light);
}

/* Bottone */

.pixel-button{
    border-radius:0;
    border:3px solid var(--bs-light);
    background:var(--bs-success);
    color:var(--bs-light);
    font-size:.75rem;
    padding:1rem;
    transition:.08s;
}

.pixel-button:hover{
    background:var(--bs-teal);
    box-shadow:4px 4px 0 var(--bs-black);
}

.pixel-button:active{
    transform:translate(3px,3px);
    box-shadow:none;
}

/* Footer */

.pixel-footer{
    text-align: center;
    font-size: .55rem;
    color: var(--bs-secondary);
}