style.css

body {
    margin: 0;
    padding: 0;
    background: #e5effd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #1C2335;
}

.header {
    text-align: center;
    padding: 3vh 0;
    font-size: 30px;
    font-weight: bold;
    width: 100%;
    background: #80acd7;
}

.container {
    margin-top: 10vh;
    border: 2px solid #1C2335;
    border-radius: 20px;
    overflow: hidden;
}

#screen {
    border-radius: 20px;
    border-bottom: 1px solid #1C2335;
    height: 15vh;
    background: #dee3f3;
    font-size: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.buttons-container {
    background: #ebedf0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.btn {
    border-radius: 100%;
    background-color: #e1e2eb;
    font-size: 40px;
    width: 8vh;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition-property: border, background-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.btn:hover {
    background-color: #565775;
    color: #e1e2eb;
}

.btn:active {
    background-color: #393960;
    color: white;
}

.operator, #calculateBtn {
    background: #c5d0ef;
}

.operator:hover, #calculateBtn:hover {
    background-color: #3D4760;
    color: #c5d0ef;
}

.operator:active, #calculateBtn:active {
    color: white;
    background-color: #151c2d;
}

.btn-wide {
    width: 18vh;
    aspect-ratio: 2/1;
    border-radius: 80px;
}

.btn-red {
    background-color: #FFCEFD;
}

.btn-red:hover {
    background-color: #9f429b;
}

.btn-red:active {
    color: white;
    background-color: #60135c;
}

#liveResult {
    font-size: 16px;
}

.multiply-operator {
    padding-top: 15px;
}