*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color */
    --color-background: #fdfdfd;
    --color-font: #0f0f0f;
    --color-primary: #f7ff99;
    --color-secondary: rgba(228, 228, 228, 0.55);
    /* margins */
    --site-gutter: 15px;
    --gap: 10px;
    --border-radius: 2px;
    --header-top: var(--site-gutter);
    --header-height: 40px;
    --content-offset: calc(var(--header-height) + var(--gap));
    /* Font families */
    --font-primary: 'noigrotesk', sans-serif;
    /* Scale */
    --fs-sm: .9rem;
    --fs-base: 1rem;
    --fs-lg: 1.5rem;
    --fs-xl: 3rem;
    /* Spacing */
    --lsp-sm: 0.15px;
    --lsp-base: 0em;
    --lsp-lg: 0em;
    /* Line heights */
    --line-height-sm: 1.22;
    --line-height-base: 1.25;
    --line-height-lg: 1.2;
    --line-height-xl: 1.05;
}

@font-face {
    font-family: 'noigrotesk';
    src: url('font/NoiGrotesk-Regular.eot');
    src: url('font/NoiGrotesk-Regular.eot') format('embedded-opentype'), url('font/NoiGrotesk-Regular.woff2') format('woff2'), url('font/NoiGrotesk-Regular') format('woff'), url('font/NoiGrotesk-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    min-height: 800px;
    font-family: var(--font-primary);
    letter-spacing: 0em;
    /* adjust letter spacing depending on font size */
    word-spacing: 0em;
    /* adjust word spacing depending on font size */
    -webkit-font-smoothing: antialiased;
    /* looks better */
    -moz-osx-font-smoothing: grayscale;
    /* looks better */
    overflow-y: scroll;
    scroll-behavior: smooth;
}

#BGcolor {
    background-color: var(--color-background);
    z-index: 0;
}

::-moz-selection {
    /* Code for Firefox */
    background: var(--color-primary);
}

 ::selection {
    background: var(--color-primary);
}


/* TYPOGRAPHY */

h2 {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-lg);
    line-height: var(--line-height-lg);
    letter-spacing: var(--lsp-lg);
    color: var(--color-font);
}

h2 a:link,
h2 a:visited {
    text-decoration: none;
    color: var(--color-font);
}

h2 a:hover,
h2 a:active {
    background-color: var(--color-primary);
    -webkit-transition: background-color 0.35s ease-out;
    -moz-transition: background-color 0.35s ease-out;
    -o-transition: background-color 0.35s ease-out;
    transition: background-color 0.35s ease-out;
}

h3 {
    float: right;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--lsp-sm);
    color: var(--color-font);
    background-color: var(--color-primary);
}

h4 {
    display: inline-block;
    margin-top: var(--gap);
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--lsp-sm);
    color: var(--color-font);
    list-style-type: none;
    text-decoration: none;
}