@charset "UTF-8";
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  background: #000;
}

@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 100 1000;
}
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-translate-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-blur {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --glow-radius {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --white-shadow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root {
  --debug: 0;
  --supported: 0;
  --not-supported: 0;
  --card-color: hsl(260deg 100% 3%);
  --text-color: hsl(260deg 10% 55%);
  --card-radius: 3.6vw;
  --card-width: 35vw;
  --border-width: 3px;
  --bg-size: 1;
  --hue: 0;
  --hue-speed: 1;
  --rotate: 0;
  --animation-speed: 4s;
  --interaction-speed: 0.55s;
  --glow-scale: 1.5;
  --scale-factor: 1;
  --glow-blur: 6;
  --glow-opacity: 1;
  --glow-radius: 100;
  --glow-rotate-unit: 1deg;
}

body::before,
body::after {
  content: "CSS.registerProperty is supported ✅";
  position: absolute;
  display: block;
  top: 8px;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(100% - 160px);
  max-width: 380px;
  height: auto;
  padding: 8px;
  border-radius: 8px;
  background: hsl(114, 51%, 48%);
  color: white;
  text-align: center;
  font-family: sans-serif;
  z-index: var(--supported, 0);
  opacity: var(--supported, 0);
}

body::after {
  content: "CSS.registerProperty is NOT supported ❌";
  background: hsl(0, 51%, 48%);
  z-index: var(--not-supported, 0);
  opacity: var(--not-supported, 0);
}

body::before,
body::after {
  display: none !important;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  outline: calc(var(--debug) * 1px) red dashed;
}

body {
  background-color: var(--card-color);
  font-family: "Mona Sans", sans-serif;
}

body > div {
  width: var(--card-width);
  width: min(480px, var(--card-width));
  aspect-ratio: 1.5/1;
  color: white;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border-radius: var(--card-radius);
  cursor: pointer;
}
body > div:hover > div {
  mix-blend-mode: darken;
  --text-color: white;
  box-shadow: 0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2);
  animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
}
body > div:hover > div:before {
  --bg-size: 15;
  animation-play-state: paused;
  transition: --bg-size var(--interaction-speed) ease;
}
body > div:hover .glow {
  --glow-blur: 1.5;
  --glow-opacity: 0.6;
  --glow-scale: 2.5;
  --glow-radius: 0;
  --rotate: 900;
  --glow-rotate-unit: 0;
  --scale-factor: 1.25;
  animation-play-state: paused;
}
body > div:hover .glow:after {
  --glow-translate-y: 0;
  animation-play-state: paused;
  transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease, --glow-opacity 0.05s ease, --glow-scale 0.05s ease, --glow-radius 0.05s ease;
}
body > div:before, body > div:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
}
body > div > div {
  position: absolute;
  background: var(--card-color);
  border-radius: calc(var(--card-radius) * 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  font-stretch: 150%;
  font-size: clamp(0.9375rem, 0.8218rem + 0.6173vw, 1.5625rem);
  color: rgb(175, 175, 175);
  padding: calc(var(--card-width) / 8);
}
@media (min-width: 200px) and (max-width: 1365.7px) {
  body > div > div {
    width: calc(var(--card-width) * 2);
  }
}
body > div > div span {
  display: inline-block;
  padding: 0.25em;
  border-radius: 4px;
  background: var(--text-color);
  color: black;
  margin-right: 8px;
  font-weight: 900;
}
body > div > div:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--card-radius) * 0.9);
  box-shadow: 0 0 20px black;
  mix-blend-mode: color-burn;
  z-index: -1;
  background: hsl(0, 0%, 16%) radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 90%) calc(0% * var(--bg-size)), hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 80%) calc(20% * var(--bg-size)), hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 60%) calc(40% * var(--bg-size)), transparent 100%);
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  animation: hue-animation var(--animation-speed) linear infinite, rotate-bg var(--animation-speed) linear infinite;
  transition: --bg-size var(--interaction-speed) ease;
}
body > div .glow {
  --glow-translate-y: 0;
  display: block;
  position: absolute;
  width: calc(var(--card-width) / 5);
  height: calc(var(--card-width) / 5);
  animation: rotate var(--animation-speed) linear infinite;
  transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
  transform-origin: center;
  border-radius: calc(var(--glow-radius) * 10vw);
}
body > div .glow:after {
  content: "";
  display: block;
  z-index: -2;
  filter: blur(calc(var(--glow-blur) * 10px));
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  background: hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 60%);
  position: relative;
  border-radius: calc(var(--glow-radius) * 10vw);
  animation: hue-animation var(--animation-speed) linear infinite;
  transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
  opacity: var(--glow-opacity);
}

@keyframes shadow-pulse {
  0%, 24%, 46%, 73%, 96% {
    --white-shadow: 0.5;
  }
  12%, 28%, 41%, 63%, 75%, 82%, 98% {
    --white-shadow: 2.5;
  }
  6%, 32%, 57% {
    --white-shadow: 1.3;
  }
  18%, 52%, 88% {
    --white-shadow: 3.5;
  }
}
@keyframes rotate-bg {
  0% {
    --bg-x: 0;
    --bg-y: 0;
  }
  25% {
    --bg-x: 100;
    --bg-y: 0;
  }
  50% {
    --bg-x: 100;
    --bg-y: 100;
  }
  75% {
    --bg-x: 0;
    --bg-y: 100;
  }
  100% {
    --bg-x: 0;
    --bg-y: 0;
  }
}
@keyframes rotate {
  from {
    --rotate: -70;
    --glow-translate-y: -65;
  }
  25% {
    --glow-translate-y: -65;
  }
  50% {
    --glow-translate-y: -65;
  }
  60%, 75% {
    --glow-translate-y: -65;
  }
  85% {
    --glow-translate-y: -65;
  }
  to {
    --rotate: calc(360 - 70);
    --glow-translate-y: -65;
  }
}
@keyframes hue-animation {
  0% {
    --hue: 0;
  }
  100% {
    --hue: 360;
  }
}
.img-mickey {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35vw;
  height: auto;
  opacity: 0.4;
}

.img-castillo {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
  height: 100vh;
  opacity: 0.6;
}

.contenedor-invitacion {
  background-color: transparent;
  position: absolute;
  top: 18%;
  left: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh 4vw;
  color: rgb(175, 175, 175);
  font-family: "McLaren", cursive;
  font-size: clamp(0.9375rem, 0.7639rem + 0.9259vw, 1.875rem);
  z-index: 5;
}

.numero {
  color: green;
  font-size: clamp(1.25rem, 1.0185rem + 1.2346vw, 2.5rem);
}

.contenedor-fecha {
  display: flex;
}

.line {
  width: 80%;
  height: 2px;
  background-color: lightblue;
  margin: 2vh 0;
}

.line2 {
  width: 80%;
  height: 2px;
  background-color: transparent;
  margin: 2vh 0;
}

.tamano {
  font-size: clamp(1.375rem, 1.0509rem + 1.7284vw, 3.125rem);
  font-weight: 800;
}

.tamano2 {
  font-size: clamp(0.875rem, 0.8287rem + 0.2469vw, 1.125rem);
}

p {
  margin: 0;
}

.icono-whats {
  color: rgb(17, 130, 223);
}

.icono-whats:hover {
  color: purple;
}

.location {
  color: rgb(17, 130, 223);
  text-decoration: none;
}

.location:hover {
  color: purple;
}

.hora {
  border-left: 2px solid lightblue;
  padding: 1vh 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fyd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1vw;
}

.colored {
  background-image: linear-gradient(90deg, purple, yellow, green);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.btn {
  position: absolute;
  top: 7%;
  left: 3%;
}

body > div .glow {
  display: initial;
  width: calc(var(--card-width) / 15);
  height: calc(var(--card-width) / 5);
}

.icono-home2 {
  font-size: clamp(0.9375rem, 0.7639rem + 0.9259vw, 1.875rem);
  color: #fff;
  position: absolute;
  z-index: 9999999;
  border-radius: 10px;
  right: 2vw;
  top: 1vh;
  display: inline-block;
  padding: 1.5vh 2vw;
}

.icono-home2:hover {
  color: grey;
}

@media (min-width: 200px) and (max-width: 1365.7px) {
  .img-castillo {
    height: 45vh;
    width: 45vw;
  }
  .img-mickey {
    height: 25vh;
    width: auto;
    left: -20%;
  }
  .contenedor-invitacion {
    left: 0;
    top: 25%;
  }
  .btn {
    left: 10%;
  }
}
@media (min-width: 600px) and (max-width: 1000px) {
  .img-mickey {
    left: 0;
  }
  .img-castillo {
    height: 60vh;
    width: auto;
  }
}/*# sourceMappingURL=style.css.map */