/* variables */

:root {
    /* logo colors */
    --logo-magenta: #ec268f;
    --logo-blue: #0098da;
    --logo-gray-0: #52658c;
    --logo-gray-1: #a7c4d2;
    /* colors */
    --color_black: #161212;
    --color-yellow: #ffde59;
    --color-gray-2: #222c3f;
    --text_dark: #1b1717;
    --gradient_yellow-0: #f8ff9b;
    --gradient_yellow-1: #d6e513;
    --gradient_yellow-2: #eddd53;
    --gradient_blue-0: #8ee0ff;
    --gradient_blue-1: #1ea6da;
    --gradient_blue-2: #8cc4d9;
    --gradient_red-0: #f277c9;
    --gradient_red-1: #dc1d9c;
    --gradient_red-2: #d378b5;
    /* bootstrap */
    --navbar_link_fg: #52658c;
    --navbar_link_hv_fg: #52658c;
    --navbar_link_hv_bg: #97b5f1;
    /* validation */
    --validation-cl: #b21b1b;
    --validation-bg: #ffe5e5;
}

/* fonts */

@font-face {
    font-family: Monserrat;
    src: url('./fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Monserrat;
    src: url('./fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: Monserrat;
    src: url('./fonts/Montserrat-Italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: bootstrap-icons;
    src: url('./fonts/bootstrap-icons.woff') format('woff');
}

/* elements */

body {
    color: var(--logo-gray-0);
    font-family: Monserrat, Verdana, Tahoma;
    font-size: 18px;
}

/* colors */
.color-magenta {
    color: var(--logo-magenta);
}
.color-blue {
    color: var(--logo-blue);
}
.color-gray-0 {
    color: var(--logo-gray-0);
}
.color-gray-1 {
    color: var(--logo-gray-1);
}
.color-gray-2 {
    color: var(--color-gray-2);
}

/* sections */
.section-magenta {
    background-color: var(--logo-magenta);
}
.section-blue {
    background-color: var(--logo-blue);
}
.section-gray-0 {
    background-color: var(--logo-gray-0);
}
.section-gray-1 {
    background-color: var(--logo-gray-1);
}
.section-yellow {
    background-color: var(--color-yellow);
}
.section-black {
    background-color: var(--color_black);
}
.section-gray-2 {
    background-color: var(--color-gray-2);
}
.text-black {
    color: var(--text_dark);
}
.back-black {
    background-color: var(--text_dark);
}


.rounded-big {
    border-radius: 2rem !important;
}
.border-big {
    border: 15px solid white;
}

.gradient-yellow {
    background: linear-gradient(to bottom right, var(--gradient_yellow-0) 0%, var(--gradient_yellow-1) 50%, var(--gradient_yellow-2) 100%);
}
.gradient-blue {
    background: linear-gradient(to bottom, var(--gradient_blue-0) 0%, var(--gradient_blue-1) 50%, var(--gradient_blue-2) 100%);
}
.gradient-red {
    background: linear-gradient(to bottom left, var(--gradient_red-0) 0%, var(--gradient_red-1) 50%, var(--gradient_red-2) 100%);
}

.footer-title {
    color: var(--logo-blue);
}

.w-80 {
    width: 80%;
}

/* validations */

.field-validation-error {
    color: var(--validation-cl);
    float: right;
    font-size: small;
    margin-top: 4px;
}
.input-validation-error {
    border: 1px solid var(--validation-cl);
    background-color: var(--validation-bg);
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.nav-link {
    color: var(--navbar_link_fg);
}

.nav-link:hover {
    color: var(--navbar_link_hv_fg);
    background-color: var(--navbar_link_hv_bg);
}