@import url('https://fonts.googleapis.com/css2?family=Savate:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');


/* .train-one {
  font-family: "Train One", system-ui;
  font-weight: 400;
  font-style: normal;
} */

:root
{

    --color-blue: #4B7CD7;
    --color-blue-penn: #0A1045;
    --color-blue-navy: #3459A3;
    --color-blue-sky: #A9C5F7;
    --color-charcoal: #2F2F2F;
    --color-gray-dark: #444;
    --color-gray-soft: #F5F7FA;
    --color-green: #4CAF50;
    --color-green-aqua: #34D1BF;
    --color-orange-warm: #F57C00;
    --color-white: #F7F7FF; /* Clean Areas, Content Blocks */



    --color-primary: var(--color-blue-navy); /* Branding, CTA Buttons, Links */
    --color-primary-dark: var(--color-blue); /* Hover States, Headers, Active Elements */
    --color-primary-light: var(--color-blue-sky); /* Highlights, Background Accents */
    --color-secondary: var(--color-charcoal); /* Headings, Nav Text */
    --color-background: var(--color-gray-soft); /* Page Background, Section Backgrounds */
    --color-accent: var(--color-green-aqua); /* Highlights, Icons, Links On Hover */
    --color-warning: var(--color-orange-warm); /* Notifications, Alerts */
    --color-success: var(--color-green); /* Confirmations, Success Messages */
    --color-text: var(--color-gray-dark); /* Body Text */

    --border-design: 1px solid var(--color-primary);
    --border-white: 1px solid var(--color-white);

    --font-main: "Slabo 27px", serif;
}

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


body
{
    background-color: var(--color-background);
    font-family: var(--font-main);
    color: var(--color-text);
}

a, button, #Header_Title, #Header_Menu_Button
{
    user-select: none;
}

a
{
    color: var(--color-primary);
}

a:hover
{
    color: var(--color-accent);
}

.button-primary
{
    background-color: var(--color-primary);
    color: var(--color-white);
}

.button-primary:hover
{
    background-color: var(--color-primary-dark);
}