body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1f001f, #1f1f00);
    overflow: hidden;
}

h1 {
    font-size: 4rem;
    color: white;
    animation: float 2s ease-in-out infinite alternate;
    border: 5px double #654050;
}

@keyframes float {
    from { transform: translateY(0); }
    to { transform: translateY(-20px); }
}

/* /////////////////////////////////////////// */
.box:hover {
    background: var(--color-surface-light);
    font-size: var(--font-size-lg);

    animation: bobble 0.4s ease-in-out infinite alternate;
}

@keyframes bobble {
    from {
        transform: translateX(-5px);
    }
    to {
        transform: translateX(5px);
    }
}

.box {
    background: #142d4a;
    height: 100px;

    margin: 15px;
    aspect-ratio: 1/1;
    border-radius: 25px;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto";
    font-size: 15px;
    z-index: 10;
}

@property --deg {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.box::before,
.box::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: conic-gradient(
    from var(--deg) at center,
    #00c3ff,
    #4d0199,
    #6300c6,
    #009dcd
    );
    border-radius: inherit;
    z-index: -2;
    padding: 2px;
    animation: autoRotate 2s linear infinite;
}
.box::after {
    filter: blur(10px);
}
@keyframes autoRotate {
    to{ --deg: 360deg; }
}

/* /////////////////////////////////////////// */
.popup {
  max-width: 300px;
  background-color: #41030c;
  margin: 30px;
  margin-right: -50px;
  padding: 1em;
  font-weight: 700;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  border: 10px solid var(--clr-accent);
  border-radius: 50px;
  position: fixed;
  right: 50%;
  top: 50%;
  z-index: 999;
}