/* =============================== FONT ================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* =============================== VARIABLES ================================ */
:root {
     --bg-main-color: #000;
     --sec-bg-main-color: #000430;
     --secondary-bg-color: #112e42;
     --main-color: #00abf0;
     --bg-color: rgb(192, 64, 85);
     --teal-color: #24feee;
     --box-shadow: rgba(1, 191, 238, 0.864);
     --sec-box-shadow: rgba(192, 64, 85, 0.864);
}

/* ================= RESET ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* ================= BODY (CENTER CONTENT) ================= */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-main-color), var(--sec-bg-main-color));
    padding: 20px;
}

/* Hide scrollbar */
body::-webkit-scrollbar {
    display: none;
}

/* ================= CALCULATOR ================= */
.calculator {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--main-color);
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0 3px 15px var(--box-shadow);
}

/* ================= INPUT ================= */
input {
    width: 100%;
    border: none;
    padding: 24px;
    margin-bottom: 20px;
    background: var(--secondary-bg-color);
    box-shadow: 0 3px 15px var(--box-shadow);
    font-size: 40px;
    text-align: right;
    color: var(--main-color);
    border-radius: 12px;
}

input::placeholder {
    color: var(--main-color);
}

/* ================= BUTTON GRID ================= */
.calculator div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

/* ================= PERFECT CIRCLE BUTTONS ================= */
button {
    width: 100%;
    aspect-ratio: 1 / 1;   /* keeps perfect square */
    border-radius: 50%;    /* makes circle */
    border: none;
    background: transparent;

    font-size: clamp(16px, 3vw, 22px); /* responsive text */
    font-weight: 600;

    box-shadow: -8px -8px 15px var(--box-shadow);
    cursor: pointer;
    color: var(--main-color);
    transition: 0.2s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

.equalBtn {
    background: var(--bg-color);
    color: var(--sec-bg-main-color);
}

.operator {
    color: var(--teal-color);
}

button:hover {
    background: var(--main-color);
    color: var(--sec-bg-main-color);
}

.equalBtn:hover {
    background: var(--bg-color);
    box-shadow: -8px -8px 15px var(--sec-box-shadow);
}

.operator:hover {
    background: var(--teal-color);
    color: var(--sec-bg-main-color);
}

/* ================= ERROR TEXT ================= */
.errorText {
    font-size: 15px !important;
    color: var(--main-color);
}

/* ================= RESPONSIVE FIX ================= */
@media (max-width: 500px) {

    body {
        padding: 10px;
    }

    .calculator {
        padding: 15px;
    }

    input {
        font-size: 22px;
        padding: 16px;
    }

}

/* ================= FOOTER ================= */
.footer {
    width: 100%;
    background: var(--bg-main-color);
    padding: 1.5rem 5%;
    margin-top: 40px;
    text-align: center;
}

.footer-text p {
    font-size: 14px;
    color: var(--main-color);
}