*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Minecraft', sans-serif;
}

body{
background:#0f0f0f;
color:white;
min-height:100vh;
display:flex;
flex-direction:column;
}

/* background effect */

.bg{
position:fixed;
width:100%;
height:100%;
background:radial-gradient(circle,#ffffff22 2px,transparent 2px);
background-size:120px 120px;
animation:move 30s linear infinite;
z-index:-1;
}

@keyframes move{
from{background-position:0 0;}
to{background-position:900px 600px;}
}

/* navbar */

.navbar{
display:grid;
grid-template-columns:1fr auto auto;
align-items:center;
padding:18px 30px;
background:#00000080;
backdrop-filter:blur(10px);
}

.logo{
font-size:22px;
}

.menu{
display:flex;
gap:25px;
list-style:none;
}

.menu li{
cursor:pointer;
}

/* burger */

.burger{
font-size:24px;
cursor:pointer;
display:none;
}

/* mobile menu */

.mobileMenu{

position:absolute;

top:70px;
right:20px;

background:black;

border-radius:10px;

padding:15px;

display:none;

flex-direction:column;

gap:10px;

box-shadow:0 10px 30px rgba(0,0,0,0.6);

}

.mobileMenu a{

text-decoration:none;

background:white;

color:black;

padding:10px;

border-radius:6px;

font-size:14px;

}

/* main grid */

.container{
flex:1;
display:grid;
place-items:center;
padding:30px;
}

/* card */

.card{
background:#ffffff10;
backdrop-filter:blur(10px);
padding:35px;
border-radius:16px;
text-align:center;
width:100%;
max-width:340px;
box-shadow:0 15px 40px rgba(0,0,0,0.5);
}

textarea{

width:100%;
height:90px;

margin-top:15px;

padding:10px;

border:none;

border-radius:8px;

resize:none;

}

/* button */

.sendBtn{

margin-top:15px;

padding:12px;

border:none;

background:white;

color:black;

border-radius:6px;

cursor:pointer;

}

.sendBtn:hover{
transform:scale(1.05);
}

/* footer */

footer{
text-align:center;
padding:15px;
font-size:12px;
opacity:.7;
}

/* mobile */

@media (max-width:700px){

.menu{
display:none;
}

.burger{
display:block;
}

}

/* BURGER */

.burger{
font-size:26px;
cursor:pointer;
z-index:1001;
}

/* MOBILE MENU */

.mobileMenu{

position:fixed;

top:70px;
right:20px;

display:flex;
flex-direction:column;

gap:12px;

background:#111;

padding:18px;

border-radius:14px;

width:220px;

box-shadow:0 20px 60px rgba(0,0,0,0.8);

transform:translateY(-20px);

opacity:0;

pointer-events:none;

transition:0.35s ease;

z-index:1000;

}

/* ACTIVE MENU */

.mobileMenu.active{

opacity:1;

transform:translateY(0);

pointer-events:auto;

}

/* MENU BUTTON */

.mobileMenu a{

display:flex;

align-items:center;

justify-content:center;

background:white;

color:black;

text-decoration:none;

padding:12px;

border-radius:10px;

font-size:14px;

transition:0.2s;

}

.mobileMenu a:hover{

transform:scale(1.05);

}

.messagePopup{

position:fixed;

bottom:30px;
left:50%;

transform:translateX(-50%) translateY(20px);

background:white;

color:black;

padding:14px 22px;

border-radius:10px;

font-size:14px;

box-shadow:0 10px 30px rgba(0,0,0,0.4);

opacity:0;

transition:0.35s;

z-index:9999;

}

.messagePopup.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}