style.css

@import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap');

:root
{
    --silver: #BDC2BF;
    --bship-grey: #989C94;
    --black-olive: #25291C;
    --beige: #E3E7D3;
    --vanilla: #E6E49F;
}
body
{
    font-family: 'Agdasima', monospace;
    font-size: 20px;
    background-color: var(--black-olive);
}

/* enables a transition to go up */

.begin
{
    transition: all 0.5s ease;
    margin-top: 40%;
}
.finis
{
    transition: all 0.5s ease;
    margin-top: 6%;
}

.main
{
    margin: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator-body
{
    background-color: var(--silver);
    padding-top: 2rem;
}

.screen
{
    padding: 1rem;
    background-color: var(--black-olive);
    position: relative;
    left: 10vh;
    width: 70vh;
    height: 4vh;
}
span
{
    color: var(--vanilla);
    font-size: 2rem;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

.buttons
{
    display: grid;
    grid-template-columns: repeat(4, 20vh);
    row-gap: 0.5rem;
    column-gap: 0.5rem;
    position: relative;
    padding: 2rem;
}

.button
{
    font-size: 1.2rem;
    padding: 1rem;
}

.num
{
    background-color: var(--beige);
    color: var(--black-olive);
}

.num, .attribute
{
    font-weight: 600;
}

.funct, .decimal, .reset-full, .reset-once
{
    background-color: var(--black-olive);
    color: var(--beige);
    font-weight: 500;
}

.equals
{
    background-color: var(--vanilla);
    color: var(--black-olive);
}

.button:active
{
    background-color: var(--bship-grey);
    color: var(--beige);
    font-weight: 600;
}

.attribute
{
    background-color: var(--silver);
    font-size: 1.7rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
}