@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');

:root{
    --neon: hsl(305, 100%, 50%);
    --fondo: hsl(0, 0%, 0%);
    --neonClaro: hsla(305, 100%, 50%, 0.247);
    --neonVerde: hsl(98, 100%, 50%);
}

body{
    margin: 0;
    background-color: var(--fondo);        
}

.container{    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: row;
}

.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.calculadora{    
    display: grid;
    grid-template-columns: repeat(4, 4.5em);
    grid-template-rows: 160px repeat(5, 4.5em);
    padding: 1.5em;
    border-radius: 3em;
    color: var(--neon);   
}

.col-2{
    grid-column: 1 / span 2;    
}

.neon{
    box-shadow: inset 0 0 0.6em var(--neon), 0 0 0.5em var(--neon), 0 0 0.3em hsla(0, 0%, 100%, 0.664);
    border: var(--neon) 0.2rem solid;    
    filter: blur(0.02em);  
    text-shadow: 0 0 2em currentColor, 0 0 0.25em hsla(323, 100%, 50%, 0.74);   
}

.neonVerde{
    border: var(--neonVerde) 0.2rem solid;  
    box-shadow: inset 0 0 0.6em var(--neonVerde), 0 0 0.5em var(--neonVerde), 0 0 0.3em hsla(0, 0%, 100%, 0.664);
    color: var(--neonVerde);
}

button{
    font-size: 2rem;
    cursor: pointer;
    text-decoration: nore;
    color: var(--neon);
    margin: 5px;
    padding: 0;
    border-radius: 2rem;                
    background: var(--fondo);               
}


button:focus,
button:hover{         
    animation-name: animacionNeon;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

button:active{
    box-shadow: inset 0 0 2em var(--neon), 0 0 2em var(--neon), 0 0 0.5em hsla(0, 0%, 100%, 0.664);
}

.neonVerde:hover{         
    animation-name: animacionNeonVerde;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

.neonVerde:active{
    box-shadow: inset 0 0 2em var(--neonVerde), 0 0 2em var(--neonVerde), 0 0 0.5em hsla(0, 0%, 100%, 0.664);
}

.firma{
    margin-top: 0.5em;
    font-family: 'ZCOOL QingKe HuangYou', cursive;
    font-size: 1.5rem;
    text-align: center;
    filter: blur(0.02em);
    text-shadow: 0 0 2em currentColor, 0 0 0.25em hsla(323, 100%, 50%, 0.74);
    text-decoration: none;
    color: var(--neon);
}

a{
    text-decoration: none;
    color: var(--neonVerde);
}

.display{
    grid-column: 1 / -1; 
    padding: 16px; 
    display: flex; 
    margin: 10px 10px 20px; 
    flex-direction: column; 
    align-items: flex-end; 
    background-color: var(--neonClaro); 
    border-radius: 1.5em; 
    text-align: right; 
    justify-content: space-between; 
    word-break: break-all; 
    color: var(--neon); 
    text-shadow: 0 0 2em currentColor, 0 0 0.25em hsla(0, 0%, 100%, 0.74); 
    font-family: 'ZCOOL QingKe HuangYou', cursive;   
}

#valorActual{
    font-size: 1.5em;
}

#valorAnterior{
    font-size: 2.5em;
}


@keyframes animacionNeon{
    to{
        color: var(--fondo);
        text-shadow: 0 0 2em currentColor, 0 0 0.25em hsla(0, 0%, 100%, 0.74);
        box-shadow: inset 0 0 2em var(--neon), 0 0 2em var(--neon), 0 0 0.5em hsla(0, 0%, 100%, 0.76);
        text-shadow: inset 0 0 3em var(--neon), 0 0 3em currentColor, 0 0 1em hsla(0, 0%, 100%, 0.74);
    }
}
    
@keyframes animacionNeonVerde{
    to{
        color: var(--fondo);
        text-shadow: 0 0 2em var(--neonVerde);
        box-shadow: inset 0 0 2em var(--neonVerde), 0 0 2em var(--neonVerde);
        text-shadow: inset 0 0 3em var(--neonVerde), 0 0 3em var(--neonVerde);
    }
}