:root {
    --s-verde: #a7cf3a;
    --s-blu: #004481;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700&display=swap');
}

html,body{
    font-family: 'Red Hat Display', sans-serif;
}

.s_bg_green{
    background-color: var(--s-verde);
}
.s_bg_blu{
    background-color: var(--s-blu);
}

button.s_bg_green:hover {
    background-color: rgb(133 165 46);
}

.s_text_green{
    color: var(--s-verde);
}

.s_text_blu{
    color: var(--s-blu);
}

/* start border bottom skewed */
.s_skew{
    position: relative;
    padding: 10px 20px;
    font-size: 20px;
    color: var(--s-verde);
    background: var(--s-verde);

}
.s_skew:after {
    content: " ";
    position: absolute;
    display: block;
    width: auto;
    height: 100%;
    top: 20px;
    left: 0;
    z-index: -1;

    background:var(--s-blu);
    border-bottom: 20px solid var(--s-verde);

    transform-origin: bottom;
    transform: skew(0deg, -4deg);
}
/* end border bottom skewed  */

.s_error {
    margin-top: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}