/* Global Styles */
:root {
    font-family: var(--system-ui-fonts);
    font-size: var(--font-size, 18px);
}

/* Global Typography */
@font-face {
    font-family: 'Silkscreen';
    src: url('/fonts/Silkscreen/Silkscreen-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Silkscreen';
    src: url('/fonts/Silkscreen/Silkscreen-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Jersey';
    src: url('/fonts/Jersey/Jersey25-Regular.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Jersey';
    src: url('/fonts/Jersey/Jersey20-Regular.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Jersey';
    src: url('/fonts/Jersey/Jersey15-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Jersey';
    src: url('/fonts/Jersey/Jersey10-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
h1 { font-size: 3.0rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2.0rem; line-height: 1.9rem; }
h4 { font-size: 1.5rem; }
h1, h2, h3, h4 { font-family: "Jersey"; }

p { margin: 0.75em 0; }

a {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 var(--underline-offset, -0.2em) var(--link-underline-color);
    transition: box-shadow 0.25s ease-in-out;
    cursor: hand;
    pointer-events: auto;
}
a:visited { color: inherit; }
a:hover {
    box-shadow: inset 0 var(--underline-offset-hover, -0.5em) var(--link-underline-color);
    transition: box-shadow 0.25s ease-in-out;
    cursor: pointer;
    pointer-events: auto;
}

blockquote {
    margin: var(--gutter-1x) 0;
    padding: var(--gutter-1x) var(--gutter-2x);
}

[whitespace] {
    display: flex;
    flex: 1 1 0;
    margin: 0;
    padding: 0;
}

/* Global Utility Styles */
[hidden] { display: none; }

button {
    display: block;
    padding: 5px;
}
link-button {
    display: flex;
    flex-direction: row;
    border-radius: 50vh;
    border: 2px solid light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.50));
    background-color: light-dark(rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.25));
    box-shadow: var(--shadow-elevation-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    justify-content: center;
}
link-button a, link-button a:hover {
    box-shadow: none;
    text-decoration: none;
    margin: 0 var(--gutter-1x, 15px);
}

cta-button {
    display: flex;
    flex-direction: row;
    border-radius: 50vh;
    border: 2px solid rgba(0,0,0,0.75);
    background-color: rgba(0,0,0,0.50);
    color: rgba(255,255,255,0.95);
    box-shadow: var(--shadow-elevation-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
}
cta-button a, cta-button a:hover {
    box-shadow: none;
    text-decoration: none;
    margin: 10px 20px;
}

[data-hyper-mention] { font-weight: bold; }

[centered] img { margin: 0 auto; }



/* Global Responsive Styles */
@media screen and (min-width: 1280px) {}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 2.0rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

@media screen and (max-width: 767px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.35rem; }
}