:root {
    --color-dark-orange: #E44D26;
    --color-light-orange: #F16529;
    --color-dark-blue: #264DE4;
    --color-light-blue: #2965F1;
    --color-minion-yellow: #F0DB4F;
    --color-dark-charcoal: #323330;
    --color-light-gray: #EBEBEB;
}

* {
    background-color: #323330;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: xxx-large;
    color: var(--color-light-gray);
}

@media (max-width: 500px) {
    .screen {
        font-size: 80px;
    }

    .button {
        font-size: xxx-large;
    }
}

.box {
    width: 100%;
    max-width: 450px;
    margin: auto;
}

.screen {
    height: 160px;
    margin: 10px;
    padding: 10px;
    box-shadow: 1px 1px 1px 1px;
    display: flex;
    flex-direction: column;
}

.input {
    font-size: 80px;
    text-align: right;
    vertical-align: text-top;
    white-space: nowrap;
    overflow: hidden;
}

.result {
    white-space: nowrap;
    text-align: right;
    vertical-align: text-bottom;
    margin-top: auto;
}

.grid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 80px;
    gap: 10px;
}

button:hover {
    transform: scale(1.05);
    transition: .26s;
    background-color: transparent;
    border: 1px solid var(--color-dark-blue)
}

button:active {
    background-color: var(--color-light-blue);
    transform: scale(1.15);
    transition: cubic-bezier(0.25, 1.5, 0.5, 1);
    border: 5px solid var(--color-dark-blue)
}

button {
    text-align: center;
    box-shadow: 2px 2px 2px var(--color-dark-charcoal);
    margin: 5;
    border: none;
    transition: .25s ease-in 0.15s;
    background-color: var(--color-dark-blue);
}

button.c {
    background-color: var(--color-dark-orange);
}

button.c:hover {
    transform: scale(1.05);
    transition: .26s;
    background-color: transparent;
    border: 1px solid var(--color-dark-orange)
}

button.c:active {
    background-color: var(--color-light-orange);
    transform: scale(1.15);
    transition: cubic-bezier(0.25, 1.5, 0.5, 1);
    border: 5px solid var(--color-dark-orange)
}



button.equals {
    grid-row: span 2;
    background-color: var(--color-minion-yellow);
    color: var(--color-dark-charcoal);
}

button.equals:hover {
    transform: scale(1.05);
    transition: .26s;
    background-color: transparent;
    border: 1px solid var(--color-minion-yellow);
    color: var(--color-minion-yellow);
}

button.equals:active {
    background-color: var(--color-minion-yellow);
    transform: scale(1.15);
    transition: cubic-bezier(0.25, 1.5, 0.5, 1);
    border: 5px solid var(--color-dark-charcoal);
    color: var(--color-dark-charcoal);
}

.operator {
    font-size: inherit;
    color: var(--color-minion-yellow);
}

.input.result-shown {
    color: var(--color-minion-yellow);
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut 0.2s ease-out forwards;
}

.fade-in {
    animation: fadeIn 0.2s ease-in forwards;
}