/*Set global variables to initial values*/
:root{
    --color_background: #000000;
    --color_number: #474747;
    --color_operator_right: #ffa500;
    --color_operator_top: #b0b0b0;
    --color_text: #ffffff;
    --button_text: 1.3em;
    --button_width: 50px;
    --button_shell_width: 65px;
    --button_container_width: 90%;
    --calc_width: 55vw;
    --calc_height: 65vh;
    --display_in_text_size: 1.5em;
}

/*style whole page*/
html{
    overflow: hidden;
}

/*Style body*/
body {
    background-color: var(--color_background);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/*Style link back to portfolio*/
a {
    padding: 20px;
    margin-top: 50px;
    color: aliceblue;
    font-size: max(3vw, 10px);
}

/*Style header1s*/
h1 {
    color: var(--color_text);
}

/*Set div text color*/
div {
    color: var(--color_text);
}

/*Style whole Calculator*/
#calculator {
    display:flex;
    position: relative;
    bottom: 170px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    width: var(--calc_width);
    height: var(--calc_height);
    margin: 200px auto;
}

/*style both displays, input and output*/
#displays {
    display: flex;
    flex-direction: column;
    position:relative;
    margin-bottom: 20px;
    overflow-x: hidden; 
    overflow-y: hidden;
    width: var(--calc_width);
}

#display_input {
    font-size: var(--display_in_text_size);
    justify-content: end;
    text-align: end;
    width: var(--calc_width);
}

#display_output {
    font-size: var(--display_in_text_size);
    justify-content: end;
    text-align: end;
    width: var(--calc_width);
}

/*style all buttons*/
button {    
    display: flex;
    background: none;
    border: none;
    text-align: center;
    color: var(--color_text);
    font-size: var(--button_text);
    text-shadow: 2px 1px #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

/*Style button containers*/
div.buttonDiv{
    display: flex;
    position: relative;
}

/*creating a grid container for buttons*/
#button_container { 
    display: grid;
    width: var(--button_container_width);
    height: 75%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "clear sign percent divide"
    "seven eight nine multiply"
    "four five six minus"
    "one two three plus"
    "zero zero decimal equals";
    grid-gap: 10px;
}

/*setting individual button characteristics*/
#zero {
    grid-area: zero;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#one {
    grid-area: one;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#two{
    grid-area: two;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#three{
    grid-area: three;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#four{
    grid-area: four;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#five{
    grid-area: five;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#six{
    grid-area: six;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#seven {
    grid-area: seven;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#eight {
    grid-area: eight;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#nine {
    grid-area: nine;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#clear {
    grid-area: clear;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_top);
    border-radius: 100px;
}

#percent {
    grid-area: percent;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_top);
    border-radius: 100px;
}

#sign {
    grid-area: sign;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_top);
    border-radius: 100px;
}

#divide {
    grid-area: divide;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_right);
    border-radius: 100px;
}

#multiply {
    grid-area: multiply;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_right);
    border-radius: 100px;
}

#minus {
    grid-area: minus;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_right);
    border-radius: 100px;
}

#plus {
    grid-area: plus;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_right);
    border-radius: 100px;
}

#decimal {
    grid-area: decimal;
    justify-content: center;
    text-align: center;
    background-color: var(--color_number);
    border-radius: 100px;
}

#equals {
    grid-area: equals;
    justify-content: center;
    text-align: center;
    background-color: var(--color_operator_right);
    border-radius: 100px;
}