html {
  scroll-behavior: smooth;
}

/* Import Epilogue font from local files */
@font-face {
    font-family: 'Epilogue';
    src: url('../fonts/Epilogue-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Define color variables */
:root {
    --color-primary: #333333; /* Dark gray for primary text */
    --color-secondary: #888888; /* Medium gray for secondary text */
    --color-background: #FFFFFF; /* White for background */
    --color-shaded-background: #e4e4e4; /* Light gray for shaded background */
    --color-accent: #161c42; /* Blue for accent elements */
    --color-shaded-accent: rgb(39, 51, 125); /* Darker blue for shaded accent elements */
}

/* Apply Epilogue font to the body */
body {
    margin: 0;
    font-family: 'Epilogue', sans-serif;
    color: var(--color-primary);
    background-color: var(--color-background);
}

/* Style headers */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-accent);
    font-weight: 100;
}

/* Style links */
a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}