* {
    box-sizing: border-box;
}

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

body {
    position: relative;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 225, 125, .55), transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(255, 145, 205, .45), transparent 25%),
        radial-gradient(circle at 75% 85%, rgba(90, 220, 255, .45), transparent 28%),
        linear-gradient(135deg, #fff5c7 0%, #ffd6e7 45%, #cceeff 100%);
}

header {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    text-align: center;
    pointer-events: none;
    color: #653b73;
    text-shadow: 2px 2px 0 rgba(255,255,255,.8);
}

header h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 42px);
}

header p {
    margin: 4px 0 0;
    font-size: clamp(14px, 2vw, 19px);
    font-weight: bold;
}

#linkCloud {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.link {
    position: absolute;
    display: block;
    padding: 9px 15px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .3px;
    white-space: nowrap;
    transform-origin: center;
    cursor: pointer;
    user-select: none;
    border: 3px solid rgba(255,255,255,.8);
    box-shadow:
        0 5px 0 rgba(70, 40, 90, .18),
        0 8px 18px rgba(70, 40, 90, .16);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
    animation: float 3s ease-in-out infinite;
}

.link:nth-child(2n) {
    animation-delay: -.8s;
}

.link:nth-child(3n) {
    animation-delay: -1.6s;
}

.link:hover,
.link:focus {
    transform: scale(1.18) rotate(var(--rotation));
    filter: brightness(1.08) saturate(1.2);
    box-shadow:
        0 7px 0 rgba(70, 40, 90, .18),
        0 12px 28px rgba(70, 40, 90, .3);
    outline: none;
    z-index: 3000 !important;
}

@keyframes float {
    0%, 100% {
        margin-top: 0;
    }
    50% {
        margin-top: -5px;
    }
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: .35;
    pointer-events: none;
    filter: blur(1px);
}

.bubble1 {
    width: 120px;
    height: 120px;
    left: 5%;
    bottom: 5%;
    background: #ff72b6;
}

.bubble2 {
    width: 85px;
    height: 85px;
    right: 8%;
    top: 30%;
    background: #7de3ff;
}

.bubble3 {
    width: 60px;
    height: 60px;
    left: 28%;
    top: 15%;
    background: #ffe36e;
}

.bubble4 {
    width: 150px;
    height: 150px;
    right: 20%;
    bottom: -45px;
    background: #a98cff;
}

@media (max-width: 600px) {
    .link {
        padding: 7px 10px;
        border-width: 2px;
    }

    header {
        top: 10px;
    }
}