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

body{
    margin:0;
    padding:0;
    font-family:cursive;
    color:gold;

    background: 
  radial-gradient(circle at top
  #5b21b6 0%,
    #2a0050 40%,
    #080012 75%,
    black 100%);
  
    background-image: url("assets/back.jpg");
    background-size: cover;        
    background-position: center;   
    background-repeat: no-repeat; 
    background-attachment: fixed;  
    overflow-x:hidden;
  
}

/* Aurora Background */

.aurora{

position:fixed;
width:100%;
height:100%;
left:0;
top:0;
z-index:-2;

background:
linear-gradient(180deg,#05051b,#13093d,#23035b);

}


.aurora::before{

content:"";

position:absolute;
width:100%;
height:100%;

background:

radial-gradient(circle at 20% 40%,rgba(0,255,255,.35),transparent 30%),

radial-gradient(circle at 80% 20%,rgba(94,0,255,.45),transparent 35%),

radial-gradient(circle at 50% 60%,rgba(130,0,255,.35),transparent 40%),

radial-gradient(circle at 70% 90%,rgba(0,180,255,.25),transparent 40%);

filter:blur(80px);

animation:move 12s infinite alternate;

}

@keyframes move{

0%{
transform:translateY(0px);
}

100%{
transform:translateY(-50px);
}

}

/* Stars */

body::before{

content:"";

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background-image:

radial-gradient(white 1px,transparent 1px);

background-size:40px 40px;

opacity:.25;

z-index:-1;

}

/* Header */

header{

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

padding:30px 8%;

}

.logo{

display:flex;
align-items:center;
gap:15px;

}

.logo img{

width:65px;
border-radius:50%;
box-shadow:0 0 20px #ffd900;

}

.logo h2{

font-size:30px;

}

nav{

display:flex;
gap:40px;

}

nav a{

text-decoration:none;
color:white;
font-weight:500;
transition:.4s;

}

nav a:hover{

color:#ffd500;

}

/* Hero */

.hero{

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

padding:70px 8%;

min-height:80vh;

}

.left{

width:50%;

}

.left h1{

font-size:65px;
line-height:75px;
margin-bottom:20px;

}

.left span{

color:#ffd400;
text-shadow:0 0 20px gold;

}

.left p{

font-size:20px;
opacity:.85;
line-height:35px;

margin-bottom:40px;

}

.buttons{

display:flex;
gap:20px;
    height:70px;

}

.btn{

padding:15px 8px;

background:#ffd000;

border-radius:20px;

text-decoration:none;

font-weight:700;
    
    font-family: fantasy;
color:black;

transition:.3s;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 0 30px gold;

}

.btn2{

padding:15px 35px;

border:2px solid white;

border-radius:40px;

color:white;

text-decoration:none;

transition:.3s;

}

.btn2:hover{

background:white;
color:black;

}

.right{

width:40%;
display:flex;
justify-content:center;

}

.right img{

width:420px;

border-radius:40px;

box-shadow:

0 0 40px rgba(255,215,0,.7),

0 0 100px rgba(0,255,255,.3);

animation:float 4s ease infinite;

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}

/* Cards */

.cards{

display:flex;

justify-content:center;

gap:40px;

padding:80px 8%;

flex-wrap:wrap;

}

.card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.2);

padding:35px;

width:320px;
  
  border-block-color: limegreen;
  border-block-left-color :gold;
  border-block-width: 5px;
border-radius:35px;

transition:.6s;

}

.card:hover{

transform:translateY(-12px);

box-shadow:0 0 40px rgba(0,255,255,.35);

}

.card h2{

margin-bottom:20px;

color:#ffd000;

}

/* About */

.about{

padding:80px 10%;

text-align:center;

}

.about h2{

font-size:45px;

margin-bottom:20px;

}

.about p{

font-size:19px;

line-height:35px;

opacity:.85;

}

/* Footer */

footer{

padding:40px;

text-align:center;

opacity:.7;

}

/* Mobile */

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

}

.left{

width:100%;

}

.right{

width:100%;
margin-top:60px;

}

.left h1{

font-size:45px;
line-height:55px;

}

.right img{

width:280px;

}

nav{

display:none;

}

}