:root {
    --color-primary: #c7e3fe;
    --color-secundary: #A786DF;
    --font-family: "Nunito";
    --color-green: #85d185;
    --color-gray: #535353;
    --color-tertiary: #D9D4E7;
    --color-black: #0E172C;
    --bs-secondary: #0E172C;
}

.Headline1 {
    font-weight: 800;
    font-size: 24px;
    line-height: 33px;
}

.Headline2 {
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
}

.subtitle1 {
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.0015em;
}

.subtitle2 {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.001em;
}

.body1Regular {
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.005em;
    color: var(--color-gray);
}

.body1Bold {
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.005em;
}

.body2Regular {
    font-weight: normal;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.005em;
}

.body2Bold {
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.005em;
}

.buttom {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.0125em;
}

.caption {
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 0.004em;
    color: var(--color-gray)
}

.menu-elementos {
    position: fixed;
    top: 92%;
    width: 100%;
}

.icono-activo {
    width: 122px;
    height: 40px;
    top: 36px;
    left: 24px;
    margin-top: -7px;
}

.icono-activo-home, .icono-activo-perfil {
    width: 102px;
    height: 40px;
    top: 36px;
    left: 24px;
    margin-top: -7px;
}

@media (min-width: 540px) {
    .menu-mascotas {
        position: fixed;
        top: 0;
        width: 100%;
    }

    .Headline1 {
        font-size: 34px !important;
    }

    .Headline2 {
        font-size: 28px !important;
    }

    .subtitle1 {
        font-size: 28px !important;
    }

    .subtitle2 {
        font-size: 22px !important;
    }

    .body1Regular {
        font-size: 22px !important;
    }

    .body1Bold {
        font-size: 22px !important;
    }

    .body2Regular {
        font-size: 20px !important;
    }

    .body2Bold {
        font-size: 20px !important;
    }

    .buttom {
        font-size: 24px !important;
    }

    .caption {
        font-size: 21px !important;
    }

    .iconos {
        width: 40px;
    }

    .nav-link-mensaje {
        margin-left: 70%;
    }
}