* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*:focus {
    outline: none !important;
}

body, html {
    height: 100vh;
}

body {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    margin: 0;
    padding: 12px;
    font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    color: white;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background: #B4ED50;
    background: linear-gradient(135deg, #b4ed50 0%, #07f7bf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$green', endColorstr='$teal',GradientType=1 );
}

.calculator {
    display: flex;
    flex-flow: row wrap;
    width: 259px;
    box-shadow: 0 0 10px rgba(85, 85, 85, 0.2);
    border-radius: 12px;
}
.calculator.pre-enter {
    opacity: 0;
    -webkit-transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(0);
    transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(0);
    visibility: hidden;
}
.calculator.pre-enter .total {
    opacity: 0;
}
.calculator.on-enter {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    visibility: visible;
    transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.calculator.on-enter .total {
    opacity: 1;
    transition: opacity 300ms ease-out 1000ms;
}
.calculator button {
    display: block;
    padding: 0;
    border: 0;
    width: 64px;
    height: 64px;
    background: none;
    font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: all 200ms ease-out;
}
.calculator button:active, .calculator button.active {
    transition: all 100ms ease-in;
}
.calculator .screen {
    width: 100%;
    border-bottom: 1px solid #55cc77;
}
.calculator .equation {
    width: 100%;
    padding: 6px;
    border-radius: 12px 12px 0 0;
    background: white;
    color: #333;
    overflow: hidden;
}
.calculator .equation .summary, .calculator .equation .total {
    display: flex;
    justify-content: flex-end;
}
.calculator .summary {
    padding: 6px 6px 0;
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #b3b3b3;
}
.calculator .total {
    padding: 3px 6px 6px;
    font-size: 32px;
}
.calculator .buttons {
    display: flex;
}
.calculator .numbers {
    width: 194px;
}
.calculator .numbers ul {
    display: flex;
    flex-flow: row wrap;
    background: rgba(255, 255, 255, 0.3);
    border-bottom-left-radius: 12px;
}
.calculator .numbers button {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    background: rgba(255, 255, 255, 0.5);
}
.calculator .numbers button:hover, .calculator .numbers button:focus {
    background: rgba(255, 255, 255, 0.75);
}
.calculator .numbers button:active, .calculator .numbers button.active {
    background: rgba(51, 51, 51, 0.05);
}
.calculator .numbers li {
    border-bottom: 1px solid #55cc77;
    border-left: 1px solid #55cc77;
}
.calculator .numbers li.zero, .calculator .numbers li:last-child {
    border-bottom: 0;
}
.calculator .numbers li.clear, .calculator .numbers li:nth-child(2), .calculator .numbers li:nth-child(5), .calculator .numbers li:nth-child(8), .calculator .numbers li.zero {
    border-left: 0;
}
.calculator .numbers .clear {
    width: 100%;
}
.calculator .numbers .clear button {
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
}
.calculator .numbers .clear button:hover, .calculator .numbers .clear button:focus {
    background: rgba(255, 255, 255, 0.75);
}
.calculator .numbers .clear button:active, .calculator .numbers .clear button.active {
    background: rgba(51, 51, 51, 0.05);
}
.calculator .numbers .zero {
    width: 129px;
}
.calculator .numbers .zero button {
    width: 100%;
    border-bottom-left-radius: 12px;
}
.calculator .operators {
    width: 65px;
    border-left: 1px solid #55cc77;
}
.calculator .operators ul {
    background: #f4d063;
    background: linear-gradient(to bottom, #f4d063 0%, #fc9d6b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$yellow', endColorstr='$orange',GradientType=0 );
    border-bottom-right-radius: 12px;
}
.calculator .operators button {
    font-size: 36px;
    font-weight: 300;
    color: white;
}
.calculator .operators button:hover, .calculator .operators button:focus {
    background: rgba(255, 241, 224, 0.25);
}
.calculator .operators button:active, .calculator .operators button.active {
    background: rgba(224, 123, 0, 0.25);
}
.calculator .operators li:last-child button {
    border-bottom-right-radius: 12px;
}
.calculator .operators li:not(:last-child) {
    border-bottom: 1px solid #55cc77;
}

@media only screen and (min-height: 424px) {
    body {
        align-items: center;
        align-content: center;
        overflow: hidden;
    }
}