:root {
    --16px : 1rem;
    --20px : 1.25rem;
    --56px : 3.5rem;

    --36px : 2.25rem;
    --128px : 8rem; 

    /*slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize*/

/*preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]*/
    --preferredValue-p: calc(0.917rem + 0.0037vw * 100);
    --preferredValue-h2: calc(0.926rem + 0.0144vw * 100);
    --preferredValue-h1: calc(1.9993rem + 0.0667vw * 100);

    
    --dynamic-size-p: clamp(var(--16px), var(--preferredValue-p), var(--20px));
    --dynamic-size-h2: clamp(var(--20px), var(--preferredValue-h2), var(--36px));
    --dynamic-size-h1: clamp(var(--56px), var(--preferredValue-h1), var(--128px));
    
    --ExtraLight: 100;
    --Light: 300;
    --SemiBold: 500;
    --Bold : 600;
    --Black: 800;

    --offset : 2.5em;
    

    --p-abs : absolute;
    --p-rel : relative;

    --animation-timing: 180ms ease-in-out;
    --height-fix: calc(100vh + 2.5em);
    --cell-calc-x: calc(94%/12);
    --cell-calc-y: calc(91%/12);


}

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

html {
    scroll-behavior: smooth; 
    overflow-x: hidden;
    max-width: 90em;
    background-color: #0c090b; 
}



body {
    font-family: Nunito sans, Helvetica, Arial, sans-serif;
}

h1, h2 {
    line-height: 1;
}


h1, .pseudo-h1, .h1-big {
    font-size: clamp(var(--56px), var(--preferredValue-h1), var(--128px));
    font-size: var(--dynamic-size-h1);
}

h2, .pseudo-h2, #events /*:is(span)*/ {
    font-size: clamp(var(--20px), var(--preferredValue-h2), var(--36px));
    font-size: var(--dynamic-size-h2);
    font-weight: var(--SemiBold);
}

p, li, a {
    font-size: clamp(var(--16px), var(--preferredValue-p), var(--20px));
    font-size: var(--dynamic-size-p);
    font-weight: var(--ExtraLight);
}

h1, h2 {
    font-weight: var(--SemiBold);
}
#logo {
    width: var(--dynamic-size-h2);
    display:none;
}
#logo-text {
    word-spacing: 0px;
    letter-spacing: -2px;
}

#header .lt-1 {
    font-weight: 700;
}


#header .lt-2 {
    font-weight: var(--Light);
}

#header :is(.lt-1) {
    font-weight: 700;
}

#header :is(.lt-2) {
    font-weight: 300;
}

nav li {
    list-style: none;
    font-weight: bold;
}

li {
    list-style: none;
}


h1, h2, p, a {
    margin-block: 0;
}

body :is(a, a:link, a:visited) {
    text-decoration: none;
}


html, body {
    height: 100dvh;
    height: 100vh;
    width: 100dvw;
    width: 100vw;
    max-width: 2000px;
    margin-inline: auto;
}

html :is(body) {
    margin: 0;
    display: flex;
    flex-direction: column;
}



body :is(section) {
    width: 100%;
}

#body :is(section) {
    height: max(100dvh, 50em);
    height: max(100vh, 50em);
}

section :is(._texture-bg, ._gradient ) {
    margin-top: -2.5em;
    position: static;
    width: 100%;    
}

body :is(#events, #collaborate) {
   /* height: var(--height-fix);*/
}


#hero-sidebar {
    display: none;
}

.container {
    position: relative;
    top: var(--offset);
    margin-inline: auto;
    margin-block: var(--offset);
    width: 94%;
    max-width: 85em;
    height: 91%;
    max-height: 51.25em;
    display: grid;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr);
    gap: 1.25em;
    
}

#body :is(.soundcloud, .spotify){
    display: none;
}
.item, .sub-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25em;
}


@media only screen and (max-width: 59.4em) {
    .container {
        grid-template: repeat(9, 1fr) / repeat(9, auto);
    }
}

/*Hero section*/

#hero {
    --htd: #18181A;
    --htl: #DACDBE;
    --acc: #6401bb; /* 1.#6435fc 2.#66269e  */

     color: var(--htd);
    /* background-color: #18181A;*/
     height: 100vh;

}

.menu .nav-item a,
.socials .nav-item a {
    color: var(--htd);
}
#hero :is(._texture-bg, ._gradient ) {
    margin-top: -2.5em;
    position: static;
    width: 100%;
    height:100%;    
}

#hero ._texture-bg {
    background: url(assets/bg-img/hero-natural-desktop.jpg) no-repeat 30% 140%,
    linear-gradient(360deg, #18181A 52%, rgba(62, 63, 65, 0.41) 60%, rgba(210, 197, 183, 0.8)),
    url(assets/textures/marbletexture1a-desktop.png) no-repeat center center;
    background-blend-mode: overlay;
    background-size: cover;  
}




#hero ._gradient  {
    background: linear-gradient(360deg, rgb(12, 12, 14) 25%, rgba(62, 63, 65, 0.5) 60%, rgba(210, 197, 183, 0.3));  
}


#header :is(a),
#navigation-2 :is(a) {
    font-weight: var(--Bold);
}

#hero-text > h2 {
    font-weight: var(--Bold);
}

#hero article, .player-text {
    color: var(--htl);
}

#player-text p {
    opacity: 50%;
}

#header h2 {
    letter-spacing: -2%;
}


/*#hero-content h2 {
    letter-spacing: -1%;
}*/

/* Like a Magic - START */

@keyframes underliner {
    from {width: 1%; }
    to {width: 100%; }
}

@keyframes lifter {
    from {top: 0; }
    to {top: 1px; }
}

@keyframes lifter-reverse {
    from {top: 0; }
    to {top: -3px; }
}

@keyframes glow-purp {
    0% {box-shadow: 0.5px 3px 4.6em rgb(81, 4, 149);}
    15% { box-shadow: 2px 1px 7em rgb(71, 10, 124);}
    40% { box-shadow: 3px 3px 8em rgb(80, 37, 118);}
    85% { box-shadow: 2px 6px 5em rgb(80, 2, 148);}
    100% { box-shadow:0.75px 3px 6em rgb(106, 6, 194);}
}

@keyframes glow-purp-2 {
    0% {box-shadow:0.5px 3px 5em rgb(72, 3, 128);}
    15% { box-shadow: 2px 1px 3em rgb(210, 197, 183);}
    40% { box-shadow: 5px 3px 4em rgb(33, 1, 60);}
    85% { box-shadow: 1px 6px 2em rgb(210, 197, 183);}
    100% { box-shadow:0.2px 3px 6em rgb(210, 197, 183);}
}

@keyframes so-much-shining {
    0% { opacity: 50%;}
    90% { opacity: 90%;}
    100% {opacity: 100%;}
}

#body :is(.link-animation), .link-animation:hover::after {
    position: var(--p-rel);
    z-index: 9999;
}

.link-animation:hover::after {
    top: 1px;
    display: block;
    content: "";
    width: auto;
    border: 1px solid var(--htl);
    box-shadow:1px 1.5px 1px rgba(62, 63, 65, 0.9);
    animation: underliner var(--animation-timing), lifter var(--animation-timing);
   
}


#body :is(.link-animation:hover) {
    top: -3px;
    color: var(--htl);
    font-weight: 600;
    text-shadow: 1px 1.5px 1px rgba(62, 63, 65, 0.9);
    animation: lifter-reverse var(--animation-timing);
}

#body :is(.link-animation:hover) {
    color: var(--htl);
}

.link-animation:active::after {
    top: 1px;
    display: block;
    content: "";
    width: 100%;
    border: 1.5px solid var(--acc);
    box-shadow:0.1px 0.1px 2px var(--htl);
}



#body :is(.link-animation:active){
    top: -3px;
    color: var(--acc);
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(62, 63, 65, 0.9);
}

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


    .hamburger-menu,
    .hamburger-menu:has(input:checked)::before,
    .hamburger-menu:has(input:checked)::after,
    .hamburger-menu input:checked,
    .link-animation,
    .link-animation:active {
        --acc: #cfdbf5; /*d1ad85*/
    }

    

    .link-animation {
        color: var(--background);
    }

    .link-animation:hover,
    .socials .link-animation:active {
    
    color: var(--acc, white); /* #6401bb*/
    }
    
    .link-animation:active,
    .socials .link-animation:active {
        color: var(--acc, white);
    }
}

/* Like a Magic - END */

.flex-container {
    display: flex;
    gap: 1em;
}

#hero-content #header {
    grid-column: 1/13;
    grid-row: span 1;
}

#hero-content .item-1 {
    place-self: start / start;
}

#header h2 ,
#navigation  ul,
#hero-text h1,
#hero-text h2,
#player-text p {
    position: var(--p-rel);
}


#header .title-heading {
    top: -2;
    left: -1;
    grid-column: span 3;
    margin: 0;
    padding: 0;
    place-self: start / start;
    z-index: 1;
} 

#navigation > ul {
    top: -8;
}

#header nav {
    grid-column: 1/13;
} 

#navigation .menu {
    grid-column: 4/8;
    z-index: 9999;
}

#navigation .socials{
    grid-column: 8/13;
    justify-content: end;
}

#hero-content #hero-text {
    grid-column: 1/13;
    grid-row: 7 / 10;
}

#hero-text h2, #hero-text h1 {
    margin: 0;
    grid-column: 1/12;
}

#hero-text h2 {
    top: 27;
    right: 2;
}

#hero-text h1 {
    top: 7;
    right: 0;
}


#hero-text .about-p {
     grid-column: 8/11;
}

/* animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
*/

#hero-content .cta {
    grid-column: 1 / 8;
    grid-row: 9 / 12; 
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: center;
    align-items: center;
    gap: 1.25em;
}

@media only screen and (max-width: 35em) {
    #hero-content .cta {
        justify-content: flex-start;
    }
    .cta-button {
        margin-right: 1em;
        width: 60%;
        min-width: 140px;
    }

}

@media only screen and (max-width: 33.625em) {
    .cta-button {
        width: 60%;
        min-width: 140px;
    }
}

.cta-button {
    position: var(--p-rel);
    background-color: rgba(207, 219, 245, 0.1);
    border: 1px solid var(--htl);
    /*border-image: linear-gradient(to bottom right, white 1%, rgba(207, 219, 245, 0.5) 3%, rgba(207, 219, 245, 0.1) 100%) 20% stretch*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    opacity:  90%;
    border-radius: 2px;
    animation: glow-purp 32s ease-in-out infinite alternate, glow-purp 27s linear 0.5s infinite alternate, so-much-shining 10s ease-in-out infinite alternate;
    transition: background-color var(--animation-timing) 0.2s, opacity var(--animation-timing);
    z-index: 9999;
}

._animate-diff {
    animation: glow-purp 46s linear 0.5s infinite alternate-reverse, glow-purp 54s ease-in-out infinite alternate-reverse, so-much-shining 10s ease-in-out infinite alternate-reverse;
}

.cta-button .cta-link {
    font-size: var(--20px);
    font-weight: var(--Bold);  
    color: var(--htl);
}

.cta-button:hover {
    position: var(--p-rel);
    top: -3px;
    opacity: 100%;
    animation: lifter-reverse var(--animation-timing), glow-purp-2 8s ease-in  infinite alternate ;  
}

.cta-button:has(a:hover) {
    background-color: rgba(207, 219, 245, 0.5);
    opacity: 100%;
}

@media only screen and (max-width: 33.625em) {
    #hero-content .cta {
        grid-column: 1/5;
        padding-right: 1em;
        justify-content: flex-start;
    }    
}

#hero-content #player {
    grid-row: 10 / 13;
    grid-column: 1/13;
}


#player #player-text {
    grid-row: 10/11;
    grid-column: 1/13;
    height: min-content;
}

#player-text p {
    top: -1.2em;

}

#player-text > p + p {
    grid-column: 8/13;
    justify-self: start;
}

#player-text:is(p) {
    height: fit-content;
}

#player iframe {
    align-self: end;
    position: relative;
    grid-row: 12/13;
    grid-column: 1/13;
    /*margin-top: 1.8em;*/
    z-index: 9999;
}


@media only screen and (max-width: 59.4em) {
    #hero-content #header {
        grid-column: 1/10;
        grid-row: span 1;
    }

    #header .title-heading {
        grid-column: 1 / 10;
    } 

    #hero-content #hero-text {
        grid-column: 1/10;
        grid-row: 5 / 8;
    }
    
    #hero-text h2, #hero-text h1 {
        margin: 0;
        grid-column: 1/10;
    }
    
    #hero-text h2 {
        right: 2;
    }
    
    #hero-text h1 {
        /*top: -50px;*/
        right: 6px;
    }

    #hero-text .about-p {
        grid-column: 8/12;
   }
   
   #hero-content #player {
       grid-row: 7 /10;
       grid-column: 1/10;
   }
   
   #hero-content .cta {
      grid-column: 1 /6;
      grid-row: 7 / 9;
      margin-right: 1em;
   }
   
   #player #player-text {
       grid-row: 7/9;
       grid-column: 1/13;
       height: fit-content;
       position: relative;
       top: -2px;
       margin-bottom: 0.5em;
   }

   #player-text > p + p {
        grid-column: 8/12;
        justify-self: start;
        align-self: start;
   }

   #player iframe {
        grid-row: 9 /10;
        align-self: end;
   }
}
    
@media only screen and (max-width: 35.625em) {
   
    #hero-content #hero-text {
        grid-row: 4 / 7;
    }

   #hero-content .cta {
        grid-row: 6 / 8;
   }

   #player-text > p + p {
        display: none;
    }

    #hero-text .about-p, 
    #player-text > p {
        grid-column: 7/13;
        justify-self: start;
        padding-right: 1em;
        
    }
} 


@media only screen and (max-width: 30em) {
    #hero-text h2 {
        grid-column: 1/7;
    }
}
/* Like a Magic 2 : Hamburger Boogaloo - START */ 
@media only screen and (max-width: 79.375em) {

    #navigation {
        display: none;
    }


    #sidebar-menu li a, 
    #sidebar-socials li a {
        font-size: var(--36px);
        line-height: 0.25;
    }

    #hero-sidebar {
        --bar-width: 48px;
        --bar-height: 3px;
        --hamburger-gap: 1em;
        --hamburger-margin: 0.437vw;
        --hamburger-height: calc(var(--bar-height)*3 + var(--hamburger-gap)*2);
        --sidebar-max-width: 43.75em;
        --foreground: #18181A; 
        --background: #DACDBE; 

        display: flex;
        flex-direction: column;
        gap: 5em;
        position: var(--p-abs);
        top: 0;
        right: 0;
        width: clamp(22.5em, 50vw, var(--sidebar-max-width));
        max-width: var(--sidebar-max-width);
        height: 100%;
        z-index: 9999;
    }
   /*nested*/
    @media only screen and (max-width : 43.75em) {
        #hero-sidebar {
            width: 100vw;
        }
    }
    .link-animation:hover::after,
    .link-animation:active::after {
        display: none;
    }

    .link-animation:hover {
        animation: lifter-reverse var(--animation-timing);
    }
    
    .hamburger-menu {
        --x-width: calc(var(--hamburger-height) * 1.41421356237);
        display: inherit;
        flex-direction: column;
        gap: var(--hamburger-gap);
        width: max-content;
        position: var(--p-abs);
        top: var(--offset);
        right: calc(4 * var(--hamburger-margin));
        z-index: 2; 
        cursor: pointer;
    }

    
    .hamburger-menu:has(input:checked) {
        top: var(--offset);
        right: calc(7 * var(--hamburger-margin));
    }

    .hamburger-menu::before,
    .hamburger-menu::after, 
    .hamburger-menu input {
        position: var(--p-rel);
        content: "";
        width: var(--bar-width);
        height: var(--bar-height);
        background-color: var(--foreground);
        border-radius: 9999px;
        transform-origin: left center;
        transition: opacity var(--animation-timing),
                    width var(--animation-timing),
                    transform var(--animation-timing),
                    translate var(--animation-timing),
                    background-color var(--animation-timing);
    }

    .hamburger-menu {
        width: 3.6rem;  
    }

    .hamburger-menu input {
        appearance: none;
        margin: 0;
        padding: 0;
        outline: none;
        pointer-events: none;
    }

    .hamburger-menu:hover::before,
    .hamburger-menu:hover::after,
    .hamburger-menu input:hover {
        background-color: var(--background);
    }

    
    .hamburger-menu:has(input:checked)::before {
        transform: rotate(45deg);
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) /-2);
        background-color: var(--acc);

    }

    .hamburger-menu:has(input:checked)::after{
        transform: rotate(-45deg);
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / 2);
        background-color: var(--acc);

    }

    .hamburger-menu input:checked {
        opacity: 0;
        width: 0;
    }
    
    .hamburger-menu:has(input:checked)  {
        transition: background-color var(--anitmation-timing);
        background-color: var(--htd);
        border-radius: 3px;
        opacity: 80%;
        padding: 0.5em;
    }

    .hamburger-menu:has(input:focus-visible)::before,
    .hamburger-menu:has(input:focus-visible)::after,
    .hamburger-menu input:focus-visible {
        border: 1px solid var(--htd);
        box-shadow: 0 0 0 var(--htl);
    }


    .sidebar {
        transition: translate var(--animation-timing);
        translate: max(100%, var(--sidebar-max-width));
        padding-top: calc(var(--hamburger-height) + var(--hanburger-margin)/8 + 1em);
        width: 100%;
        max-width: var(--sidebar-max-width);
        height: 100%;
        align-self: center;
        justify-self: flex-start;
        align-items: center;
        background-color: var(--acc);
        /*background-image: url(assets/textures/marbletexture1-mobile.png); 
        background-image: linear-gradient(360deg,rgb(12, 12, 14) 48%, rgba(62, 63, 65, 0.8) 62%, rgb(187, 114, 250));*/   
        background: linear-gradient(360deg,rgba(12, 12, 14, 0.9) 38%, rgba(62, 63, 65, 0.3) 52%, rgb(31, 1, 58)), url(assets/textures/marbletexture1-mobile.png); 
        opacity: 80%;
        
    }

    .hamburger-menu:has(input:checked) + .sidebar, 
    .sidebar nav,
    .sidebar nav ul {
        translate: 0;
    }

    .sidebar,
    .sidebar nav,
    .sidebar nav ul {
        display: inherit;
        flex-direction: column;
    }

    
    .sidebar,
    .sidebar nav {
        height: 100%;
    }


    .sidebar nav {
        position: var(--p-rel);
        top:-40px;
        justify-content: space-evenly;
        padding-block: 2em;
    }

    .sidebar nav ul {
        justify-content: center;
        height: 100%;
    }
    
    #sidebar-menu li, 
    #sidebar-socials li {
        margin-block: 1em;
    }

    :has(input:checked) #hero :is(._gradient) {
        transition: filter 1.5s ease-out 0.5s ;
        filter: blur(0.5em);
    }
}
/* Like a Magic 2 : Hamburger Boogaloo - END */ 

/***************E V E N T S*******************/

#events {
    --htl: #dddfdb; /*dddfdb*/
    --htd: #001828;
    --mobile-height: 56.25em;
    margin-top: 0;    
}

#events :is(h2, p, .pseudo-h1, .pseudo-h2, h4, li) {
    color: var(--htl);
    margin: 0;
    padding: 0;
}

#events :is(h2) {
    font-weight: var(--SemiBold);
}

#events :is(.youngsta) {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    letter-spacing: min(-0.7rem,-0.4rem) ;
    font-style: italic;
}

 @media only screen and (max-width: 1200px) {
    #events :is(.youngsta) {
        letter-spacing: min(-0.6rem, -0.4rem);
    }
}

 @media only screen and (max-width: 980px) {
    #events :is(.youngsta) {
        letter-spacing: min(-0.5rem, -0.4rem);
    }
 }

 @media only screen and (max-width: 850px) {
    #events :is(.youngsta) {
        letter-spacing: min(-0.4rem, -0.3rem);
    }
 }

 @media only screen and (max-width: 500px) {
    #events :is(.youngsta) {
        letter-spacing: min(-0.3rem, -0.2rem);
    }
 }

#events :is(.young-dot) {
    padding-left: 5px;
    color: #F7A74B;
}

#events :is(p) {
    font-weight: var(--ExtraLight);
}

/*#events :is(span) {
    color: var(--htd);
    font-weight: var(--Bold);
    opacity: 90%;

}*/


#events ._texture-bg {
    background: url(assets/bg-img/Event-bgcovetedgem1080w.jpg) no-repeat center,
    linear-gradient(90deg, #090009 42%,rgba(26, 0, 26, 0.25) 50%, rgba(168, 168, 168, 0.1)),
    url(assets/textures/foolsgoldtexture1a-desktop.png) no-repeat center;
    background-blend-mode: overlay;
    background-size: cover;
    height: auto;
    /*height: var(--height-fix); */
}

#events ._gradient  {
    background-image: linear-gradient(90deg, #090009 42%,rgba(26, 0, 26, 0.25) 50%, rgba(168, 168, 168, 0.1));
    opacity: 80%; 
    width:100%;
    height:100%; 
    
}


#events-header > h2 {
    top: -0.4vh;
    left: -0.2vw;
    margin: 0;
    padding: 0;
}
#events-content :is(h2, p){
    position: var(--p-rel);
    height: fit-content;
}


#events-text {
    grid-column: 1 / 13;
    grid-row: 2 / 12;
}

.ed-item {
    margin-top: 0.5em;
}

/*#events-text > h2 {   
    top: 0.7vh; 
    left: -0.1vw;
    grid-column: 1 / 13;
    grid-row:  2/ 3;
}*/

.flyer-item-1 {
    grid-column: 1/ span 8;
    grid-row: 1/2;
}

/*#events-text > h2 + h2 {
    left: -0.75vw;
    top: -1.7vh;
    grid-column: 1/10;
    grid-row: 3 / 4; 
}*/

.flyer-item-2 {
    grid-column: 1 / 13;
    grid-row: 1 / 4;
    position: var(--p-rel);
    top: 0.3em;
    left: -8px;
}


/*.events-about-p {
    top: -0.8vh;
    grid-column: 4 / span 3;
    grid-row: 6 / 8;
}
*/
.flyer-item-3 {
    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row: 3 / 7;
    position: var(--p-rel);
    top: 1em;
    /*display: grid; 
    grid-template-columns: subgrid;
    grid-template-rows: repeat(4, min-max(0, 1fr));*/
}


/*.ed-item {
    grid-column-end: span 3;
}

.ed-item :not(.ed-item-4, .ed-item-5) {
    grid-column-start: 1;
}

.ed-item-2 {
    grid-column-start: 1;
    grid-row-start: 2; 
}

.ed-item-3 {
    grid-column-start: 1;
    grid-row-start: 3;
 }

.ed-item-4, 
.ed-item-5 {
    grid-column-start: 4;

}

.ed-item-5 {
    margin-top: 1.5em;
    height: fit-content;
}*/

#events-content .span-flex {
    position: var(--p-abs);
    grid-column: 9 / 13; 
    grid-row: 1 / 9; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    gap: var(--36px);
    margin-left: 3em;
    z-index: -1;
}


#events-content :is(.span-flex) {
    display: none;
}

.spanfi {
    position: var(--p-rel);
    top: -1.1vh;
}

#events-header > h2 {
    position: relative;
    padding: 0;
}

.ed-item-5 {
    max-width: max-content;
}

@media only screen and (max-width: 59.4em) {

    #events-text {
        grid-column: 1 / 13;
        grid-row: 2 / 10;
    }

    /*#events-text > h2 {   
        grid-column: 1 / 8;
    }*/

    /*#events-text > h2 + h2 {
        left: -0.75vw;
        top: -1.7vh;
        grid-column: 1/13;
        grid-row: 4 / 5;    
    }*/
    
    .flyer-item-2 {
        grid-column: 1 / 13;
        grid-row: 1/ 3;
        top: 1em;
        left: -5px;
    }

    .flyer-item-3 {
        top: 
    } 
    
    .events-about-p {
        grid-column: 5 / span 4;
    }
    
    #events-content .span-flex {
        grid-column: 5 / 10;
        grid-row: 1 / 8; 
        left: 10vw;
    }
}

@media only screen and (max-width: 37.25em) {

    #events ._texture-bg {
        background: linear-gradient(90deg, #090009 42%,rgba(26, 0, 26, 0.25)),
        url(assets/textures/foolsgoldtexture1a-desktop.png) no-repeat center;
        background-blend-mode: overlay;
        background-size: cover;  
    }
    
    #events ._gradient  {
        background-image:linear-gradient(90deg, #090009 42%,rgba(26, 0, 26, 0.25) 50%, rgba(168, 168, 168, 0.1));
        opacity: 90%;  
    }

    #events-text {
        grid-row: 2/7;
    }

    
    /*#events-text > h2 {
        grid-row: 2;
    }

    #events-text > h2 + h2 {
        grid-row: 3/4;
    }*/


    #events-text .events-about-p {
        grid-column: 3 / span 5;
        grid-row: 4 /auto;
        padding-right: 0.5em;
    }

    #events-content .span-flex {
        display: none;
    }
}

@media only screen and (max-width: 31.25em) {
        .flyer-item-2 {
            grid-column: 1/6;
        }

        .flyer-item-3 {
            grid-row: 3 / 8;
            grid-column: 1 / 8;
            margin-top: 0.5em;
        }
}

@media only screen and (max-width: 26.375em) {

    /*#events-text > h2 {
        grid-row: 2/3;
    }

    #events-text > h2 + h2 {
        grid-column: 1/7;
        grid-row: 3/4;
    }*/


    .flyer-item-2 {
        top: 1em;
        grid-column: 1/6;
        grid-row: 1 / 3;
    }

   

    #events-text .events-about-p {
        grid-column: 4 / 9;
        grid-row-start: 4;
    }
}


/*=========================================================================
                C O L L A B O R A T E  &  C O N T A C T
==========================================================================*/

/*
.container {
    position: relative;
    top: var(--offset);
    margin-inline: auto;
    margin-block: var(--offset);
    width: 94%;
    max-width: 85em;
    height: 91%;
    max-height: 51.25em;
    display: grid;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr) ;
    gap: 1.25em;
    
}
*/

#collaborate {
    --htl: #E1DCC9;
    --htd: #181114;
}

#collaborate :is(a, a:link, a:visited) {
    color: var(--htl);
}


#collaborate :is(._texture-bg){
    background: linear-gradient(170deg, #34272E 40%, #181114 60%),
    url(assets/textures/quartzhevytexture1a-desktop.png) no-repeat center;
    background-blend-mode: overlay;
    background-size: cover;
}

/*#collaborate :is(._gradient){
    background-image: linear-gradient(170deg, #270f0d 40%,rgb(92, 44, 49) 60%) center;
    opacity: 90%; 
}*/

#collaborate {
    --gap: 1.25em; 
    display: flex;
    flex-grow:1;
    flex-direction: column;
    width: 100%;
    color: var(--htl);
    margin-top: 2.5em;
}


#collaborate :is(._texture-bg, ._gradient) {
    height: auto;
    max-height: none;
   
}


#collaborate :is(a) {
    position: var(--p-rel);
    z-index: 9999;
    top: 0.3em;
}

/*Like a Magic 2.5 */

#collaborate .link-animation:hover::after,
#collaborate .link-animation:active::after {
    display: none;
    animation: lifter var(--animation-timing);
}

#collab-text {
    grid-column: 1 /13;
    grid-row: 1 / 9;
}

#collab-header {
    grid-column: 1 /span 2;
    grid-row-end: span 1;
}

#collab-text :is(.collab-ch-flex){
    display: flex;
    justify-items: start;
    align-items: start;
}

#collab-text .catch-heading {
    grid-column: 4 / span 10;
    grid-row: 4/ span 2;
    flex-flow: column;
    align-items: center;
}

.catch-heading > h2,
.catch-heading > h2 + h2 {
    grid-column: 1/13
}

#collab-text .collab-about-p {
    grid-template-rows: subgrid;
    grid-template-columns:repeat(10, minmax(0, 1fr));
    grid-column: 3 /13; 
    grid-row: 6 / 13;  
}

.collab-about-p {
    gap: 2em;
}
#collab-text .ca-pi2 {
    grid-row-start: 4;
}
#collab-text .ca-pi3 {
    grid-column-start: 4;
    /*grid-row: 1 / span 4;*/
}

#contact-text {
    grid-column: 1 / 13;
    grid-row: 4 / 13;
}

.contact-card {
    grid-column-end: span 4;
}

.cc-2 {
    grid-column-start: 6;
}

@media only screen and (max-width: 43.75em) {
    #collab-text .catch-heading {
        grid-column: 2 / span 10;
        grid-row: 3/ span 2;
    }
        
    #collab-text .collab-about-p {
        grid-column: 1 /13; 
        grid-row: 5 / 13;  
    }
}



@media only screen and (max-width: 31.25em) {
    #collab-text .catch-heading {
        grid-column: 1 / span 10;
        grid-row: 3/ span 2;
    }
        
    #collab-text .collab-about-p {
        grid-column: 1 /13; 
        grid-row: 5 / 13;  
    }

    .contact-card {
        grid-column-end: span 9;
    }

    .cc-2 {
        grid-column-start: 1;
        grid-row-start: 2;
    }
}