img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

body {
    scroll-behavior: smooth;
    background-color: #fff;
}

a {
    color: inherit;
    text-decoration: underline 1px black;
    -webkit-text-decoration: underline 1px black;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    cursor:pointer;
}
a:hover {
    color:inherit;
    text-decoration: none;
}

i {
    font-style: italic;
}


/*  FONTS  */
@font-face {
    font-family: "Century Condensed";
    src: url(fonts/century-condensed/Century\ CondBook\ Regular.otf);
}
@font-face {
    font-family: "Century Condensed";
    font-weight: bold;
    src: url(fonts/century-condensed/Century\ Condensed\ Bold.ttf);
}
@font-face {
    font-family: "Century Condensed";
    font-weight: bold;
    font-style: italic;
    src: url(fonts/century-condensed/Century\ Condensed\ Bold\ Italic.ttf);
}
@font-face {
    font-family: "Century Condensed";
    font-style: italic;
    src: url(fonts/century-condensed/Century\ Condensed\ Italic.ttf);
}

h1,h2,h3,h4,h5,h6,p {
    font-family: "Century Condensed";
}



* {
    --awhite: #E9EBF8;
    --adark: #523F38;
    --ablack: #0E273C;
    --aprimary: #b8336a;
    --anaccent: #8075FF;

    --dottedBackgroundSize: 2px;
    --popoutStripeR: 255;
    --popoutStripeG: 0;
    --popoutStripeB: 0;
    --popoutStripeMaxOpacity: 1.0;
}

@property --bgStripeAngle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 45deg;
}

@property --popoutStripe1Color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8075FF;
}
@property --popoutStripe2Color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8075FF;
}
@property --popoutStripe3Color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8075FF;
}
@property --popoutStripe4Color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8075FF;
}
@property --popoutStripe5Color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8075FF;
}
@property --popoutStripe6Color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8075FF;
}

/* Define the rough paper background class */
.rough-paper-bg {
    position: relative;
}

/* Create the dot pattern and noise effect */
.rough-paper-bg::before,
.rough-paper-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    /* Place below the content */
}

/* Create the dot pattern */
.rough-paper-bg::before {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.15) var(--dottedBackgroundSize), transparent var(--dottedBackgroundSize));
    background-size: calc(5 * var(--dottedBackgroundSize)) calc(5 * var(--dottedBackgroundSize));
    /* Adjust the size as needed */
    opacity: 0.2;
    /* Adjust the opacity for desired effect */
    z-index: -2;
}

/* Create the noise effect */
.rough-paper-bg::after {
    background:
        /* BASE STRIPES*/
        repeating-linear-gradient(var(--bgStripeAngle), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.075) var(--dottedBackgroundSize), transparent var(--dottedBackgroundSize), transparent calc(5 * var(--dottedBackgroundSize))),
        repeating-linear-gradient(calc(-1 * var(--bgStripeAngle)), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.075) var(--dottedBackgroundSize), transparent var(--dottedBackgroundSize), transparent calc(5 * var(--dottedBackgroundSize)));
    opacity: 0.1;
    z-index: -1;
    animation: bgStripesAngle 100s ease-in-out infinite;
}

@keyframes bgStripesAngle {
    from, to {
        --bgStripeAngle: 20deg;
    }
    50% {
        --bgStripeAngle: 70deg;
    }
}


/* NAV BAR */
nav {
    z-index: 10000;
    position: fixed;
    margin-top: -75px;
    margin-left: 10vw;
    width: 80vw;
    height: 75px;
    background-color: rgb(245,245,245);
    border-radius: 0px 0px 2.5vw 2.5vw;
    overflow: hidden;
}
nav .bg {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav .bg div {
    width: 100%;
    height: 1%;
    background-color: black;
    opacity: 0.2;
}
body {
    padding-top: 75px;
}


/* CUSTOM "BOOTSTRAP" CLASSES */
.col {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    gap: 50px;
}
.row {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    gap: 5%;
}
.flex-center {
    align-items: center;
    justify-content: center;
}
.col.half {
    max-width: 50%;
}

/* HEADING */
.heading {
    position: relative;
    font-size: 7rem;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
}
.heading .col:not(.row .col) {
    margin: 5%;
}
.heading .name {
    justify-content: left;
}
.heading .name p:first-of-type {
    font-weight: bold;
    transform: translateY(50%);
    opacity: 0.0;
    animation: move-to 2.5s ease-out forwards;
}
.heading .name p:last-of-type {
    font-style: italic;
    font-size: 10rem;
    margin-top: -1rem;
    margin-bottom: -1rem;
    transform: translateY(-25%);
    opacity: 0.0;
    animation: move-to 2.5s ease-out forwards;
}

.heading .title {
    position: relative;
    /* width: 100vw; */
}

.heading .title p:first-of-type {
    transform: translateY(-25%);
    opacity: 0.0;
    animation: move-to 2.5s 1s ease-in-out forwards;
    font-size: 3rem;
}
.heading .title p:last-of-type {
    opacity: 0.0;
    transform: translateY(50%);
    animation: move-to 2.5s 1s ease-in-out forwards;
}

@keyframes move-to {
    to { transform: translateY(0px); opacity: 1; }
}

.heading img {
    padding: 7.5% 5% 0px 0px;
    max-width: 600px;
}

.heading .desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 1.5rem;
    line-height: 150%;
    height: 100%;
    max-width: 600px;
}

.music-staff {
    position: absolute;
    left: 0;  /* Start from the left edge of the parent div */
    right: -100vw;  /* Extends beyond the right edge of the viewport */
    height: 125px;  /* Adjust height to fit the desired staff height */
    margin-top: 5px;  /* Space between the text and the staff lines */
    z-index: -1;  /* Keep the lines behind the text */
}

.music-staff::before {
    content: "";
    position: absolute;
    top: 0;
    /* left: 0; */
    right: -5vw;
    width: 200vw;  /* Extend far past the parent container */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0.1;

    /* Create the staff lines */
    background: linear-gradient(
        to bottom,
        black 0%,
        black 2%,
        transparent 2%,
        transparent 20%,
        black 20%,
        black 22%,
        transparent 22%,
        transparent 45%,
        black 45%,
        black 47%,
        transparent 47%,
        transparent 70%,
        black 70%,
        black 72%,
        transparent 72%,
        transparent 92%,
        black 92%,
        black 94%,
        transparent 94%
    );
}


.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5%;
    margin: 2%;
}

.socials img {
    padding: 0 !important;
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
}

.socials p {
    font-size: 4rem;
    transform: scaleX(50%);
    opacity: 0.2;
}

.socials a {
    transition: 0.2s;
}

.socials a:hover {
    scale: 110%;
}

/* ABOUT SECTION */
.about-section {
    padding: 5%;
}
.about-section img {
    max-width: 600px;
    width: 100%;
    padding: 0 5% 0 0;
}
.about-section .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 150%;
    height: 100%;
}

/* PIECES */
.compositions {
    text-align: center; width: 100vw; font-size: 5rem; padding: 2% 0; font-weight: bold;
}

.piece-holder {
    display: flex;
    flex-direction: column;

    width: 100%;
}
.piece {
    width: 100%;
    height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(black 0%, hsl(0, 0%, 27%) 70%, hsl(0, 4%, 24%) 72%, hsl(14, 0%, 11%) 100%);

    color: white;
    font-size: 5rem;
    text-decoration: none;

    cursor: pointer;
    
    transition: 0.2s;
}
.piece.hovered {
    color: white;
    text-decoration: none;
}
.piece:active {
    filter: brightness(50%);
}
.piece h3 {
    transition: all 1s ease-in-out;
    transform: scale(100%);
}
.piece.hovered h3:not(.content h3) {
    transform: scale(110%);
    text-shadow: 0px 0px 10px black;
    text-shadow: 0px 0px 5px black;
}
.piece:active h3 {
    transition: 0.2s;
    transform: scale(90%);
}
.piece canvas {
    position: absolute;
}
.piece.canvas-behind * {
    z-index: 100;
}
.piece.canvas-behind canvas {
    z-index: 99;
}

.piece .bg {
    position: absolute;
    width: 100%;
    height: 300px;

    object-fit: cover;

    z-index: 0;

    transition: 0.5s;
}

.piece .content {
    position: absolute;
    height: 0px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    opacity: 0;
    overflow: hidden;

    z-index: 100;
}

.piece .content img {
    margin: 10% 5vw 10% 10vw;
    max-width: 25vw;
    box-shadow: 0px 0px 20px black;
}

.piece .content div {
    display: flex;
    flex-direction: column;
    padding: 5vw 10% 5vw 5%;
}

.piece .content div div {
    width: 50vw;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0px 0px 5% 0px !important;
}

.piece .content div p {
    flex: 1;
}

.piece .content div div h3 {
    max-width: 350px;
}
.piece .content div div div {
    max-width: 100px;

    padding-bottom: 2% !important;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.piece .content h3 {
    opacity: 1 !important;
    font-size: 6rem;
}
#hues.piece .content h3 {
    font-size: 5rem;
    max-width: 550px;
}
.piece .content .ensemble-subtitle {
    font-size: 2rem;
}
.piece .content p {
    font-size: 1.2rem;
    line-height: 150%;
}
.piece .content a {
    margin: 5% 0px 5% 0px;
    font-size: 1.5rem;
    text-decoration: underline white 1px;
    -webkit-text-decoration: underline white 1px;
    text-underline-offset: 5px;
}
.piece .content a:hover {
    text-decoration: none;
    -webkit-text-decoration: none;
}

/* WHEN OPENED */
.piece.opened {
    height: 80vh;
    background: linear-gradient(hsl(0, 0%, 3%) 0%, hsl(0, 0%, 10%) 5%, hsl(0, 0%, 10%) 95%, hsl(0, 0%, 3%) 100%);
    cursor:default;
}
.piece.opened .bg {
    height: auto;
    max-height: 500px;
    filter: blur(100px);
}

.piece.opened:active {
    filter: none;
}
.piece.opened:active h3 {
    transform: none;
}

.piece.opened h3 {
    transition: 0.2s;
    opacity: 0;
}

.piece.opened canvas {
    z-index: 99;
    opacity: 0.2;
    transform: scaleX(-100%);
}

.piece.opened .content {
    height: 80vh;
    width: 100%;
    opacity: 1;
}

/* BACKGROUND FORMATTING */
.bg.zero {
    z-index: 0;
}
.bg.one {
    z-index: 1;
}
.bg.two {
    z-index: 2;
}
.bg.three {
    z-index: 3;
}


/* PIECE-SPECIFIC BACKGROUNDS */
/* ========================== */


/* ALPINE SUNRISE */
#alpine .bg.zero {
    opacity: 0;
}
#alpine .bg.one {
    filter: saturate(0%) brightness(150%);
}
#alpine .bg.two {
    transition: 5s;
    opacity: 0;
}

#alpine.hovered .bg.zero, #alpine.opened .bg.zero {
    opacity: 1;
}
#alpine.hovered .bg.two, #alpine.opened .bg.two {
    opacity: 1;
}
#alpine.opened .bg.one {
    filter: saturate(200%) brightness(250%) blur(100px);
}


/* TWILIGHT REQUIEM */
#twilight {
    
}
#twilight {
    position: relative;
    overflow: hidden;
}
#twilight .bg {
    transition: 1s;
    filter: saturate(0%) brightness(20%);
    object-fit: cover; /* Ensures the image covers the container */
}
#twilight.hovered .bg {
    filter: none;
}
#twilight.opened .bg {
    filter: blur(50px) brightness(75%) saturate(200%);
    /* Override the general .piece.opened .bg rule */
    height: 100%;
    max-height: none;
}

#twilight .bg.one {
    scale: 115%;
    transform: translateX(-10%);
}
#twilight.hovered .bg.one {
    transition: 1s, scale 1s ease, transform 10s ease-out;
    scale: 120%;
    transform: translateX(10%);
}
#twilight .bg.two {
    scale: 100%;
    transform: translateX(0);
    bottom: 5%;
}
#twilight.hovered .bg.two {
    transition: 1s, scale 1s ease, transform 15s ease-out;
    scale: 110%;
    transform: translateX(-5%);
}
#twilight.hovered .bg.three {
    transform: scale(115%);
}

#twilight .bg.three {
    object-position: bottom;
}




/* ALL THE BRIGHTEST HUES */
#hues.opened {
    text-shadow: 0px 0px 5px black;
}

#hues .image {
    transition: 1s;
    filter: saturate(0%) brightness(20%);
}

#hues.hovered .image {
    filter: none;
}

#hues.hovered .bg {
    animation: hue-rotate 10s infinite linear forwards;
    transition: 1s;
}

#hues.opened .bg {
    animation: hue-rotate-2 10s infinite linear forwards;
}

#hues.opened .image {
    filter: blur(50px);
}

@keyframes hue-rotate {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}
@keyframes hue-rotate-2 {
    from { filter: hue-rotate(0deg) saturate(200%); }
    to { filter: hue-rotate(360deg) saturate(200%); }
}


#sunset h3 {
    max-width: 800px;
    font-size: 5rem;
    text-align: center;
}

#sunset {
    position: relative;
    overflow: hidden;
}

#sunset .bg {
    object-fit: contain;
    object-fit: cover;
}

/* The foreground-div is a custom element for the parallax effect */
#sunset .bg#foreground-div {
    transition: 2s ease-in-out;
    transform: scale(120%) translateY(-5%);
    filter: saturate(0%) brightness(20%);
}
#sunset.hovered .bg#foreground-div {
    transition: 5s ease-in-out transform, 1s ease-in-out filter;
    transform: scale(155%) translateY(-15%);
    filter: none;
}

#sunset #train {
    transition: 2s ease-in-out;
    transform: translate(-6%,5%);
    filter: saturate(0%) brightness(20%);
}
#sunset.hovered #train {
    transition: 10s ease-out, 1s ease-in-out filter;
    transform: translate(0%,0%);
    filter: none;
}

#sunset .bg.zero {
    transition: 2s ease-in-out;
    transform: scale(100%);
    filter: saturate(0%) brightness(20%);
}
#sunset.hovered .bg.zero {
    transition: 5s ease-in-out, 1s ease-in-out filter;
    transform: scale(105%) translateY(-5%);
    filter: none;
}

#sunset.opened .bg.zero {
    transform: scale(120%);
    filter: blur(50px) brightness(75%) saturate(200%);
}

#sunset.opened #train {
    filter: opacity(0.0);
}

/* ========================== */


.footer {
    padding: 5%;
}

.footer div:not(.spacer) {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* padding: 5%; */
}

.footer .logo {
    width: 40%;
    max-width: 100px;
    height: auto;
    filter: brightness(30%);
}

.footer .cat {
    width: 40%;
    max-height: 100px;
}

.footer .spacer {
    width: 100%;
}

p.copyright {
    width: 100%;
    text-align: right;
    font-size: 0.7rem;
    color: #555;
}


/* "MOBILE" */
@media screen and (max-width: 960px) {
    .compositions {
        font-size: 12.5vw;
        margin-bottom: 5%;
    }
    .piece {
        height: 600px;
        position: relative;
    }
    .piece.opened {
        height: 90vh;
    }
    .piece .bg:not(.piece#hues .image) {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .piece#hues .image {
        height: 100% !important;
        width: 100% !important;
    }
    .piece h3 {
        text-align: center;
        line-height: 125%;
        margin: 0 5%;
    }
    .piece .content {
        flex-direction: column;
        gap: 5%;
    }
    .piece .content div {
        padding: 5% 12.5%;
        gap: 7.5%;
    }
    .piece .content p {
        font-size: 1rem;
    }
    .piece .content div div {
        display:none;
    }
    .piece .content img {
        margin: 2%;
        width: auto;
        height: 40vh;
        max-width: none;
    }
    #sunset h3 {
        font-size: 4rem;
    }

    #sunset #train {
        transform: translate(0%,0%);
    }

    .footer div {
        align-items: center;
        justify-content: center;
    }

    .footer .logo {
        width: 90%;
    }

    .footer .cat {
        display: none;
    }

    .about-section .col.half {
        max-width: 100%;
    }
    .about-section img {
        padding: 0;
    }
}

/* Large desktop */
@media screen and (min-width: 1500px) {
    .under-large-desktop {
        display: none;
    }
    .large-desktop {
        display: block;
    }
}

/* Desktop and under */
@media screen and (max-width: 1500px) {
    body {
        padding-top: 15px;
    }
}

/* Tablet and below */
@media screen and (max-width: 1100px) {
    .column-on-sm {
        flex-direction: column;
    }
    .about-section .col.half {
        max-width: 100%;
    }
}




@media screen and (max-width: 768px) {

    .row {
        justify-content: center !important;
        margin-right: 0;
    }

    .music-staff {
        height: 75px;
    }
    .music-staff::before {
        opacity: 0.2;
    }

    .heading {
        font-size: 12vw;
    }
    .heading img {
        padding: 5% 0 0 0;
    }
    .about-section img {
        padding: 0;
    }
    .heading .name p:first-of-type {

    }
    .heading .name p:last-of-type {
        font-size: 15vw;
        margin-top: -1rem;
        margin-bottom: -1rem;
    }

    .socials {
        margin: 15% 5% 5% 5%;
    }
    
}