@font-face {
    font-family: 'CustomFont';
    src: url('/FONT/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0a0a0a;
    cursor: none;
}

.bg-container {
    --mouse-x: 0;
    --mouse-y: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}
.bg-container span {
    position: absolute;
    border-radius: 100%;
    background: rgba(80, 120, 100, 0.8); 
    filter: blur(120px);
    transition: transform 0.3s ease-out;
}

@keyframes float {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(120px, -50px) scale(1.4); }
    40%  { transform: translate(-80px, 100px) scale(0.6); }
    60%  { transform: translate(40px, 150px) scale(1.8); }
    75%  { transform: translate(-130px, -20px) scale(0.4); }
    90%  { transform: translate(20px, 40px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

.bg-container span {
    margin-top: calc(var(--mouse-y) * 5px);
    margin-left: calc(var(--mouse-x) * 5px);
}

.bg-container span:nth-child(1) { width: 120px; height: 120px; top: 15%; left: 10%; animation: float 89s infinite ease-in-out; animation-delay: -12s; opacity: 0.4; }
.bg-container span:nth-child(2) { width: 350px; height: 350px; top: 60%; left: 70%; animation: float 197s infinite ease-in-out; animation-delay: -45s; opacity: 0.2; }
.bg-container span:nth-child(3) { width: 80px;  height: 80px;  top: 40%; left: 85%; animation: float 131s infinite ease-in-out; animation-delay: -92s; opacity: 0.1; }
.bg-container span:nth-child(4) { width: 180px; height: 180px; top: 5%;  left: 55%; animation: float 67s infinite ease-in-out;  animation-delay: -3s;   opacity: 0.3; }
.bg-container span:nth-child(5) { width: 240px; height: 240px; top: 80%; left: 20%; animation: float 251s infinite ease-in-out; animation-delay: -110s; opacity: 0.2; }
.bg-container span:nth-child(6) { width: 50px;  height: 50px;  top: 30%; left: 40%; animation: float 103s infinite ease-in_out; animation-delay: -58s; opacity: 0.5; }
.bg-container span:nth-child(7) { width: 290px; height: 290px; top: 10%; left: 75%; animation: float 163s infinite ease-in-out; animation-delay: -140s; opacity: 0.15; }
.bg-container span:nth-child(8) { width: 40px;  height: 40px;  top: 90%; left: 60%; animation: float 73s infinite ease-in-out;  animation-delay: -22s; opacity: 0.4; }
.bg-container span:nth-child(9) { width: 160px; height: 160px; top: 50%; left: 5%;  animation: float 227s infinite ease-in-out; animation-delay: -88s; opacity: 0.25; }
.bg-container span:nth-child(10) { width: 210px; height: 210px; top: 25%; left: 35%; animation: float 149s infinite ease-in-out; animation-delay: -175s; opacity: 0.2; }


.content {
    font-family: "Source Code Pro", monospace;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #0a0a0a;
    pointer-events: none; 
}

h1 { font-size: 3rem; }