Maingron/MainOS

* {
    box-sizing: border-box;
}

html, body, .content {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

.calculator {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    .result {
        #result {
            width: 100%;
            height: 100%;
            font-size: 2rem;
            text-align: right;
            border: 0;
            border-bottom: 2px solid var(--themecolor);
            padding-left: .5rem;
            padding-right: .5rem;
            -webkit-tap-highlight-color: transparent;
            &:hover, &:focus, &:active {
                background-color: unset;
            }

        }
    }
    .expression {
        #expression {
            width: 100%;
            height: 100%;
            font-size: 1rem;
            text-align: right;
            border: 0;
            padding-left: .5rem;
            padding-right: .5rem;
        }
    }
    .buttons {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-gap: 1px;
        padding-top: 2px;
        button {
            width: 100%;
            height: 100%;
            font-size: 1.75rem;
            font-weight: bold;
            box-sizing: border-box;
            border: .01em solid black;
            background-color: var(--themecolor);
            color: var(--textcolor);
            &:hover {
                background-color: var(--hovercolor) !important;
                color: var(--textcolor);
                filter: none !important
            }
            &.n { // number
                background-color: var(--themecolor);
                color: var(--textcolor);
            }
            &.c { // clear
                background-color: red;
                color: black;
            }
            &.b { // bracket
                filter: hue-rotate(40deg);
            }
            &.o { // operator
                filter: brightness(1.3);
            }
            &.e { // equal
                filter: invert(.2);
            }
            &.backspace {
                background-color: #ff3333;
                filter: grayscale(.3);
            }
            &.decimal {
                filter: brightness(.8);
            }
        }
    }
}