:root {
    --size: 70vmin;
    --percent: 50%;
}  

body {
    background-color: hsl(60, 52%, 82%);
    font-family: 'Alexandria';
}

div {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    background-color: hsl(32, 100%, 95%);
    overflow: hidden;
    display: inline;
    margin: 1%;
    border-width: 0;
    transition: all 0.2s;
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(33, 38%, 85%);
    font-size: 6vw;
    border-radius: 2vw;
}

input {
    background-color: hsl(32, 100%, 95%);
    overflow: hidden;
    display: inline;
    margin: 1%;
    border-width: 0;
    transition: all 0.2s;
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(33, 38%, 85%);
    font-size: 6vw;
    border-radius: 2vw;
}

p {
    background-color: hsl(32, 100%, 95%);
    overflow: hidden;
    display: inline;
    margin: 1%;
    border-width: 0;
    transition: all 0.2s;
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(33, 38%, 85%);
    font-size: 6vw;
    border-radius: 2vw;
    text-align: center;

}

.gradient {
    background: hsl(32, 100%, 95%);
    background-image: linear-gradient(90deg, hsl(32, 100%, 95%), var(--percent), hsl(33, 38%, 85%), var(--percent));
}

.operator:hover {
    background-color: hsl(180, 100%, 78%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(180, 38%, 62%);
}

.selected {
    background-color: hsl(180, 100%, 78%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(180, 38%, 62%);
}

.selected:hover {
    background-color: hsl(180, 95%, 91%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(180, 22%, 68%);
}

.standard:hover {
    background-color: hsl(34, 100%, 79%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(34, 39%, 66%);
}

.greenActive {
    background-color: hsl(95, 97%, 74%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(95, 49%, 64%);
}

.purpleActive {
    background-color: hsl(340, 100%, 79%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(340, 49%, 67%);
}

.greenWin {
    background-color: hsl(95, 100%, 85%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(95, 30%, 71%);
}

.purpleWin {
    background-color: hsl(340, 100%, 91%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(339, 29%, 73%);
}

.greenActive:hover {
    background-color: hsl(95, 97%, 74%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(95, 49%, 64%);
}

.purpleActive:hover {
    background-color: hsl(340, 100%, 79%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(340, 49%, 67%);
}

.correct {
    background-color: hsl(180, 100%, 78%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(180, 38%, 62%);
}

.correct:hover {
    background-color: hsl(180, 100%, 78%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(180, 38%, 62%);
}

.incorrect {
    background-color: hsl(15, 100%, 64%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(15, 50%, 55%);
}

.incorrect:hover {
    background-color: hsl(15, 100%, 64%);
    box-shadow: inset 0 -0.2em 0 -0.1em hsl(15, 50%, 55%);
}