:root {
  --bg: #070707;
  --surface: rgba(10, 10, 10, 0.72);
  --text: white;
  --shadow: rgb(67, 67, 67);
  --muted: rgba(255, 255, 255, 0.72);
  --accent: #f4941e;
  --radius: 1rem;
  /* --ts: -0.1rem 0.1rem 0rem rgb(21, 21, 21); */


}

* {
  font-family: "poppins", Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

@font-face {
  font-family: 'curls';
  src: url("assets/Fig\ Script\ Regular.ttf");
}

@font-face {
  font-family: 'circles';
  src: url("assets/FTGoddardTrial-Bright.otf");
}

@font-face {
  font-family: 'poppins';
  src: url("assets/Poppins-Regular.ttf");
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;

}

body {
  overflow-x: hidden;
  background-color: var(--bg);
  font-weight: 400;

}

.lang {
  position: fixed;
  height: 1.5rem;
  width: auto;
  right: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  /* gap:5px; */
  background: white;
  z-index: 44;
}

.lang img {
  height: 100%;
}

.top-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  height: 100lvh;
  width: 100%;


  background-image: url("assets/39\ Backgrounds-A3.png\(1\).png");
  background-repeat: no-repeat;
  background-position: 30% center;
  background-size: cover;


}

.pullcue {
  background: rgb(237, 237, 237);
  border-radius: var(--radius);
  height: 2rem;
  aspect-ratio: 1;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  display: flex;
  justify-content: center;
  /* mix-blend-mode:hard-light; */
  opacity: 1;
  animation: introducePQ 2s infinite ease-in-out;
}

@keyframes introducePQ {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.pullcue img {
  height: 66%;
  width: 66%;
  margin: auto;
  padding: 0;
  /* filter: invert(1); */
}




.sheet {
  /* background: rgba(0, 0, 0, 0.136); */
  padding: 2rem;

}


.divider {
  width: 100%;
  height: auto;
  margin: auto;
  display: flex;
}

.divider h1 {
  font-family: "poppins";
  /* background:linear-gradient(90deg, #00ffd0, #f3f6f7);
    background-clip: text;
    -webkit-text-fill-color: transparent; */
  font-size: clamp(1.5rem,
      6vw,
      4rem);
  color: rgb(255, 255, 255);
  text-shadow: var(--ts);
  margin: auto;

}

.title {
  /* overflow: hidden; */
  width: 100%;
  padding-inline: clamp(1rem, 6vw, 10rem);
  /* position: relative; */
  /* top:1rem; */
  color: white;
  /* isolation: isolate; */
  /* border:2px solid red; */
  height: 100lvh;
  opacity: 1;
  transition: opacity 1s ease 0s;

}

h2 {
  font-family: 'circles';
  font-size: 1rem;
  margin-block: 0;
  position: relative;
  display: inline-block;
  isolation: isolate;

}

.divider h2 {
  padding-left: 2rem;
  padding-bottom: 2rem;
}

.title-track {
  display: flex;
  /* width: max-content; */
  /* gap: 4rem; */
  /* animation: scroll-left 10s linear infinite; */
  /* left:1rem; */
  /* justify-content:center; */
  flex-wrap: wrap;
}

.title-track img {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  /* margin:auto; */
  /* right:1rem; */
  /* mix-blend-mode: difference; */
  filter: drop-shadow(-0.1rem 0.1rem 0rem black);

}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


.guys {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  background: rgba(3, 3, 3, 0);
  z-index: -1;
  /* display:none; */
  justify-content: center;
  align-items: center;
  /* mix-blend-mode:overlay; */
  display: none;
}

.calendar-saule {
  top: -30%;

  z-index: -1;

}

.calendar-stars {

  display: none;

}

.calendar-meness {
  z-index: -1;
  bottom: 10%;
}

.calendar-meness,
.calendar-saule,
.calendar-stars {
  overflow: visible;
  height: 15rem;
  aspect-ratio: 1;
  /* margin-block:10rem; */
  /* margin-left:16rem; */
  opacity: 1;
  position: absolute;


}





.calendar-stars img,
.calendar-saule img,
.calendar-meness img {
  height: 100%;
  width: 100%;
  display: block;


}


.calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  /* backdrop-filter: blur(20px); */


}

/* 
.calendar, .sheet {
      backdrop-filter: blur(7px);
} */

.calendar-day-date {
  /* 27,opening,dance */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 100%;

}

.calendar.wide {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;


}

.calendar-day-date.wide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 100%;
  /* border-right:1px solid rgba(255, 255, 255, 0.048); */
}



.calendar-day-events {
  /* opening, dance */
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-block: 1rem;
  overflow: hidden;
  gap: 0rem;
  justify-content: center;
  align-items: center;
  margin-inline: 1rem;

}

.calendar-day-events.wide {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-block: 1rem;
  overflow: hidden;
  /* border:1px solid blue; */
}

.calendar-day-date h2 {
  /* LEFT FONT FOR DATE */
  font-family: 'circles';
  border-right: 2px solid rgba(255, 255, 255, 0.801);
  font-size: clamp(2rem, 5vw, 4rem);
  padding: 0.5rem;
  color: white;
  text-shadow: var(--ts);
}

.calendar-day-date.wide h2 {
  /* LEFT FONT FOR DATE */
  font-family: 'circles';
  border-right: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.801);
  font-size: clamp(1.5rem, 5vw, 4rem);
  padding: 0.5rem;

  color: white;
}

.calendar-day-circle {
  text-decoration: none;
  height: auto;
  border-radius: var(--radius);
  display: flex;
  /* border:1px solid rgba(3, 3, 3, 0.439); */
  margin-block: 0.3rem;
  width: 100%;
  margin-inline: 0.3;
  backdrop-filter: blur(3px);
  border: 2px solid rgb(216, 215, 215);



}

.calendar-day-circle.wide {
  text-decoration: none;
  color: rgb(255, 255, 255);
  aspect-ratio: 1;
  border-radius: var(--radius);
  display: flex;
  margin-block: 1rem;
  width: 75%;
  padding-inline: 0.5rem;
  background: transparent;
  border: 2px solid rgba(176, 175, 175, 0.571);
}

.calendar-day-circle h3 {
  font-family: 'poppins';
  text-align: center;
  font-size: clamp(0.6rem, 7vh, 1.5rem);
  margin: auto;
  text-shadow: var(--ts);
  /* mix-blend-mode:screen; */
  color: white;
  /* -webkit-text-stroke: 1px rgb(96, 91, 91); */

}

.calendar-day-circle:hover {
  /* border:1px solid rgb(119, 119, 119); */
  /* background:black; */
  /* transform:scale(1.1); */
}

@keyframes theBlinker {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}



.merch {
  z-index: 3;
  position: relative;
  height: auto;
  width: 100%;
  /* margin-inline: 2rem; */
  padding-inline: 10vw;
  /* gap: clamp(0.5rem, 2vw, 2rem); */
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding-block: 1rem;
  justify-content: space-around;


}



.merch-item {
  /* height: clamp(1rem, 15vw, 12rem); */
  height:20vh;
  aspect-ratio: 1;
  background: whitesmoke;
  overflow: hidden;
  border-radius: var(--radius);
  padding-top:0.2rem;
  display:flex;
  flex-direction: column;
  align-items: center;
  border: 2px dashed black;

}

.merch-item img {
  aspect-ratio: 1;
  /* object-fit: cover; */
  display: block;
  border:2px dashed black;
  margin:auto;
  width:50%;

}

.merch-item h2 {
  margin: 0;
  color: black;
  font-size: 1rem;
  padding: 0.2rem;
  font-family: "Comic Sans MS", cursive;
}

















.sheet2 {}

.main-content {
  display: flex;
  width: 100%;
  /* padding-block:4rem; */
  /* margin-block:8rem; */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem;
  margin-block: 5rem;
  /* backdrop-filter: blur(20px); */
  /* backdrop-filter:saturate(2); */



}

.card,
.card-night {
  height: 32rem;
  position: relative;

  width: min(100%, 33rem);
  margin-inline: auto;

  box-shadow:
    0 1rem 2rem rgba(0, 0, 0, 0.18),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  filter: saturate(1.3);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 3rem;
}

.card-night {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  background: transparent;
}

.card-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  /* opacity: 50%; */
  /* border-radius: 50%; */
  /* position:relative; */
  /* border-radius: 50%; */
  /* box-shadow: 0px -10px 10px rgba(203, 234, 48, 0.338); */
  z-index: -1;
  position: relative;
}

.card-photo-saule {
  position: absolute;
  inset: 0;
  margin: auto;
  overflow: visible;

}

.card-photo-saule img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: relative;
  overflow: visible;
}

.card-info,
.card-info-night {
  position: absolute;
  bottom: 0rem;
  z-index: 10;
  height: auto;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.18));
  color: var(--text);
  backdrop-filter: blur(4px);

}

.card-info-night {
  background-color: rgba(82, 83, 83, 0.185);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.card-info-night>.card-desc>h3,
.card-info-night>.card-desc>p {
  background-color: rgba(255, 0, 0, 0);
  border-left-color: #00aaff;
}

.card-info-night .card-ticket p {
  background-color: #9effff;
  color: black;
}

.card-desc {
  padding-left: 0.5rem;
}

.card-desc h3 {
  margin: 0 0 0.35rem;
  /* padding-left: 0.75rem; */

  font-size: 2rem;
  line-height: 1.1;
  color: white;

  background: transparent;
  /* border-left: 4px solid #f4941e; */
  /* background:linear-gradient(#ecc1da, #b3d6b3); */
  /* background-clip: text;
  -webkit-text-fill-color: transparent; */
}

.card-desc p {

  border-left: 3px solid #f4941e;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.656);

  background: transparent;
  border-left: none;

}

.card-finer-deets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.card-date,
.card-location {
  width: auto;
  /* border:1px solid red; */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.card-date p,
.card-location p {
  margin: 0;
}

.card-date img,
.card-location img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  filter: invert(100%);
  opacity: 0.8;
}

.card-ticket {
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.card-ticket p {
  /* background:linear-gradient(#ecc1da, #b3d6b3); */
  border: 1px solid white;
  padding: 0.48rem 0.8rem;
  margin: 0;
  /* border-radius: 999px; */
  font-size: 0.85rem;
}

.card-info-night .card-ticket p {
  background-color: #9effff;
  color: #06151a;
}

#meness {
  object-fit: contain;
  filter:
    drop-shadow(0 0 0.5rem rgba(220, 255, 255, 0.8)) drop-shadow(0 0 1.5rem rgba(140, 220, 255, 0.55)) drop-shadow(0 0 3.5rem rgba(80, 160, 255, 0.35));
}

.starfeet {
  position: static;
  height: 100%;
  width: 100%;
  margin-top: -70%;
}

.starfeet img {
  width: 100%;

  height: 100%;
}


.card-night-wrap {
  width: min(100%, 33rem);
  height: 28rem;
  isolation: isolate;
}