@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald&family=Permanent+Marker&display=swap');

/* CSS Variables Styles */
:root {
    --main-titles: "Anton", sans-serif;
    --sub-titles: "Permanent Marker", sans-serif;
    --main-body: "Oswald", sans-serif;
    --dutch-white: #dbd3ad; 
    --bistre: #28160a; 
    --cafe-noir: #513b22; /* background-forms-unhovered-color */
    --captum-motuum: #513125; /* background-hovered-color */
    --raw-umber: #966f51; /* highlight-color-header-footer */
}

/* Global Styles */

body {
    font-family: var(--main-body);
    background-color: var(--dutch-white);
    color: var(--bistre);
}

/* Subtitle Style */
h3 {
    font-family: var(--sub-titles);
    color: var(--bistre);
}

h5 {
    font-family: var(--sub-titles);
    color: var(--dutch-white);
}

/* Header Styles */

/* This is to get header under navbar */
#header {
    padding-top: 70px;
    background-color: var(--dutch-white);
}

h1.image-text {
    font-family: var(--main-titles);
    background: url('/gloomhaven-universe/assets/images/test-image.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-clip: text; /* Fixes potential issue with text not showing */
    background-clip: text; /* Works with the websites not covered in the above */
    color: transparent;
}

/* Button Styles */

/* Navbar Styles */

.logo {
    width: 35px;
    height: auto;
}

#navbar {
  background-color: var(--bistre);
  color: var(--dutch-white);
}

/* Footer Styles */

#contact {
  background-color: var(--bistre);
  color: var(--dutch-white);
}

/* grid visualisation CSS for testing */

/* .container,
.row {
    border: 2px solid red;
}

.col-12 {
    border: 2px solid blue;
    background-color: fuchsia;
} */