/* FONTS */
@import "https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap";

@font-face {
    font-family: Spaceport;
    src:    url('../fon/spaceport.woff2') format('woff2'),
            url('../fon/spaceport.woff') format('woff');
}

/* VARIABLES */
:root {
    /* FONTS */
    --txt-default: Rubik;
    --txt-heading-alt: Spaceport;

    /* COLORS */
    --col-brand-blue: #c2deea;
    --col-brand-purple: #6e326d;
    --col-brand-purple-light: #c3d2e5;
    --col-brand-purple-fade: #573d6b;
    --col-brand-purple-dark: #3f0738;
    --col-brand-green: #27c57d;

    /* GRADIENTS */
    --gra-blue-light: linear-gradient(to right, rgba(194, 222, 234, 1) 0%, rgba(195, 210, 229, 1) 100%);
    --gra-blue-light-moz: -moz-linear-gradient(left, #c2deea 0%, rgba(195, 210, 229, 1) 100%);
    --gra-blue-light-kit: -webkit-linear-gradient(left, rgba(194, 222, 234, 1) 0%, rgba(195, 210, 229, 1) 100%);
    --gra-blue-heading: linear-gradient(to right, #c2deea 1%, #e1f5fd 50%, #c3d2e5 100%);
    --gra-blue-heading-moz: -moz-linear-gradient(left, #c2deea 1%, #e1f5fd 50%, #c3d2e5 100%);
    --gra-blue-heading-kit: -webkit-linear-gradient(left, #c2deea 1%, #e1f5fd 50%, #c3d2e5 100%);
    --gra-purple: linear-gradient(to right, var(--col-brand-purple) 0%, #906d8f 50%, var(--col-brand-purple) 100%);
    --gra-purple-moz: -moz-linear-gradient(left, var(--col-brand-purple) 0%, #906d8f 50%, var(--col-brand-purple) 100%);
    --gra-purple-kit: -webkit-linear-gradient(left, var(--col-brand-purple) 0%, #906d8f 50%, var(--col-brand-purple) 100%);

    /* BUTTONS */
    --hover-speed: 0.3s;

    /* HEADER & FOOTER */
    --header-footer-height: 5rem;
    --header-speed: 0.5s;

    /* BACKGROUND */
    --bck-blur: 1.5rem;
    --blur-speed: 0.75s;

    /* MISC */
    --bor-rad: 1.5rem;
    --bor-rad-sml: 0.75rem;
    --awards-scroll-speed: 1s;
    --media-scrollbar-height: 0.75rem;
}

/* SETUP */
body {
    font-family: var(--txt-default);
    font-size: 1.3125rem;
    color: var(--col-brand-blue);
    background: var(--col-brand-purple);
    background-color: #69346c;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    /* SCROLLBAR STYLE FOR FIREFOX */
    scrollbar-color: rgba(194, 222, 234, 0.5) rgba(110, 50, 109, 0.75);
    scrollbar-width: thin;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* SCROLLBAR */
body::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}
body::-webkit-scrollbar-track {
    background-color: rgba(110, 50, 109, 0.75);
    border-radius: var(--bor-rad);
}
body::-webkit-scrollbar-thumb {
    background-color: rgba(194, 222, 234, 0.5);
    border-radius: var(--bor-rad);
}

/* COMMON */
.container {
    margin-inline: auto;
    width: min(100%, 70.5rem);
    position: relative;
}
a {
    color: var(--col-brand-blue);
    text-decoration: none;
}
a:hover {
    color: #ffffff;
    text-decoration: underline;
}
*:focus {
    outline-color: var(--col-brand-blue);
}
*::selection {
    background-color: var(--col-brand-purple);
}
svg,
img {
    max-width: 100%;
}
svg {
    fill: #ffffff;
}
h1,
h2,
h3,
h4 {
    font-size: 2rem;
    color: var(--col-brand-blue);
    line-height: 1.25em;
}
.halt {
    font-family: var(--txt-heading-alt);
    font-weight: normal;
}
h1,
h2,
h3,
h4
p {
    margin-top: 0;
    margin-bottom: 1em;
}
p,
span {
    word-break: break-word;
}
img {
    transition: opacity 0.3s;
}
img[data-src] {
    opacity: 0;
}
.ds-text {
    text-shadow: 0 0 0.5em rgba(82, 21, 76, 0.25);
}
.hideFromMobile {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
}
body > .svgs {
    z-index: -1;
    position: fixed;
    bottom: 0;
    left: 0;
}
.box {
    width: 100%;
    font-size: 1rem;
    border: rgba(82, 21, 76, 0.25) solid 4px;
    border-radius: var(--bor-rad);
    box-shadow: 0 0 1.5em rgba(82, 21, 76, 0.35);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    padding: 0.15em;
    position: relative;
}
.box::before {
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--col-brand-purple);
    background: var(--gra-purple-moz);
    background: var(--gra-purple-kit);
    background: var(--gra-purple);
    border-radius: var(--bor-rad);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
}

/* BLUE-GLOW & BLUE BACKGROUND GRADIENT EFFECTS */
.blue-light-gradient-start {
    stop-color: var(--col-brand-blue);
}
.blue-light-gradient-end {
    stop-color: var(--col-brand-purple-light);
}
.svg-blue {
    fill: url(#gradient-blue-light) #ffffff;
}
.svg-blue-glow {
    fill: url(#gradient-blue-light) #ffffff;
    filter: drop-shadow(0 0 0.25rem rgba(194, 222, 234, 0.75));
}
.blue-glow {
    filter: drop-shadow(0 0 0.25rem rgba(194, 222, 234, 0.75));
}
.gradient-blue {
    background: var(--col-brand-blue);
    background: var(--gra-blue-light-moz);
    background: var(--gra-blue-light-kit);
    background: var(--gra-blue-light);
}
.gradient-blue-heading {
    background: var(--col-brand-blue);
    background: var(--gra-blue-heading-moz);
    background: var(--gra-blue-heading-kit);
    background: var(--gra-blue-heading);
}
.txt-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* BACKGROUND */
.background {
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #a1bbdd;
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        #a1bbdd 0%,
        #314b6b 100%
    );
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        #a1bbdd 0%,
        #314b6b 100%
    );
    background: radial-gradient(ellipse at center, #a1bbdd 0%, #314b6b 100%);
    position: fixed;
    top: 0;
    left: 0;
}
.background::before,
.background::after {
    width: 200%;
    height: 200%;
    content: "";
    background: transparent;
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        rgba(110, 50, 109, 1) 5%,
        rgba(110, 50, 109, 0) 70%,
        rgba(110, 50, 109, 0) 90%
    );
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        rgba(110, 50, 109, 1) 5%,
        rgba(110, 50, 109, 0) 70%,
        rgba(110, 50, 109, 0) 90%
    );
    background: radial-gradient(
        ellipse at center,
        rgba(110, 50, 109, 1) 5%,
        rgba(110, 50, 109, 0) 70%,
        rgba(110, 50, 109, 0) 90%
    );
    position: absolute;
}
.background::before {
    top: -110%;
    left: -110%;
}
.background::after {
    bottom: -110%;
    right: -110%;
}
.background .inner {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.background .inner::before,
.background .inner::after {
    width: 150%;
    height: 150%;
    content: "";
    background: transparent;
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        rgba(110, 50, 109, 1) 5%,
        rgba(110, 50, 109, 0) 70%,
        rgba(110, 50, 109, 0) 90%
    );
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        rgba(110, 50, 109, 1) 5%,
        rgba(110, 50, 109, 0) 70%,
        rgba(110, 50, 109, 0) 90%
    );
    background: radial-gradient(
        ellipse at center,
        rgba(110, 50, 109, 1) 5%,
        rgba(110, 50, 109, 0) 70%,
        rgba(110, 50, 109, 0) 90%
    );
    position: absolute;
    opacity: 0.75;
}
.background .inner::before {
    top: -75%;
    right: -75%;
}
.background .inner::after {
    bottom: -75%;
    left: -75%;
}
.background .img {
    z-index: 3;
    height: 100%;
    text-align: center;
    margin-top: 2rem;
    opacity: 0.35;
    position: relative;
}
.background .img img {
    width: 95%;
    max-width: 50rem;
    transition: opacity var(--blur-speed) ease-in-out;
}
.background .img img:first-child {
    opacity: 1;
    transition: opacity var(--blur-speed) ease-in-out;
}
.background .img img:last-child {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    filter: blur(var(--bck-blur));
}

/* SMOKE */
.smoke {
    width: 100vw;
    height: 100vh;
    position: fixed;
    bottom: 0;
    left: 0;
    mix-blend-mode: color-dodge;
}
.smoke > div,
.smoke::before,
.smoke::after
{
    width: 100%;
    height: 100%;
    background-image: url("../img/smoke.png");
    background-size: auto 120%;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}
.smoke::before {
    content: "";
    background-size: auto 100%;
    transform: scaleX(-1);
    opacity: 0;
}
.smoke::after {
    content: "";
    background-size: 75% 125%;
    background-position: bottom right;
    transform: scaleX(-1);
    opacity: 0;
}

/* MODAL */
.modal {
    max-height: 95vh;
    color: var(--col-brand-blue);
    border: none;
    background-color: transparent;
}
.modal * {
    z-index: 2;
    position: relative;
}
.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
}
.modal button {
    z-index: 4;
    width: 2em;
    height: 2em;
    font-size: 1.15rem;
    color: var(--col-brand-blue);
    font-weight: bold;
    background-color: rgba(110, 50, 109, 0.75);
    border: var(--col-brand-blue) solid 0.15em;
    border-radius: 50%;
    box-shadow: 0 0 0.25rem rgba(194, 222, 234, 0.75);
    text-shadow: 0 0 0.25rem rgba(194, 222, 234, 0.75);
    outline: none;
    padding: 0;
    margin-inline: 0.25em;
    display: inline-block;
    position: absolute;
    top: 0.75em;
    right: 0.25em;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity var(--hover-speed) ease-out,
                transform var(--hover-speed) ease-out;
}
.modal button:hover,
.modal button:focus {
    opacity: 1;
    transform: scale(1.05);
}
.modal .content {
    z-index: 3;
    border-radius: var(--bor-rad-sml);
    position: relative;
}
.modal .content[video] {
    height: 0;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
    padding: 2rem 1rem;
    padding-bottom: 56.25%;
}
.modal .content[images] {
    text-align: center;
    padding: 0;
}
.modal .content iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--bor-rad-sml);
    position: absolute;
    top: 0;
    left: 0;
}
.modal .content .imgs {
    display: grid;
    gap: 2rem;
    grid-auto-flow: column;
    grid-auto-columns: 95%;
    scroll-snap-type: inline mandatory;
    overflow-x: scroll;
    overscroll-behavior-inline: contain;
    padding-bottom: 2rem;
    /* SCROLLBAR STYLE FOR FIREFOX */
    scrollbar-color: var(--col-brand-blue) rgba(110, 50, 109, 0.75);
    scrollbar-width: thin;
}
.modal .content .imgs > * {
    scroll-snap-align: start;
}
.modal .content .imgs > img {
    width: 100%;
    max-height: 80vh;
    aspect-ratio: 4 / 4;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--bor-rad);
}
.modal .content .imgs::-webkit-scrollbar {
    height: var(--media-scrollbar-height);
    background-color: transparent;
}
.modal .content .imgs::-webkit-scrollbar-track {
    background-color: rgba(110, 50, 109, 0.75);
    border-radius: var(--bor-rad);
}
.modal .content .imgs::-webkit-scrollbar-thumb {
    background-color: var(--col-brand-blue);
    border-radius: var(--bor-rad);
}
.modal .content .imgs::-webkit-scrollbar-button:single-button:horizontal:decrement,
.modal .content .imgs::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: var(--media-scrollbar-height);
    width: calc( var(--media-scrollbar-height) + 1rem );
    background-repeat: no-repeat;
}
.modal .content .imgs::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-position: center left;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' role='img' width='1rem' height='1rem' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><path fill='rgb(194, 222, 234)' d='m4.431 12.822l13 9A1 1 0 0 0 19 21V3a1 1 0 0 0-1.569-.823l-13 9a1.003 1.003 0 0 0 0 1.645z'/></svg>");
}
.modal .content .imgs::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-position: center right;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' role='img' width='1rem' height='1rem' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><path fill='rgb(194, 222, 234)' d='M5.536 21.886a1.004 1.004 0 0 0 1.033-.064l13-9a1 1 0 0 0 0-1.644l-13-9A1 1 0 0 0 5 3v18a1 1 0 0 0 .536.886z'/></svg>");
}

/* HEADER */
header {
    font-size: 1rem;
    height: var(--header-footer-height);
    text-align: center;
    padding: 1rem;
}
header .content {
    height: 100%;
    transform: translateY(-100%);
    opacity: 0;
    transition: opacity var(--header-speed) ease-in-out,
                transform var(--header-speed) ease-in-out;
}
header .logo {
    --logo-size: calc(var(--header-footer-height) - 1rem);
    width: calc(var(--logo-size) * 3);
    height: var(--logo-size);
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

/* PAGES */
.pages {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    scroll-snap-type: inline mandatory;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -ms-overflow-style: none; /* HIDE SCROLLBAR - IE & Edge */
    scrollbar-width: none; /* HIDE SCROLLBAR - FIREFOX */
}
.pages > * {
    scroll-snap-align: start;
}
.pages::-webkit-scrollbar {
    display: none; /* HIDE SCROLLBAR - CHROME, SAFARI, OPERA */
}
.pages .page {
    max-height: calc(100vh - (var(--header-footer-height) * 2));
    min-height: 30rem;
    text-align: center;
    padding: 1rem;
    overflow-y: hidden;
}
.pages .page .menu-home {
    width: 3rem;
    height: 3rem;
    margin-top: 3rem;
    opacity: 0.75;
}

/* PAGE - HOME */
.page-home .content {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.page-home .logo-line {
    --logo-size: 4.5rem;
    /* margin-top: -30%; */
    /* margin-top: calc( - (100vh - 70vh) ); */
    margin-top: -20vh;
    position: relative;
}
.page-home .logo-line .logo {
    width: calc(var(--logo-size) * 3);
    height: var(--logo-size);
    display: block;
}
.page-home .logo-line::before {
    width: 100%;
    height: 2px;
    content: "";
    background: transparent;
    background: -moz-linear-gradient(left, rgba(194, 222, 234, 0) 0%, rgba(194, 222, 234, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(194, 222, 234, 0) 0%, rgba(194, 222, 234, 1) 100%);
    background: linear-gradient(to right, rgba(194, 222, 234, 0) 0%, rgba(194, 222, 234, 1) 100%);
    filter: drop-shadow(0 0 0.25rem rgba(194, 222, 234, 0.75));
    position: absolute;
    bottom: calc(var(--logo-size) / 5.25);
    left: -100%;
    opacity: 0.85;
}
.page-home nav ul {
    font-family: var(--txt-heading-alt);
    font-size: 2rem;
    letter-spacing: 0.25em;
    text-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.1);
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-top: 0.5em;
    position: relative;
}
.page-home nav ul li {
    z-index: 1;
    color: var(--col-brand-blue);
    color: transparent;
    position: relative;
    cursor: pointer;
    /* transition: transform var(--hover-speed) ease-out; */
}
.page-home nav ul li a {
    z-index: 2;
    color: var(--col-brand-blue);
    position: relative;
}
.page-home nav ul li a:hover,
.page-home nav ul li a:focus {
    text-decoration: none;
}
.page-home .news {
    width: 100%;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 1rem;
    position: relative;
}
.page-home .news p {
    width: max-content;
    margin: 0;
    margin-inline: auto;
    position: relative;
}
.page-home .news p a {
    transition: color var(--hover-speed) ease-out;
}
.page-home .news p a:hover,
.page-home .news p a:focus {
    color: #ffffff;
    text-decoration: none;
}
.page-home .news p::before {
    font-size: 1.5em;
    content: "\002A";
    position: absolute;
    top: -0.25em;
    left: -0.5em;
}

/* PAGE - MUSIC */
.page-music .songs {
    width: 100%;
    text-align: left;
    position: relative;
}
.page-music .songs .song {
    margin-top: 5em;
}
.page-music .songs .song .img {
    width: 100%;
    display: block;
    position: relative;
}
.page-music .songs .song .img .art {
    z-index: 2;
    width: 75%;
    padding-left: 1.5em;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.page-music .songs .song .img .back {
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 4;
    object-fit: cover;
    border-radius: var(--bor-rad);
    filter: hue-rotate(20deg);
    display: block;
    position: relative;
}
.page-music .songs .song .copy {
    z-index: 99;
    width: 100%;
    padding: 1em;
}
.page-music .songs .song .copy h2 {
    margin: 0;
}
.page-music .songs .song .copy h3 {
    font-size: 1em;
}
.page-music .songs .song .copy .buttons {
    width: 100%;
    text-align: right;
    position: relative;
}
.page-music .songs .song .copy .buttons button {
    width: 2em;
    height: 2em;
    font-size: 1.15em;
    background-color: var(--col-brand-purple-fade);
    border: var(--col-brand-blue) solid 0.1em;
    border-radius: 50%;
    outline: none;
    padding: 0;
    margin-inline: 0.25em;
    display: inline-block;
    position: relative;
    opacity: 0.75;
    cursor: pointer;
}
.page-music .songs .song .copy .buttons button:last-child {
    margin-right: 0;
}
.page-music .songs .song .copy .buttons button svg {
    width: 1em;
    height: 1em;
    fill: var(--col-brand-blue);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page-music .songs .song .copy .buttons .btn-play {
    font-size: 2em;
}
.page-music .songs .song .copy .buttons .btn-play svg {
    fill: none;
    stroke: var(--col-brand-blue);
    left: 55%;
}
.page-music .songs .song .copy .buttons .btn-apple svg {
    width: 1.25em;
    height: 1.25em;
    left: 48%;
    top: 47%;
}
.page-music .songs .song .copy .buttons .btn-amazon svg {
    width: 1.25em;
    height: 1.25em;
}
.page-music .songs #song-shout .img .back {
    filter: hue-rotate(120deg);
}
.page-music .songs #song-saveme .img .back {
    filter: hue-rotate(170deg);
}
.page-music .songs #song-saveme .img .art {
    width: 72%;
}
.page-music .songs #song-gravity .img .back {
    filter: hue-rotate(300deg);
}
.page-music .songs #song-gravity .img .art {
    width: 100%;
}
.page-music .songs #song-feelit .img .back {
    filter: hue-rotate(60deg);
}
.page-music .songs #song-feelit .img .art {
    width: 98%;
}

/* PAGE - EVENTS */
.page-events .events {
    width: 100%;
    text-align: center;
    position: relative;
}
.page-events .events .event {
    width: 100%;
    font-size: 1rem;
    padding: 1em 0;
    margin-top: 2em;
    position: relative;
}
.page-events .events .event > div {
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.page-events .events .event .icon {
    width: 4em;
    height: 4em;
}
.page-events .events .event .icon svg {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page-events .events .event .copy {
    width: 75%;
    text-align: left;
    padding-right: 1em;
}
.page-events .events .event .copy a:hover,
.page-events .events .event .copy a:focus {
    text-decoration: none;
}
.page-events .events .event .copy h2 {
    font-size: 1.5em;
    margin-bottom: 0.25em;
}
.page-events .events .event .copy h3 {
    font-size: 1.15em;
}
.page-events .events .event .copy p {
    font-size: 1em;
    margin-block: 0.5em;
}
.page-events .events .event .date {
    width: 100%;
    text-align: right;
    padding-inline: 1em;
}
.page-events .events .event .date svg {
    width: 2em;
    height: 2em;
    position: absolute;
    bottom: -1.5em;
    right: 1em;
    opacity: 0.25;
}
.page-events .events .event .date h4 {
    font-size: 1.5rem;
    line-height: 1em;
    padding-top: 0.25em;
    margin: 0;
}
.page-events .events .concluded .icon,
.page-events .events .concluded .copy,
.page-events .events .concluded .date {
    opacity: 0.5;
}

/* PAGE - MEDIA */
.page-media .media-fan {
    width: 100%;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 7rem 0;
    position: relative;
}
.page-media .media-fan:first-child {
    margin-top: 2rem;
}
.page-media .media-fan::before {
    width: 80%;
    height: 50%;
    content: "";
    background-color: var(--col-brand-purple);
    background: var(--gra-purple-moz);
    background: var(--gra-purple-kit);
    background: var(--gra-purple);
    border-radius: var(--bor-rad-sml);
    padding: 0.25em;
    padding-top: 2rem;
    position: absolute;
    bottom: -3em;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.25;
}
.page-media .media-fan::after {
    width: 80%;
    height: auto;
    content: attr(data-before);
    font-family: var(--txt-heading-alt);
    font-size: 1.5rem;
    color: var(--col-brand-blue);
    text-shadow: 0 0 0.25rem rgba(194, 222, 234, 0.75);
    border-radius: var(--bor-rad-sml);
    border: rgba(82, 21, 76, 0.25) solid 4px;
    box-shadow: 0 0 1.5em rgba(82, 21, 76, 0.35);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    padding: 0.25em;
    padding-top: 2rem;
    position: absolute;
    bottom: -2.75em;
    left: 50%;
    transform: translateX(-50%);
}
.page-media .media-fan li {
    z-index: 1;
    width: 30%;
    border-radius: var(--bor-rad-sml);
    box-shadow: 0 0 1.5em rgba(82, 21, 76, 0.35),
                inset 0 0 0.25rem rgba(110, 50, 109, 1);
    position: absolute;
    overflow: hidden;
    transform-origin: bottom;
    cursor: pointer;
}
.page-media .media-fan li img {
    width: 100%;
    aspect-ratio: 4 / 4;
    object-fit: cover;
    object-position: top;
    display: block;
    position: relative;
}
.page-media .media-fan li:nth-child(3) {
    z-index: 3;
    width: 50%;
    margin: 0 auto;
    display: block;
    position: relative;
}
.page-media .media-fan li:nth-child(1) {
    top: -5%;
    left: 5%;
    transform: rotate(-10deg);
}
.page-media .media-fan li:nth-child(2) {
    z-index: 2;
    bottom: -10%;
    left: 5%;
    transform: rotate(-10deg);
}
.page-media .media-fan li:nth-child(4) {
    top: -5%;
    right: 5%;
    transform: rotate(10deg);
}
.page-media .media-fan li:nth-child(5) {
    z-index: 2;
    bottom: -10%;
    right: 5%;
    transform: rotate(10deg);
}

/* PAGE - ABOUT */
.page-about .about {
    text-align: left;
    border: none;
    padding: 0;
    margin-block: 3rem;
}
.page-about .about::before {
    display: none;
    visibility: hidden;
}
.page-about .about .img-bottom {
    z-index: 2;
    width: 100%;
    border-top-left-radius: var(--bor-rad);
    border-top-right-radius: var(--bor-rad);
    display: block;
    position: relative;
}
.page-about .about .img-top {
    z-index: 2;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page-about .about .img-top img {
    width: 100%;
    display: block;
}
.page-about .about .img-top img:first-child {
    visibility: hidden;
}
.page-about .about .img-top img:last-child {
    position: absolute;
    top: -100%;
    left: 0;
}
.page-about .about .copy {
    z-index: 3;
    width: 100%;
    background: #110b0f;
    background: -moz-linear-gradient(top, #110b0f 0%, #3f0738 50%);
    background: -webkit-linear-gradient(top, #110b0f 0%, #3f0738 50%);
    background: linear-gradient(to bottom, #110b0f 0%, #3f0738 50%);
    border-bottom-left-radius: var(--bor-rad);
    border-bottom-right-radius: var(--bor-rad);
    padding: 0 1.5rem;
    padding-bottom: 3.5rem;
    margin-top: -4rem;
    position: relative;
}
.page-about .about .copy .logo {
    --logo-size: 4rem;
    width: calc(var(--logo-size) * 3);
    height: var(--logo-size);
    margin-inline: auto;
    display: block;
}
.page-about .about .awards {
    z-index: 3;
    width: 85%;
    border-radius: var(--bor-rad-sml);
    box-shadow: 0 0 1.5em rgba(82, 21, 76, 0.35);
    padding-block: 1rem;
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
}
.page-about .about .awards::before {
    width: 100%;
    height: 100%;
    content: "";
    background: #552651;
    background: -moz-linear-gradient(top, #552651 0%, #735b86 100%);
    background: -webkit-linear-gradient(top, #552651 0%, #735b86 100%);
    background: linear-gradient(to bottom, #552651 0%, #735b86 100%);
    position: absolute;
    top: 0;
    left: 0;
}
.page-about .about .awards .wrapper {
    width: 100%;
    text-align: center;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 33.3%;
    position: relative;
    transition: transform var(--awards-scroll-speed) ease-in-out;
}
.page-about .about .awards .wrapper img {
    width: 100%;
    display: block;
    padding-inline: 0.5rem;
}

/* FOOTER */
footer {
    height: var(--header-footer-height);
    font-size: 0.65rem;
    color: var(--col-brand-blue);
    text-align: center;
    padding-inline: 1rem;
}
footer .social {
    font-size: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
footer .social li {
    margin-inline: 0.5em;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity var(--hover-speed) ease-out;
}
footer .social li svg {
    width: 1em;
    height: 1em;
}
footer p {
    width: max-content;
    line-height: 1.45em;
    text-transform: capitalize;
    margin: 0;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
}
footer p a:hover,
footer p a:focus {
    color: #ffffff;
    text-decoration: none;
}

/* --------------- TABLET --------------- */
@media screen and (min-width: 48rem) {

    /* PAGE - MUSIC */
    .page-music .songs .song .img .art {
        height: 110%;
    }

    /* PAGE - MEDIA */
    .page-media .media-fan {
        width: 75%;
        margin-inline: auto;
    }

    /* PAGE - ABOUT */
    .page-about .about {
        width: 90%;
        margin-inline: auto;
        margin-top: 7rem;
        margin-bottom: 4rem;
    }
    .page-about .about .awards {
        width: 65%;
        border-radius: var(--bor-rad);
        bottom: -4rem;
        left: 50%;
    }
    
}

/* --------------- DESKTOP --------------- */
@media screen and (min-width: 83rem) {

    /* VARIABLES */
    :root {
        /* HEADER & FOOTER */
        --header-footer-height: 7rem;

        /* BACKGROUND */
        --bck-blur: 3rem;
    }

    /* SETUP */
    body {
        width: 100vw; /* force width / stop scrollbar changing width */
    }
    html {
        overflow-x: hidden; /* because body width is forced, hide X scrollbar */
    }

    /* COMMON */
    .heading,
    h1,
    h2,
    h3,
    h4 {
        font-size: 2rem;
    }
    .halt {
        font-size: 2.5rem;
    }
    .hideFromDesktop {
        width: 0;
        height: 0;
        display: none !important;
        visibility: hidden !important;
    }
    .hideFromMobile {
        width: auto;
        height: auto;
        display: inline-block;
        visibility: visible;
    }

    /* MODAL */
    .modal .content {
        border-radius: var(--bor-rad);
    }
    .modal .content iframe {
        border-radius: var(--bor-rad);
    }

    /* HEADER */
    header nav {
        height: 100%;
        padding-top: calc(var(--header-footer-height) / 3);
        position: relative;
    }
    header nav:first-child {
        margin-right: calc(var(--header-footer-height) * 4);
    }
    header nav ul {
        font-family: var(--txt-heading-alt);
        font-size: 1.5rem;
        letter-spacing: 0.25em;
        text-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.1);
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;
        position: relative;
    }
    header nav ul li {
        z-index: 1;
        color: transparent;
        -webkit-text-stroke: 1px var(--col-brand-blue);
        margin-inline: 0.5em;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        opacity: 0.75;
        cursor: pointer;
        transition: opacity var(--hover-speed) ease-out;
    }
    header nav ul li a {
        z-index: 2;
        color: transparent;
        position: relative;
        transition: color var(--hover-speed) ease-out;
    }
    header nav ul li a:visited {
        color: var(--col-brand-blue);
    }
    header nav ul li a:hover,
    header nav ul li a:focus,
    header nav ul .selected a {
        color: var(--col-brand-blue);
        text-decoration: none;
    }
    header nav ul li:hover,
    header nav ul li:focus,
    header nav ul .selected {
        opacity: 1;
    }

    /* PAGES */
    .pages .page {
        padding: 2rem;
    }
    .pages .page .menu-home {
        opacity: 0.5;
        transition: opacity var(--hover-speed) ease-out;
    }
    .pages .page .menu-home:hover,
    .pages .page .menu-home:focus {
        opacity: 1;
    }

    /* PAGE - HOME */
    .page-home .logo-line {
        --logo-size: 7rem;
    }
    .page-home .logo-line::before {
        bottom: calc(var(--logo-size) / 5);
    }
    .page-home nav ul {
        font-size: 3rem;
    }
    .page-home nav ul li span {
        display: block;
        position: relative;
        transition: transform var(--hover-speed) ease-out;
    }
    .page-home nav ul li:hover span,
    .page-home nav ul li:focus span {
        transform: scale(1.1);
    }
    .page-home nav ul li span::before,
    .page-home nav ul li span::after {
        z-index: 1;
        width: 100%;
        content: attr(data-before);
        color: var(--col-brand-blue);
        text-align: center;
        filter: drop-shadow(0 0 0.25rem rgba(194, 222, 234, 0.75));
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .page-home nav ul li span::before {
        transition: opacity var(--hover-speed) ease-out;
        opacity: 0;
    }
    .page-home nav ul li span::after {
        transform: scaleX(0);
        transition: opacity var(--hover-speed) ease-out, transform 0;
        opacity: 1;
    }
    .page-home nav ul li:hover span::before,
    .page-home nav ul li:focus span::before {
        opacity: 1;
    }
    .page-home nav ul li:hover span::after,
    .page-home nav ul li:focus span::after {
        transform: scaleX(1.5);
        opacity: 0;
        transition: opacity var(--hover-speed) ease-out, transform var(--hover-speed) ease-out;
    }
    .page-home .news {
        font-size: 1rem;
    }

    /* PAGE - MUSIC */
    .page-music .songs {
        width: 80%;
        margin-inline: auto;
    }
    .page-music .songs .song {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 45% 50%;
        gap: 2rem;
        transition: transform var(--hover-speed) ease-out;
    }
    .page-music .songs .song:hover,
    .page-music .songs .song:focus {
        transform: scale(1.05);
    }
    .page-music .songs .song .img .art {
        right: -10%;
        left: auto;
        transform: none;
    }
    .page-music .songs .song .copy h3 a {
        transition: color var(--hover-speed) ease-out;
    }
    .page-music .songs .song .copy h3 a:hover,
    .page-music .songs .song .copy h3 a:hover {
        color: #ffffff;
        text-decoration: none;
    }
    .page-music .songs .song .copy .buttons {
        position: absolute;
        bottom: 1em;
        right: 1em;
    }
    .page-music .songs .song .copy .buttons button {
        font-size: 1.25rem;
        margin-inline: 0.4em;
        opacity: 0.5;
        transition: transform var(--hover-speed) ease-out,
                    opacity var(--hover-speed) ease-out;
    }
    .page-music .songs .song .copy .buttons button:hover,
    .page-music .songs .song .copy .buttons button:focus {
        opacity: 1;
        transform: scale(1.05);
    }
    .page-music .songs .song .copy .buttons .btn-play {
        font-size: 2.25em;
    }

    /* PAGE - EVENTS */
    .page-events .events .event {
        padding: 2em 3em;
    }
    .page-events .events .event .icon {
        width: 7em;
        height: 7em;
    }
    .page-events .events .event .copy {
        padding-inline: 1rem;
    }
    .page-events .events .event .copy a {
        transition: color var(--hover-speed) ease-out;
    }
    .page-events .events .event .copy h3 {
        font-size: 1.25em;
    }
    .page-events .events .event .date {
        width: 7em;
        height: 7em;
        text-align: center;
        padding: 0;
    }
    .page-events .events .event .date svg {
        width: 60%;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.5;
    }
    .page-events .events .event .date h4 {
        font-size: 2em;
    }
    .page-events .events .event .date h4 span {
        display: block;
    }

    /* PAGE - MEDIA */
    .page-media .media-fan {
        width: 100%;
    }
    .page-media .media-fan::before {
        width: 60%;
        border-radius: var(--bor-rad);
        bottom: -3.5em;
        transition: opacity var(--hover-speed) ease-out;
    }
    .page-media .media-fan::after {
        width: 60%;
        font-size: 2rem;
        border-radius: var(--bor-rad);
        bottom: -2.25em;
        transition: color var(--hover-speed) ease-out;
    }
    .page-media .media-fan li {
        width: 19%;
        border-radius: var(--bor-rad);
        display: inline-block !important;
        vertical-align: bottom;
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transition: transform var(--hover-speed) ease-out;
    }
    .page-media .media-fan li::before {
        z-index: 1;
        width: 100%;
        height: 100%;
        content: "";
        background-color: rgba(110, 50, 109, 0.25);
        border-radius: var(--bor-rad);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
        mix-blend-mode:darken;
        transition: opacity var(--hover-speed) ease-out;
    }
    .page-media .media-fan li:hover::before {
        opacity: 0;
    }
    .page-media .media-fan li:nth-child(1) {
        z-index: 1;
        transform: translate(50%, 0)
                    rotate(-6deg);
    }
    .page-media .media-fan li:nth-child(2) {
        z-index: 2;
        width: 21%;
        margin-left: -4%;
        transform: translate(30%, -0.5rem)
                    rotate(-3deg);
    }
    .page-media .media-fan li:nth-child(3) {
        width: 24%;
        margin-left: -4%;
        transform-origin: center;
    }
    .page-media .media-fan li:nth-child(4) {
        z-index: 2;
        width: 21%;
        margin-left: -4%;
        transform: translate(-30%, -0.5rem)
                    rotate(3deg);
    }
    .page-media .media-fan li:nth-child(5) {
        z-index: 1;
        margin-left: -3%;
        transform: translate(-50%, 0)
                    rotate(6deg);
    }
    .page-media .media-fan:hover::before {
        opacity: 0.5;
    }
    .page-media .media-fan:hover::after {
        color: #ffffff;
    }
    .page-media .media-fan:hover li:nth-child(1) {
        transform: translateY(1rem)
                    rotate(-10deg);
    }
    .page-media .media-fan:hover li:nth-child(2) {
        transform: rotate(-6deg);
    }
    .page-media .media-fan:hover li:nth-child(4) {
        transform: rotate(6deg);
    }
    .page-media .media-fan:hover li:nth-child(5) {
        transform: translateY(1rem)
                    rotate(10deg);
    }
    .page-media .media-fan li:nth-child(1):hover {
        transform: translateY(1rem)
                    rotate(-10deg)
                    scale(1.1);
    }
    .page-media .media-fan li:nth-child(2):hover {
        transform: rotate(-6deg)
                    scale(1.1);
    }
    .page-media .media-fan li:nth-child(3):hover {
        transform: scale(1.1);
    }
    .page-media .media-fan li:nth-child(4):hover {
        transform: rotate(6deg)
                    scale(1.1);
    }
    .page-media .media-fan li:nth-child(5):hover {
        transform: translateY(1rem)
                    rotate(10deg)
                    scale(1.1);
    }

    /* PAGE - ABOUT */
    .page-about .about {
        width: 80%;
        margin-inline: auto;
        margin-top: 8rem;
        margin-bottom: 5rem;
    }
    .page-about .about .copy {
        font-size: 1.1rem;
        padding: 0 3rem;
        padding-bottom: 5rem;
        margin-top: -6rem;
    }
    .page-about .about .copy .logo {
        --logo-size: 6rem;
    }
    .page-about .about .awards {
        width: 65%;
        border-radius: var(--bor-rad);
        bottom: -4.5rem;
        left: 50%;
    }

    /* FOOTER */
    footer {
        font-size: 0.75rem;
    }
    footer .social li:hover,
    footer .social li:focus {
        opacity: 1;
    }
    footer p {
        top: 55%;
    }
    footer p a {
        transition: color var(--hover-speed) ease-out;
    }

}