@import url("color_pallet.css");
@import url("fonts.css");

@import url("links.css");

@import url("topbar.css");
@import url("footer.css");

:root {
    /* Define variables */
    --scroll-position: 0px;
}

* {
    font-family: liberation-mono;
    color: var(--normal-font-color);
    scrollbar-color: var(--callout) transparent;
}

::selection {
    background: var(--callout);
}

html {
    /* Fallback incase paralax background doesn't exist */
    background-color: var(--background);
}

html,
body {
    cursor: crosshair;

    width: 100%;
    height: 100%;

    min-height: 100vh;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.noise_background {
    position: fixed;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    z-index: -1;

    overflow-y: hidden;

    background-image: url(/assets/noise.png);

    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 100%;

    background-position-y: calc(var(--scroll-position)/8);
}

.dot_background {
    position: fixed;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    z-index: -1;

    overflow-y: hidden;

    background-image: url('/assets/dot.svg');

    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 5%;

    background-position-y: calc(var(--scroll-position)/3);
}

@media screen and (max-width:900px) {
    .dot_background {
        background-size: 10%;
    }

    .noise_background {
        background-size: 200%;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
sub,
sup {
    cursor: text;
}

.org-name {
    margin-top: 0;
    font-family: michroma;
}

.barcode {
    font-family: barcode;
    font-size: 70px;

    mix-blend-mode: difference;
}

#content {
    padding: 10px;
    margin: 0;
}