@font-face {

font-family: kingjola;

src: url("Kingjola.ttf");
}

body {

margin: 0;

height: 100vh;

background: radial-gradient(circle at center, #0a0a0a, #000000);

color: white;

font-family: kingjola;
letter-spacing: 6px;

font-size: 100px;


overflow: hidden;

}



#title {

position: absolute;

top: 20%;

left: 50%;

transform: translate(-50%, -50%);

letter-spacing: 8px;

font-size: 64px;

opacity: 0;

animation: fadeIn 4s forwards;

}



#bubble {

position: absolute;

width: 140px;

height: 140px;

border-radius: 50%;

border: 1px solid white;

left: 50%;

top: 55%;

transform: translate(-50%, -50%);

cursor: pointer;

opacity: 0.25;

transition: 0.6s;

animation: float 6s infinite ease-in-out alternate;

}



#bubble:hover {

opacity: 0.7;

transform: translate(-50%, -50%) scale(1.08);

}



@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

}



@keyframes float {

from {

transform: translate(-50%, -60%);

}

to {

transform: translate(-50%, -40%);

}

}

#flash {

position: fixed;

width: 100vw;
height: 100vh;

background: white;

top: 0;
left: 0;

opacity: 0;

pointer-events: none;

transition: opacity 0.2s;

z-index: 999;

}

.gif {

position: fixed;

width: 80px;

pointer-events: none;

z-index: -1;

}

.gif1 {

top: 100px;

left: 80px;

}

.gif2 {

top: 100px;

left: 1200px;

}

.gif3 {

top: 600px;

left: 700px;

}