/* 1. CSS body*/
body {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
    justify-content: center;
}

/* 2. CSS class calculator*/
.calculator {
    width: 400px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(242, 121, 121, 0.1);
    text-align: center;
}

/* 3. CSS class display*/
.display {
    font-family: 'Space Mono', monospace;
    width: 94%;
    height: 30px;
    font-size: 2.5em;
    text-align: right;
    padding: 10px;
    background: #FBFBFB;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* 4. CSS class button*/
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* 5. CSS elemen button*/
button {
    font-family: 'Space Mono', monospace;
    font-size: 1.2em;
    padding: 14px;
    border-radius: 5px;
    border: 1px solid #BFBBA9;
    cursor: pointer;
    background: #F5ECD5;
}

/* 6. CSS elemen button class operator*/
button.operator {
    background: #155E95;
    color: #fff;
}

/* 7. CSS elemen button class equal*/
button.equal {
    background: #497D74;
    color: #fff;
    grid-column: span 2; /* Span 2 columns */
    font-size: 1.2em;
}

/* 8. CSS elemen button class clear*/
button.clear {
    background: #8E1616;
    color: #fff;
}

/* 9. CSS class footer*/
.footer {
    margin-top: 20px;
    font-size: 12px;
    color: #555;
    text-align: center;
}

/* 10. CSS class header*/
.header {
    display: flex;
    align-items: center;
    background-color: #FBF5DD;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

/* 11. CSS class logo*/
.logo {
    width: 40px;
    height: 40px;
    margin-right: 20px;
}

/* 12. CSS elemen h1 */
h1 {
    text-align: center;
    color: #333;
}

/* 13. CSS class footer-line*/
.footer-line {
    height: 2.2px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: #2b2a2a;
    margin-top: 10px;
  }

/* 14. Responsive Design */
@media (max-width: 480px) {
    .calculator {
        width: 90%;
    }
    .display {
        font-size: 2em;
    }
    button {
        font-size: 1.2em;
        padding: 12px;
    }
}