body{
background:#020b0a;
font-family:'Share Tech Mono', monospace;
margin:0;
padding:0;
text-align:center;
color:white;
}

/* NUVEM */
.cloud { display: flex; position: relative; margin-top: 130px; width: 320px; height: 100px; background: #fff; border-radius: 100px; z-index: 100; filter: drop-shadow(8px 8px 0 #0005); animation: animateCloud 1s steps(1) infinite; } @keyframes animateCloud { 0% { filter: drop-shadow(8px 8px 0 #0005) drop-shadow(0 0 0 #181c1f) brightness(1); } 95% { filter: drop-shadow(8px 8px 0 #0005) drop-shadow(0 0 50px #fff5) brightness(10); } } .cloud::before { content: ''; position: absolute; top: -50px; left: 40px; width: 110px; height: 110px; border-radius: 50%; background: #fff; box-shadow: 90px 0 0 30px #fff; } .container .cloud::after { content: ''; position: absolute; inset: 0; background: #fff; border-radius: 100px; z-index: 1000; } 
.text{

position:absolute;
top:40px;

color:#00ff66;
text-shadow:0 0 5px #00ff66,
0 0 10px #00ff66,
0 0 20px #00ff66;

font-family:'Share Tech Mono', monospace;

animation:rain 2s linear forwards;

}
/* animação da queda */

@keyframes rain{

0%{
transform:translateY(0);
opacity:1;
}

100%{
transform:translateY(300px);
opacity:0;
}

}
/* container da nuvem */

.container{
display:flex;
justify-content:center;
margin-top:40px;
}

/* titulo */
h1{
font-size: 15px;
font-weight:400;
line-height:1.5;
}

/* lista de links */

ul{
list-style:none;
padding:0;
margin-top:40px;
}

ul li{
margin:20px auto;
width:90%;
max-width:600px;
}

.icon-btn{

width:120px;
gap:15px;
font-size:22px;

}

.icon-btn i{

color:#00ff66;
transition:0.3s;

}

.icon-btn:hover i{

color:#000;

}
/* BOTÃO MATRIX */

.matrix-btn{

border-color:transparent;
height:45px;
width:100%;
max-width:600px;
font-size:18px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#2ecc71;
text-shadow:0 0 2px #2ecc71;
text-decoration:none;

background:linear-gradient(
90deg,
rgba(46,204,113,0.20),
rgba(46,204,113,0.05)
);

border:2px solid #00ff66;

position:relative;

transition:all 0.5s;

cursor:pointer;

}

/* efeito antes */

.matrix-btn::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

z-index:1;

background-color:rgba(255,255,255,0.08);

transition:all 0.3s;

}

/* hover before */

.matrix-btn:hover::before{

opacity:0;

transform:scale(0.5,0.5);

}

/* efeito after */

.matrix-btn::after{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

z-index:1;

opacity:0;

transition:all 0.3s;

border:1px solid rgba(0,255,100,0.6);

transform:scale(1.2,1.2);

}

/* hover after */

.matrix-btn:hover::after{

opacity:1;

transform:scale(1,1);

}

/* hover principal */

.matrix-btn:hover{

background:#00ff66;
color:#001a0f;

}

/* efeito links */

a{
text-decoration:none;
}