* {
    font-family: "Roboto", sans-serif;
}

:root {
    --HitBox: rgba(255, 255, 255, 0.00);
    --text-body-color: #2c2c2c;
    --Primary-primary: #164648;
    --Primary-primary-focus: #749495;
    --Primary-primary-35: #749495;
    --Theme-Danger: #DC3545;
    --tertiary-tertiary: #A16D33;
    --secondary: #6C757D;
    --Surfaces-surface-variant: #E0E4D5;
    --Surfaces-on-surface-variant: #44483E;
    --Surfaces-background: #eeeeee;
    --Theme-Body-Background: #FFF;
    --text-100: #000;
    --Theme-Colors-Secondary: #6C757D;
    --neutral-light: #eee;
    --neutral-dark: #555;
    --neutral-medium: #888;
    --shadow-black-17: rgba(0, 0, 0, 0.17);
    --neutral-pale: #D9DCCF;
    --shadow-black-10: rgba(0, 0, 0, 0.1);
    --neutral-border: #ddd;
    --blue-depth: #164648;
    --yellow-old: #efe3a9;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    background-color: var(--Surfaces-background);
}

.flash-message {
    margin-top: 1rem;
    padding-right: 3rem; /* space for btn-close */
    position: relative;
    transition: opacity 0.5s ease-out;
}

.flash-message.fade-out {
    opacity: 0;
}