@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/allenia');
@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Spray+Paint&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');

body {
    margin: 0;
    background-color: #ffecd1;
    font-family: Poppins;
    color: #ffffff;
    overflow-x: hidden;
}

.headspace {
    font-family: "Fleur De Leah", cursive;
    width: 100vw;
    text-align: center;
}

.headspace h1 {
    font-size: 10vw;
    color: #ffd5ae;
    text-shadow: 2px 2px 5px red;
}

.load {
    width:100%;
    height:100vh;
    margin:0;
    padding:0;
    background:#000000;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    position: absolute;
    top: 0;
    z-index: 9999999;
    cursor: none;
    color: white;
    gap: 50px;
    font-family: "League Script", cursive;
    font-size: 5vh;
}

.loadimg {
    width: 10%;
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

footer {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    z-index: 9999999;
    background-color: #000;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;    
}

.foot {
    padding: 50px;
    flex-grow: 1;
    font-size: 2.5vh;
    display: flex;
    flex-direction: row;
}

.foot p{
    flex-grow: 1;
}

.icons {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.ico {
    display: flex;
    flex-direction: row;
    padding: 20px;
}

.icons iframe {
    flex-grow: 1;
}

footer img {
    width: 100%;
}

:root {
    --width: min(1300px, 100%);
}

* {
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

header {
    width: var(--width);
    margin: auto;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
    padding-inline: 20px;
    /* background-image: linear-gradient(to bottom, #000, #0000); */
    text-shadow: 0px 5px 5px black;
    /* backdrop-filter: blur(5px); */
}

header .logo img {
    height: 100px;
}

header .sam img {
    height: 150px;
}

header nav ul {
    display: flex;
    gap: 2em;
}

header nav ul li.active {
    border-bottom: 1px solid #eee8;
}

#bg_city {
    margin-top: -150px;
}


.banner {
    position: relative;
    min-height: 100vh;
}

.banner .content {
    position: absolute;
    width: var(--width);
    height: 80%;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    display: grid;
    grid-template-rows: 10vh 40vh 20vh;
    text-align: center;
}

#menu {
    border-radius: 50px; 
    transition: border-radius 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s ease;
}

#menu.is-open {
    border-radius: 20px;
    background-color: #4b3f2e;
    color: #c6a679;
}

@keyframes bounceIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.bounce-animate {
    animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    list-style: none;
    padding: 0;
    margin: 0;
}

.bob {
    width: 100vw;
    font-size: 3em;
    padding: 50px;
    opacity: 0;
    position: absolute;
    text-align: center;
    font-weight: 900;
    font-family: "Sofia", cursive;
    color: #ffecd1;
    text-shadow: 0px 0px 5px black;
    scale: 2;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 5em;
    gap: 5em;
    position: relative;
    /* background-color: #ffecd1; */
    color: #000;
}

main::after {
    width: 100%;
    height: 100px;
    content: '';
    position: absolute;
    z-index: 100;
    left: 0;
    bottom: 100%;
    /* background-image: linear-gradient(to top, #ffecd1, #0000); */
}

.friend {
    /* width: var(--width); */
    padding-inline: 20px;
}

.friend ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.banner .content .item:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-content: center;
    font-size: clamp(0.5rem, 5vw, 1rem);
    transform: translateY(-120px);
}

a {
    color: white;
    text-decoration: none;
}

nav {
    background-color: #00000092;
    padding: 10px 30px 10px 30px;
    backdrop-filter: blur(5px);
    /* border-radius: 50px; */
}

a:hover {
    font-style: italic;
    font-size: 20px;
}

.banner .title p {
    margin: 0;
    padding: 0;
}

.friend ul img {
    height: 50px;
}

.treebark {
    position: absolute;
    width: 40vw;
    right: 0;
    top: 0;
    z-index: -1;
}

.me {
    text-align: center;
    margin-bottom: 15em;
    padding: 50px;
}

.disk {
    position: fixed;
    top: -70vh;
    width: 70vw;
    left: 15vw;
    z-index: -1;
    animation: rotating 20s linear infinite;
    /* animation-timeline: view(); */
}

.me h1,
.me h2 {
    font-family: "Rubik Spray Paint", system-ui;
    font-weight: 500;
    z-index: 99;
}

.me h1 {
    font-size: 4em;
}

.me h2 {
    font-size: 4em;
}

.me p {
    /* font-family: "Sedgwick Ave Display", cursive; */
    font-size: 1.5em;
    padding: 10vw;
}

.abt {
    margin-bottom: 10vh;
}

.spons{
    text-align: center;
    padding: 50px;
}

.lorem {
    padding-inline: 20px;
    width: var(--width);
    columns: 400px 2;
}

.events-grid {
    left: 0;
    display: flex;
    flex-direction: row;
    max-height: 90vh;
    width: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 20px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background:
    linear-gradient(135deg, #0000 20.5%, #2a1a1f 0 29.5%, #0000 0) 0 16px,
    linear-gradient(45deg, #0000 8%, #2a1a1f 0 17%, #0000 0 58%) 32px 0,
    linear-gradient(
      135deg,
      #0000 8%,
      #2a1a1f 0 17%,
      #0000 0 58%,
      #2a1a1f 0 67%,
      #0000 0
    ),
    linear-gradient(
      45deg,
      #0000 8%,
      #2a1a1f 0 17%,
      #0000 0 58%,
      #2a1a1f 0 67%,
      #0000 0 83%,
      #2a1a1f 0 92%,
      #0000 0
    ),
    #764134;
    padding: 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.view-all {
    min-width: 20vw;
    --size: 80px; /* control the size */
  --color: #ffdfaf;

  --l: var(--color) 20%, #00000000 0;
  --bg: 35%, #edbc72 0 45%, var(--color) 0;
  background: linear-gradient(
      45deg,
      var(--l) 45%,
      var(--color) 0 70%,
      #db777700 0
    ),
    linear-gradient(-45deg, var(--l) var(--bg) 70%, #0000 0),
    linear-gradient(45deg, var(--color) var(--bg));
  background-size: var(--size) var(--size);
    display: flex;             
    align-items: center; 
    justify-content: center;
    border: rgb(0, 0, 0) solid 10px ;
    border-radius: 20px;
    padding: 80px;
    font-size: 50px;
    font-weight: 900;
    transition: all 300ms ease-in;
    margin-top: 50px;
}

.view-all:hover ~ .events-grid img{
    opacity: 0;
}

.view-all:hover {
    transform: scale(1.01);
}

.card:hover {
    scale: 1.01;
}

.inner-card {
    height: auto;
    width: 20vw;
    padding: 30px;
    background: radial-gradient(125% 125% at 10% 10%, #080303 10%, rgba(13, 13, 13, 0.636) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.36);
    display: flex;
    flex-direction: column;
    animation: fadee 0.5s;
    opacity: 0;
    cursor: pointer;
}

.showBox {
    position: fixed;
    bottom: 0;
    width: 100vw;
    /* margin-bottom: 10vh; */
    background-color: #000000;
    z-index: 99999999;
    padding: 20px;
}

.showBox img.swaShow {
    /* width: 70%; */
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -50px; 
    display: block;
    object-fit: contain;
    background-color: #000;
    border-radius: 20px;
}


select {
    all: unset;
    background-color: #000;
    cursor: pointer;
    border: 1px solid rgb(83, 83, 83);
    padding: 2px 5px 2px 5px;
    font-size: 12px;
    border-radius: 10px;
}

.inner-card:hover {
    opacity: 1;
    animation: unfadee 0.5s;
}

@keyframes unfadee {
    from{
        opacity: 0;
    } to {
        opacity: 1;
    }
}

@keyframes fadee {
    from{
        opacity: 1;
    } to {
        opacity: 0;
    }
}

.inner-card h1 {
    flex-grow: 1;
}

.try {
    height: 50vh;
    background-color: #000;
    display: flex;
    /* padding: 20px */
    max-height: 70vh;
    border: 1px solid rgb(255, 225, 182);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.events-grid img {
    max-height: 70vh;
    border: rgb(0, 0, 0) solid 10px ;
    border-radius: 20px;
    transition: all 300ms ease-in;
}

.events-grid img:hover {
    transform: rotateZ(1deg) rotateY(10deg) scale(1.1);
    box-shadow: 0 5em 2em #111;
    -ms-overflow-style: none;   
    scrollbar-width: none;
}

.events-grid::-webkit-scrollbar {
    display: none;
}

.popup {
    position: fixed;
    top: 2vh;
    left: 2vw;
    z-index: 999999999;
    width: 96vw;
    height: 96vh;    
    border-radius: 30px;
    background: rgb(0, 0, 0);
    background: radial-gradient(125% 125% at 50% 10%, #000000 40%, rgba(48, 48, 48, 0.598) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgb(0, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    /* rotate: 1deg; */
}

#popcontent{
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.hidden {
    display: none;
}

.closepop {
    position: absolute;
    width: 30px;
    right: 20px;
}

.closepop:hover {
    scale: 1.2;
}

#imgpop img {
    height: 100%;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.783) 0px 7px 29px 0px;
    border: 1px solid rgba(0, 0, 0, 0.498);
}

.idc-i-want-no {
    all: unset;
    background-color: transparent;
}

#pack {
    display: flex;
    flex-direction: row;
    padding: 30px;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    /* color: black; */
}

#pack::-webkit-scrollbar {
    display: none;
}


menu { 
    position: fixed;
    z-index: 999999;
    display: none;
    width: 200px;
    padding: 10px;
    text-align: center;
    bottom: 0;
    left: 0;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background-color: #ffecd1;
    border-radius: 60px;
    color: black;
    font-weight: 800;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.footer-info {
    flex-grow: 1;
}

.filters{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.button {
    padding: 20px;
    background-color: #c6a679;
    border: 2px rgb(255, 255, 255) solid;
    border-radius: 50px;
    color: black;
    font-size: 20px;
    font-variant: small-caps;
    font-weight: 500;
    text-align: center;
    width: 30vw;
    margin-left: calc(100% - 30vw);
}

/* Standardizing the link container */
.idc-i-want-nooo {
    text-decoration: none;
    display: block;
    width: 300px;
    
    /* Required for dragging */
    position: fixed; 
    user-select: none; /* Prevents highlighting text while dragging */
    touch-action: none; /* Better support for mobile/tablets */
    
    /* Initial position */
    top: 150px;
    right: 50px;
}

/* 1. The Ticket-Shaped Box */
.borther {
    background-color: #053c3c;
    color: white;
    text-align: center;
    padding: 30px 20px; /* Extra vertical padding for ticket feel */
    position: relative;
    border-radius: 8px; /* Slight corner rounding */
    
    /* THE TICKET NOTCHES: This cuts circles out of the left and right sides */
    background-image: 
        radial-gradient(circle at 0% 50%, transparent 15px, #053c3c 16px),
        radial-gradient(circle at 100% 50%, transparent 15px, #053c3c 16px);
    background-position: left center, right center;
    background-size: 51% 100%; /* Adjust to ensure background colors meet */
    background-repeat: no-repeat;

    /* THE FLOATING SHADOW */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    
    /* THE FLOAT ANIMATION */
    animation: floatTicket 4s ease-in-out infinite;
}

/* 2. The Perforation Line */
.borther br + br::before, 
.borther br {
    content: "";
    display: block;
    width: 80%;
    margin: 15px auto;
    border-bottom: 2px dashed rgba(255,255,255,0.3);
}

/* Keeping your existing image overlap effect */
.ssShow {
    width: 100%;
    display: block;
    margin-top: -70px; /* Pulled up 70px to make it dramatic */
    margin-bottom: 20px;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5));
}

/* Styling the Text (DJ Event, Tickets Live) */
.borther {
    font-family: 'Courier New', Courier, monospace; /* Monospace feels like a ticket */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Define the Floating Animation */
@keyframes floatTicket {
    0% {
        transform: translateY(0px) rotate(0deg);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    50% {
        transform: translateY(-15px) rotate(1deg); /* Lift and slight tilt */
        box-shadow: 0 25px 50px rgba(0,0,0,0.3); /* Softer, larger shadow when higher */
    }
    100% {
        transform: translateY(0px) rotate(0deg);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
}

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

    .me h1,
    .me h2 {
        font-size: 3em;
    }
    .banner .title {
        font-size: 3em;
    }
}

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

    .idc-i-want-no {
        width: 150px;
        right: 5px;
    }

    .me h1,
    .me h2 {
        font-size: 2em;
    }

    #piano {
        transform: scale(0.4);
    }

    #vangoh {
        transform: translate(3200px, 800px);
    }

    #musicdisk {
        transform: translateX(600px);
    }

    #tree {
        transform: translateX(-800px);
    }

    #sam {
        transform: translate(15%, 10%) scale(0.7);
        position: absolute;
        top: 50%;
        left: 50%;
    }

    header nav {
        display: none;
    } 

    menu {
        display: block;
    }

    header {
        justify-content: center;
    }

    header .logo img {
        height: 80px;
    }

    .banner .content {
        text-align: center;
    }  

    .me p {
        font-size: 1em;
        padding: 10px;
    }

    .bob {
        font-size: 1.5em;
        scale: 1;
    } 

    .abt {
        margin-bottom: 0px;
    }

    .treebark {
        display: none;
    }

    .load {
        font-size: 3.5vh;
        text-align: center;
    }

    footer {
        position: relative;
    }

    .foot {
        text-align: center;
        font-size: 2vh;
    }

    .events-grid img {
        max-height: 50vh;
    }

    .disk {
        position: fixed;
        top: -25vh;
        width: 100vw;
        left: 0vw;
    }

    #pack {
        flex-direction: column;
        padding: 5px;
    }

    #imgpop img {
        width: 40vw;
        height: auto;
    }

    .button {
        position: relative;
        border-radius: 50px;
        padding: 5px;
        margin-top: 30px;
        width: 100%;
        margin-left: 0;
    }

    .inner-card {
        background: radial-gradient(80% 125% at 20% 5%, #000000b7 20%, rgba(48, 48, 48, 0.598) 100%);
        width: 100%;
        border-radius: 20px;
        backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    }

    .loadimg {
        width: 50%;
    }

    .instructions p {
        font-size: 15px;
    }

    .foot {
        flex-direction: column;
    }

    .icons {
        align-items: center;
    }

    .view-all {
        width: 100%;
        min-height: 30px;
        font-size: 25px;
        padding: 5px;
        border-radius: 50px;
        border: 2px solid black;
    }

    .showBox {
        display: flex;
        flex-direction: row;
        position:relative;
        /* margin-bottom: 50px; */
        height: 15vh;
        z-index: 9;
    }

}
#bg_city {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
#bg_city svg {
    width: 100%;
    height: 100%;
    object-position: center;
}