* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Primary */
    --clr-primary-purple: hsl(259, 100%, 65%);
    --clr-primary-light-red: hsl(0, 100%, 67%);

    /* Neutral */
    --clr-neutral-white: hsl(0, 0%, 100%);
    --clr-neutral-off-white: hsl(0, 0%, 94%);
    --clr-neutral-light-grey: hsl(0, 0%, 86%);
    --clr-neutral-smokey-grey: hsl(0, 0%, 50%);
    --clr-neutral-off-black: hsl(0, 0%, 8%);

    /* Typography */

    /* font size */
    --fs-xx-large: clamp(44px, 10vw, 100px);
    --fs-x-large: clamp(16px, 5vw, 64px);
    --fs-large: clamp(16px, 5vw, 48px);
    --fs-input-field: clamp(16px, 5vw, 32px);
    --fs-regular: 1rem;
    --fs-small: 0.75rem;
    --fs-tiny: 0.5rem;

    /* clamp */
    --clamp-fs-regular: clamp(16px, 5vw, 24px);

    /* Font weight */
    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 800;

    /* general sizes */
    --tiny-size: 0.5rem;
    --small-size: 0.725rem;
    --regular-size: 2rem;
    --big-size: 2.5rem;
    --large-size: 3rem;
    --x-large-size: 4rem;
    --xx-large-size: 7.5rem;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    min-width: 100dvw;
    min-height: 100dvh;
    background-color: var(--clr-neutral-off-white);
    padding: var(--xx-large-size) var(--small-size);
}

.main-container {
    display: grid;
    margin: auto;
    background-color: var(--clr-neutral-white);
    padding: var(--large-size);
    border-radius: 1.5rem 1.5rem var(--xx-large-size) 1.5rem;
}

.form-container {
    display: grid;
    gap: var(--large-size);
    margin-bottom: var(--regular-size);
}

.input-containers {
    display: flex;
    gap: var(--small-size);
    align-items: flex-start;
}

.input-container {
    width: 100%;
    display: grid;
    gap: var(--tiny-size);
}

.label {
    font-size: var(--fs-small);
    font-weight: var(--fw-semi-bold);
    color: var(--clr-neutral-smokey-grey);
    letter-spacing: 0.25rem;
}

.input {
    width: 100%;
    padding: var(--small-size) 0 var(--small-size) var(--small-size);
    border: 1px solid var(--clr-neutral-light-grey);
    border-radius: var(--tiny-size);
    caret-color: var(--clr-primary-purple);
    color: var(--clr-neutral-off-black);
    font-family: inherit;
    font-size: var(--fs-input-field);
    font-weight: var(--fw-bold);
}

.input:focus {
    outline: 1px solid var(--clr-primary-purple);
}

.error-message {
    font-size: var(--fs-tiny);
    color: var(--clr-primary-light-red);
}

.invalid-input {
    border-color: var(--clr-primary-light-red);
}

.invalid-label {
    color: var(--clr-primary-light-red);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.dividerAndBtn {
    display: flex;
    position: relative;
}

.divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--clr-neutral-light-grey);
}

.calculate-btn {
    position: absolute;
    bottom: -55px;
    left: calc(50% - 55.75px);
    background-color: var(--clr-primary-purple);
    border: none;
    border-radius: 50%;
    padding: var(--regular-size);
    transform: scale(0.5);
    transition: left 2s ease-in-out;
}

.calculate-btn:hover {
    background-color: var(--clr-neutral-off-black);
}

.calculator-container {
    line-height: 1.2;
}

.calc-text {
    display: flex;
    gap: var(--tiny-size);
    flex-wrap: nowrap;
    font-size: var(--fs-xx-large);
    font-weight: var(--fw-bold);
    font-style: italic;
}

.computed-value {
    color: var(--clr-primary-purple);
}

@media (min-width: 692px) {
    body {
        display: grid;
        place-items: center;
    }

    .form-container {
        gap: var(--large-size);
    }

    .input-containers {
        gap: var(--regular-size);
        max-width: 85%;
    }

    .calculate-btn {
        transform: scale(0.7);
        left: calc(100% - 92.75px);
        transition: left 2s ease-in-out;
    }
}

@media (min-width: 692px) and (max-width: 798px) {
    .input-containers {
        max-width: 100%;
    }
}