*{
    padding: 0;
    margin: 0;
}
body{
    background-color: hsl(215, 94%, 81%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;
}

.calculator{
    background-color: hsl(222, 47%, 11%);
    width: 350px;
    padding: 1.5rem;
    box-shadow: 5px 5px 10px grey;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.display{
    color: white;
    font-size: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
    background-color: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 20px;
    padding: 20px 8px;
    width: 100%;
    height: 90px;

}

.buttons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 20px;
    width: fit-content;
}

.buttons button{
    font-size: 40px;
    width: 4rem;
    border: none;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.15);
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    color: white;
    cursor: pointer;
}
button.num{
    color: rgb(11, 152, 233);
}


button.num:hover{
    background-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

button.num:active{
    background-color: hsla(0, 0%, 100%, 0.4);
}



button.clear{
    background-color: hsla(0, 88%, 44%, 0.85);
    border: 1px solid hsla(0, 88%, 44%, 0.85);
}

button.clear:hover{
    background-color: hsla(0, 88%, 34%, 0.85);
}

button.clear:active{
    background-color: hsla(0, 88%, 44%, 0.85);
}

button.zero{
    grid-column: span 2;
    width: 100%;
}

button.equal{
    grid-column: 4 / 4;
    grid-row: 4 / 6;
    height: 100%;
}

button.operand{
    background-color: blue;
    border: 1px solid blue;
    color: white;
}

button.operand:hover{
    background-color: hsl(240, 100%, 30%);
}

button.operand:active{
    background-color: hsl(240, 100%, 60%);
}

button.del{
    font-size: 1.5rem;
    background-color: hsla(0, 88%, 44%, 0.85);
    border: 1px solid hsla(0, 88%, 44%, 0.85);
}

button.del:hover{
    background-color: hsla(0, 88%, 34%, 0.85);
}

button.del:active{
    background-color: hsla(0, 88%, 44%, 0.85);
}