/* Variables */
:root{
    --bg-color: #C32148;
    --base-color: #2D383A;

    --top-ops-color: #bebebd;
    --top-ops-active: #D4D4D2;

    --side-ops-color: #FF9500;
    --side-ops-active: #ffaa32;

    --nums-color: #505050;
    --nums-active: #616161;

    /* font-size: 42px; */
    font-size: 2.5vh;
}

/* Global */
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

html, body{
    height: 100%;
}

body{
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
}

a:hover{
    font-style: italic;
    color: #fff;
}

.container{
    height: 100%;
    margin: auto;

    display: grid;
    justify-content: center;
    align-content: center;
}

.btn{
    width: 3rem;
    height: 3rem;
    text-align: center;
    border-radius: 100%;
    font-size: 1.3rem;
   
    display: grid;
    justify-content: center;
    align-content: center;

    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.btn:hover{
    cursor: pointer;
}

/* Active Color Classes */
.light-top-op{
    background-color: var(--top-ops-active) !important;
}
.light-side-op{
    background-color: var(--side-ops-active) !important;
}
.light-num{
    background-color: var(--nums-active) !important;
}

/* Button Classes */
.top-op{
    background: var(--top-ops-color);
}
.top-op:active{
    background-color: var(--top-ops-active);
}

.side-op{
    background: var(--side-ops-color);
    color: #fff;
}
.side-op:active{
    background: var(--side-ops-active);
}

.num{
    background: var(--nums-color);
    color: #fff;
}
.num:active{
    background: var(--nums-active);
}

/* Base */
#base{
    margin: auto;
    padding: 1rem;
    background-color: var(--base-color);
    border-radius: 1.5625rem;

    display: grid;
    grid-template-areas: 
        'display display display display'
        'ac opp perc div'
        'one two three mult'
        'four five six sub'
        'seven eight nine add'
        'zero zero dec equal';
    grid-gap: 0.5rem;
}


/* Display */
#display{
    grid-area: display;

    display: inline-block;
    text-align: right;
    padding: 0.5rem 1rem;
    margin: 0.1rem;
    border-radius: 0.3125rem;

    background-color: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.5rem;
   
    display: grid;
    justify-content: right;
    align-content: center;
}


 /*  AC +/- %  */
#ac{
    grid-area: ac;
}

#opp{
    grid-area: opp;
}

#perc{
    grid-area: perc;
}


 /* / x - + */
#div{
    grid-area: div;
}

#mult{
    grid-area: mult;
}

#sub{
    grid-area: sub;
}

#add{
    grid-area: add;

}
#equal{
    grid-area: equal;
}


/* 1 2 3 4 5 6 8 9 0 . */
#one{
    grid-area: one;
}

#two{
    grid-area: two;
}

#three{
    grid-area: three;
}

#four{
    grid-area: four;
}

#five{
    grid-area: five;
}

#six{
    grid-area: six;
}

#seven{
    grid-area: seven;
}

#eight{
    grid-area: eight;
}

#nine{
    grid-area: nine;
}

#zero{
    grid-area: zero;
    width: 6.40625rem;
    border-radius: 6.40625rem;
}

#dec{
    grid-area: dec;
}

/* Footer */
footer{
    margin: auto;;
}

h4{
    text-align: center;
    margin: 0.8rem;
}

a{
    text-decoration: underline;
    color: #000;
    text-align: center;
    display: inline-block;
    margin: 0 1.5rem;
}