body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
color:white;
}


/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
padding:15px 40px;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(10px);
align-items:center;
}

.logo{
font-size:22px;
font-weight:bold;
color:#ff4b6e;
}

.menu a{
margin:10px;
color:white;
text-decoration:none;
font-weight:bold;
}

.menu a:hover{
color:#ff4b6e;
}


/* HERO */

.container{
text-align:center;
margin-top:50px;
padding:20px;
}

.hero-title{
font-size:40px;
}

.hero-sub{
font-size:18px;
opacity:0.8;
}


/* GENERATOR */

.generator-card{

margin:auto;
margin-top:30px;
width:300px;

background:rgba(255,255,255,0.1);
padding:20px;

border-radius:15px;

backdrop-filter:blur(10px);

}

.generator-card input,
.generator-card select{

width:100%;
padding:10px;
margin:5px 0;

border:none;
border-radius:8px;

}

.generator-card button{

width:100%;
padding:10px;

background:#ff4b6e;

border:none;
border-radius:8px;

color:white;
font-weight:bold;

margin-top:5px;

cursor:pointer;

}

.generator-card button:hover{

background:#ff2e55;

}


#output{

margin-top:10px;
padding:10px;

background:rgba(0,0,0,0.4);

border-radius:10px;

min-height:40px;

}


/* EMAIL */

.email-box{

margin:auto;
margin-top:40px;

width:300px;

background:rgba(255,255,255,0.1);

padding:20px;

border-radius:15px;

text-align:center;

}

.email-box input{

width:100%;
padding:10px;
border:none;
border-radius:8px;

}

.email-box button{

margin-top:10px;

padding:10px;
width:100%;

background:#00c6ff;

border:none;
border-radius:8px;

color:white;

}


/* FOOTER */

footer{

margin-top:50px;

text-align:center;

padding:20px;

background:rgba(0,0,0,0.3);

}

footer a{

color:white;
margin:5px;

text-decoration:none;

}
.generator-card {
cursor: pointer;
pointer-events: auto;
display: block;
}

.generator-card a {
pointer-events: auto;
}

a {
pointer-events: auto;
}
.container {
position: relative;
z-index: 5;
}

.navbar {
z-index: 10;
position: relative;
}
.blog-card {

display: block;

background: rgba(255,255,255,0.1);

padding: 20px;

margin: 15px 0;

border-radius: 12px;

text-decoration: none;

color: white;

transition: 0.3s;

}


.blog-card:hover {

background: rgba(255,255,255,0.2);

transform: scale(1.03);

}
nav {

display: flex;
justify-content: space-between;
align-items: center;

padding: 15px 40px;

background: rgba(0,0,0,0.3);

backdrop-filter: blur(10px);

}


.logo {

font-size: 22px;
font-weight: bold;
color: #ff4b7d;

}


.links {

display: flex;
gap: 15px;

}


.links a {

color: white;
text-decoration: none;
font-weight: bold;

}


.links a:hover {

color: #ff4b7d;

}