/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("pics/LAVANDULA.gif");
  background-size: 100% 100%;
  font-family: Verdana;
  background-repeat: no-repeat;
  min-height: 200vh;
  background-position: top;
  position: relative;

}
.cursor {
    position: fixed;
    width: 32px;
    pointer-events: none;
    z-index: 9999;
  }
  
.big-text {
    margin-right: 60%;
    margin-top: 11%;
    font-family: Arial;
    font-size: 260%;
    color: #d4e1f2;
    display: block;
    transform: scaleY(6);
    letter-spacing: 0.2em;
}
.spacer{
    height: 200vh;
}
.fugglers {
  position: absolute;

  bottom:2px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  gap: 4vw;

  z-index: 9999;
}

.fugglers img {
  width: 8vw;
  max-width: 80px;
  min-width: 40px;
  height: auto;
  display: block;
  vertical-align: middle;
}

.fugglers a.holographic-card {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
  cursor: crosshair;
}

.fugglers a.holo-mask-f1 {
  --holo-mask: url("pics/fuggler-removebg-preview.png");
}

.fugglers a.holo-mask-f2 {
  --holo-mask: url("pics/insane_fuggler-removebg-preview.png");
}

.fugglers a.holo-mask-f3 {
  --holo-mask: url("pics/snow_fuggler-removebg-preview.png");
}

.fugglers a.holographic-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;

  -webkit-mask-image: var(--holo-mask);
  mask-image: var(--holo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 120, 200, 0.18) 70deg,
    rgba(120, 220, 255, 0.2) 140deg,
    rgba(255, 240, 120, 0.15) 210deg,
    rgba(180, 140, 255, 0.16) 280deg,
    transparent 340deg,
    transparent 360deg
  );
  mix-blend-mode: soft-light;
}

.fugglers a.holographic-card:hover::after {
  opacity: 1;
  animation: holo-spin-fugglers 4s linear infinite;
}

@keyframes holo-spin-fugglers {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.fugglers a.holographic-card:hover img {
  filter:
    drop-shadow(0 0 2px rgba(255, 0, 128, 0.9))
    drop-shadow(0 0 6px rgba(0, 112, 243, 0.7))
    drop-shadow(0 0 10px rgba(0, 223, 216, 0.5));
}
.box3 {
  position: absolute;
  top: 1000px;     
  left: 50%;
  transform: translateX(-50%) scaleY(1.8);

  z-index: 10;
  text-align: center;
}

.box3 p {
  font-family: Arial;
  font-size: 28px;
  color: #99a7bf;
   
  transform: scaleY(1.8);
  margin: 0;
}
.box {
  background: #dbbfda;
  padding: 3px;
  margin-bottom: 10px;
  text-align: left;
  border-radius: 0;
  font-family: arial;
}
.box p {
    transform: scaleY(1.5);
}
.box2 {
  background: #dbbfda;
  padding: 2px;
  position: absolute;
  right: 20px;
  bottom: 400px;
  width: 35vw;
  text-align: left;
  border-radius: 0;
  font-family: arial;
}
.box2 p {     
  transform: scaleY(1.5);
} 
.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}
#music-widget {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: auto;
  top: auto;
  width: auto;
  z-index: 99999;
  box-sizing: border-box;
  line-height: 0;
}
#siteAudio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
  #speakerPlay {
    display: block;
    width: 112px;
    height: auto;
    cursor: pointer;
    user-select: none;
  }