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

*{
    color: #429BF1;
    font-family: 'Coda', cursive;


}

#valor-anterior{
    color: #cf88b6;
}

#valor-actual{
    color: #cf88b6;
}

body{
    margin: 0;
    opacity: 1;
    /*background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #a3d9e0 40px ), repeating-linear-gradient( #C1E6E655, #C1E6E6 );*/
    /*background: linear-gradient(153deg, rgba(180,222,235,0.6372688477951636) 1%, rgba(0,239,255,0.6258890469416785) 2%, rgba(76,232,247,1) 32%, rgba(180,235,233,0.9957325746799431) 57%);*/
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgb(10, 10, 87) 59%, rgba(1,6,8,1) 100%);
    
}

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

.calculadora{
    display: grid;
    grid-template-columns: repeat(4, 75px);
    grid-template-rows: 160px repeat(5, 75px);
    background-color: #0D0C12;
    padding: 16px;
    border-radius: 32px;
    box-shadow: 12px 12px 8px 6px #0a0518;
    border: 2px solid #4B526F;

}

button{
    cursor: pointer;
    margin: 4px;
    padding: 0;
    border-radius: 32px;
    font-size: 1.5em;
    border: none;
    background: linear-gradient(180.55deg, #1B4E9F -19.61%, rgba(12, 15, 39, 0) 110.28%);
    border: 2px solid #4B526F;
}

button:active{
    background-color: #8d8d8b;
}

button:focus{
    outline: none;
}

.display{
    grid-column: 1 / -1;
    padding: 16px;
    display: flex;
    margin: 12px 12px 22px;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient(180.55deg, #71315B -19.61%, rgba(52, 5, 36, 0) 110.28%);
    border: 2px solid #71315B;
    border-radius: 32px;
    text-align: right;
    justify-content: space-between;
    word-break: break-all;
    /* box-shadow: 6px 6px 0px 6px #29042e; */
}

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


#valor-actual{
    font-size: 1.5em;

}

#valor-anterior{
    font-size: 2em;
    
}