:root {
    --bs-body-bg: rgb(10, 95, 170);
    --bs-body-rgb: 10, 95, 170;
    --bs-body-color: #FFF;
    --bs-body-font-family: Roboto, sans-serif;


    --mat-app-background-color: rgb(10, 95, 170);
    --color-dark-blue: #333f75;
    --color-light-blue: #3398DB;
    --color-red: #d5092d;

}
body {
    background-color: var(--mat-app-background-color);
}

nav .navbar-brand img {
    max-height: 3rem;
}

h1, h2, h3, h4, h5, h6, .ff-clearface {
    font-family: "Clearface Gothic", serif;
}


a.underline {
    color: var(--color-red);
    --color-underline: currentColor;

    transition: all 0.5s ease-in-out;
    text-decoration: none;
    display: inline-block;

    &:after {
        --height: 1px;

        height: var(--height);
        box-shadow: 0 var(--height) var(--color-underline);
        margin-top: calc(var(--height) * -1);

        content: '';
        display: block;
        width: 100%;

        background-color: var(--color-underline);

        transform: scaleX(0);
        transform-origin: right;
        transition: box-shadow 0.5s, transform 0.5s cubic-bezier(.55, 0, .1, 1), transform-origin 0s step-end;
    }

    &:hover:after {
        transform-origin: left;
        transform: scaleX(1);
    }
}

.card {
    box-shadow: 5px 5px 0 1px rgba(0, 0, 0, 0.4);
    --bs-card-bg: #FFF;
    --bs-card-color: #000;
    .form-floating {
        --bs-body-bg: var(--bs-card-bg);
        --bs-body-color: var(--bs-card-color);
    }
}