*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    background-color: #646464;
}
body{
    min-height: 100vh;
    background-image: radial-gradient(at bottom left, #505050, #646464, #787878);
}
header{
    h1{
        padding: 1em;
        text-align: center;
        font-family: Roboto;
        color: white;
        text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
    }
}
main{
    display: flex;
    justify-content: center;
}
.calc{
    width: 18em;
    background-image: linear-gradient(to left, #3c3c3c, #2d2d2d, #1e1e1e);
    border-radius: 20px;

    box-shadow: 
    inset -4px 4px 12px #515151,
    -4px 4px 8px rgba(0, 0, 0, 1)
    ;

    .charger{
        height: 2em; width: 6em;
        background-color: rgb(0, 55, 0);
        margin: 2em 2em 1.5em auto;
        border-radius: 5px;

        box-shadow: 
        inset -4px 4px 4px rgba(0, 0, 0, 0.5),
        inset 4px -4px 2px rgba(128, 128, 128, 0.148)
        ;

        display: flex;
        justify-content: space-evenly;
        align-items: center;
        hr{
            border: 1px solid rgba(0, 0, 0, 0.463);
            width: 1px; height: 90%;
        }
    }
    #inp{
        display: block;
        background-color: #456b4b;
        border: none;
        border-radius: 5px;
        width: 16rem;
        margin-inline: auto;

        text-align: right;
        padding: 5px;

        font-family: monospace;
        font-size: 2em;
        color: black;

        box-shadow: 
        inset -4px 4px 4px rgba(0, 0, 0, 0.5),
        inset 4px -4px 2px rgba(128, 128, 128, 0.3)
        ;
        
        cursor: default;
        &:focus{
            outline: none;
        }
    }
    .keys{
        width: 15em;
        border-radius: 10px;
        margin: 2em auto;

        display: flex;
        gap: 15px;

        user-select: none;
        -webkit-user-select: none;
        .numbers{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: 65%;
        }
        .operators{
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 35%;

            #equal-btn{
                grid-column: span 2;
                font-size: 1.6em;
                background-color: #22712e89;
            }
        }

        .numbers, .operators{
            gap: 10px;
            button{
                font-size: 1.4em;
                height: 2em;
                padding: 8px 4px;

                background-color: #646464;
                color: white;
                border: none;
                border-radius: 5px;

                box-shadow: 
                    -4px 4px 4px rgba(0, 0, 0, 0.5),
                    inset -4px 4px 2px rgba(128, 128, 128, 0.3),
                    inset 4px -4px 2px rgba(1, 1, 1, 0.1);
                &:active{
                    box-shadow: 
                    inset -4px 4px 4px rgba(0, 0, 0, 0.1),
                    inset 4px -4px 2px rgba(128, 128, 128, 0.3);
                }

                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            .operator{
                background-color: #505050;
            }
            .highlighted_operator{
                background-color: rgba(170, 0, 0, 0.607);
            }
        }
    }
}