:root {
    /* --bs-font: "Sofia Sans Extra Condensed", sans-serif;
    --bs-font-family: "Sofia Sans Extra Condensed", sans-serif; */
    --color-1: red;
    --color-2: black;
    --color-3: white;
    --color-4: #346f75;
    --color-5: #7c0d27;

    background-color: black;
}

html {
    filter: brightness(1.3) saturate(1.02);
    background-color: var(--color-2);
}

body {
    background-color: var(--color-2);
}

nav {
    filter: invert(1);
    mix-blend-mode: difference;
    opacity: 0.5;
    letter-spacing: 4px;
}

.noise{
    background: url(/assets/img/noise.png) repeat;
}

.grain-overlay {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;

    pointer-events: none;
    z-index: 99999;

    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    background-repeat: repeat;

    /* GRAIN SETTINGS */
    mix-blend-mode: luminosity;
    filter: invert(1) grayscale(100%) contrast(900%) brightness(50%);
    opacity: 0.75;

    animation: grainMove 1s steps(6) infinite;
}

/* Set page font */
p {
    font-family: "Special Gothic", sans-serif;
    font-size: 24px;
}

/* .nixie {
    font-family: renix;
    font-weight: 800;
} */

.banner{
    background-color: var(--color-2);
    padding-bottom: 10%;
    height: 100vh;
    list-style-type: none;
}

.btn {
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 30vh;
    /* background: none; */
}

#title-container {
    position: relative;
    padding: 22vh;
      /* font-size: clamp(0.01rem, , 1rem); */
    
}

.nixie {
    max-width: 130px;
    margin: 0;
    border: 0;
}

/* SLEEPLESS main text */
#title {
    position: absolute;
    font-size: 32rem;
    max-width: 95vw;
    font-family: 'Sofia Sans Extra Condensed', sans-serif;

    /* Colour Invert Text */
    filter: invert(1);
    mix-blend-mode: difference;
    
    /* Dropshadow */
    text-shadow: 2px 2px 5px;
    /* letter-spacing: clamp(0.05ch, 0.25vw, 0.4ch); */
}

/* Band logo */
#moon {
    padding-top: 8%;
    width: 400px;
    filter: invert(1);
    mix-blend-mode: difference;
    position: absolute;
}

.icon {
    filter: invert(1);
    mix-blend-mode: difference;
}

.disclaimer {
    background-color: var(--color-3);
    margin: 0;
    padding: 0;
}


.discography, .videos {
    background-color: var(--color-2);
    color: var(--color-4);
    font-weight: 600;
}

/* INSPIRATIONS PAGE */

.spacer {
    background-color: var(--color-2);
    height: 3em;
}

.shelf {
    background-color: var(--color-5);
    padding-top: 0.75rem;
    /* padding-bottom: 0.75rem; */
    /* max-height: 6em; */
}

.shelf-label {
    background-color: black;
    text-shadow: 0px 0px 4px #f5f7f2;
    /*text-shadow: 0 0 5px white;*/
    color: rgb(176, 176, 176);
    font-family: "Cutive Mono", monospace !important;
    line-height: 1;
    display: inline-block;
    width: 100vw;
}

.shelf-container {
    position: relative;
    background-color: var(--color-2);
}

.album-container {
    max-width: 320px;
    line-height: 0;
    /* overflow: hidden; */
    /* background-color: var(--color-4); */
    color: var(--color-4);
    margin-top: auto;
}

.album-title {
    /* margin-bottom: auto; */
    font-weight: 700;
    line-height: 1;
}

.album-cover {
    width: 320px;
}



/* FONTS */

@font-face {
  font-family: renix; /* set name */
  src: url("assets/font/reNix-Regular.woff2"), format("woff2"); /* url of the font */
  /* weight: 1000; */
  /* font-size: 40px; */
}


/* ANIMATIONS */
@keyframes grainMove {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-5%, -10%); }
    40%  { transform: translate(-15%, 5%); }
    60%  { transform: translate(7%, -25%); }
    80%  { transform: translate(-5%, 25%); }
    100% { transform: translate(0, 0); }
}