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

:root {
    --spacing-0: 0px;
    --spacing-100: 8px;
    --spacing-200: 16px;
    --spacing-300: 24px;
    --spacing-400: 32px;
    --spacing-500: 40px;
    --spacing-600: 48px;
    --spacing-700: 56px;
    --spacing-900: 72px;
    --spacing-1100: 88px;
    --spacing-1200: 96px;
    --spacing-1300: 104px;
    --spacing-1600: 128px;
    --spacing-1800: 144px;

    --white: #FFFFFF;
    --black: #000000;

    --grey-500: #5E6E85;
    --grey-300: #ACC1DE;

    --blue-900: #253347;
    --blue-500: #345FF6;
    --blue-300: #B3D3F1;
    --blue-100: #E1E7FE;

    --gradient-1: #D6FCFF;

    --text-1: 600 64px/1.1 "Inter", sans-serif;
    --text-2: 600 48px/1.1 "Inter", sans-serif;
    --text-3: 600 32px/1.1 "Inter", sans-serif;
    --text-4: 600 24px/1.2 "Inter", sans-serif;
    --text-5: 600 20px/1.2 "Inter", sans-serif;

    --text-6-semibold: 600 16px/1.5 "Inter", sans-serif;
    --text-6-regular: 400 16px/1.5 "Inter", sans-serif;

    --text-7-bold: 700 14px/1.5 "Inter", sans-serif;
    --text-7-regular: 400 14px/1.5 "Inter", sans-serif;
}

/* HEADER */
.header-text-content {
    background: linear-gradient(to right, white 0%, #D6E6FE 100%);
    padding: var(--spacing-400) var(--spacing-300) 0 var(--spacing-300);
    border-end-end-radius: var(--spacing-400);
}

.header-text-content img {
    width: 36px;
    display: block;
    margin: auto;
}

.header-text-content h1 {
    font: var(--text-2);
    text-align: center;
    padding: var(--spacing-300);
    color: var(--blue-900);
}

.header-text-content p {
    padding-bottom: var(--spacing-1800);
    font: var(--text-6-regular);
    color: var(--grey-500);
}

/* CARD */
.main-calculator-content {
    padding: var(--spacing-300);
    margin: -110px var(--spacing-300) 0;
    background-color: var(--white);
    border-radius: var(--spacing-200);
    border: 1px solid;
}

.main-calculator-content h2 {
    font: var(--text-4);
    text-align: center;
    margin-bottom: var(--spacing-300);
}

/* CHOICE */
.choice-box {
    padding: var(--spacing-300);
    display: flex;
    justify-content: space-between;
    font: var(--text-6-semibold);
    color: var(--blue-900);
}

/* FIELD GROUP */
.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    margin-bottom: var(--spacing-300);
}

.field-label {
    font: var(--text-7-regular);
    color: var(--grey-500);
}

/* GRID DOS INPUTS */
.flex-fields {
    display: grid;
    gap: var(--spacing-200);
}

/* INPUT BOX */
.input-box {
    position: relative;
    width: 100%;
}

.input-box span {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue-500);
    font: var(--text-4);
}

.input-box input {
    width: 100%;
    padding: var(--spacing-300);
    border-radius: 12px;
    border: 1px solid var(--grey-500);
    color: var(--blue-900);
    font: var(--text-4);
}

.input-box input::placeholder {
    color: var(--blue-900);
}

/* RESULTADO */
.bmi-result-content {
    background-color: var(--blue-500);
    color: white;
    padding: var(--spacing-400);
    border-radius: var(--spacing-200);
}

.bmi-value p {
    font: var(--text-6-semibold);
    margin-bottom: var(--spacing-100);
}

.bmi-value .result {
    font: var(--text-2);
}

.bmi-description {
    font: var(--text-7-regular);
}


@media(min-width: 768px){
    .main-calculator-content{
        max-width: 762px;
        margin-left: auto;
        margin-right: auto;
    }

    .header-text-content{
        p{
            text-align: center;
            max-width: 762px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .main-calculator-content{
        padding: var(--spacing-400);

        h2{
            text-align: left;
        }


        .fields{
            display: flex;
            gap: var(--spacing-300);
        }
    }

    .bmi-result-content{
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
        border-top-left-radius: 64px;
        border-bottom-left-radius: 64px;

        display: flex;
        justify-content: space-between;

        padding: var(--spacing-400);

        .bmi-description{
            p{
                max-width: 250px;
            }
        }
    }
}


@media (min-width: 1440px){

    .hero{
        display: flex;
        align-items: center;
        
        padding: 0px 144px;
        max-width: 1440px;
        margin: auto;
        height: auto;
    }

    .header-text-content{
        
        padding-right: 400px;
        background: linear-gradient(to right, white 0%, #D6E6FE 100%);
        
        border-bottom-right-radius: 64px;
        
        img{
            width: 64px;
            height: 64px;
            margin: 0px 0px 100px 0px;
        }
    }

    .header-text-content h1{
        font: var(--text-1);
        text-align: left;
        max-width: 750px;
        margin: 0px;
        padding: 0px;
        padding-bottom: var(--spacing-400);
    }

    .header-text-content p{
        text-align: left;
        max-width: 465px;
        margin: 0px;
    }

    .main-calculator-content{
        margin-top: -30px;
        width: 664px;
        margin-left: -250px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    }

}