@font-face {

font-family:MELTRASUSE;

src:url("../fonts/meltrasuse-font.ttf");

}



* {

box-sizing:border-box;

}



body {


margin:0;

background:#050b16;

color:white;

font-family:MELTRASUSE, monospace;

text-transform:uppercase;

text-align:center;


}





header {


position:fixed;

top:0;

width:100%;


background:#071426;


border-bottom:3px solid #00ff99;


box-shadow:0 0 20px #00ff99;


z-index:10;


}




nav {


display:flex;

justify-content:center;

gap:35px;

padding:25px;


}



nav a {


color:white;

text-decoration:none;

font-size:22px;


transition:.3s;


}



nav a:hover {


color:#00ff99;


transform:translateY(-5px);


}





.hero {


height:100vh;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


}



.title {


font-size:80px;


margin:0;


letter-spacing:8px;


text-shadow:


0 0 15px #00ff99,

4px 4px 0 #102030;


animation:floating 3s infinite;


}




.subtitle {


font-size:25px;


color:#9bdcff;


}




.button {


display:inline-block;


margin-top:40px;


padding:20px 60px;


border:4px solid #00ff99;


background:#10263d;


color:white;


text-decoration:none;


font-size:25px;


transition:.3s;


}



.button:hover {


background:#00ff99;


color:#050b16;


box-shadow:0 0 30px #00ff99;


transform:scale(1.1);


}





.page {


padding-top:160px;


min-height:100vh;


}





.box {


max-width:850px;


margin:50px auto;


padding:45px;


background:#0b1d33;


border:4px solid #31506b;


box-shadow:0 0 30px #000;


animation:appear 1s;


}





h2 {


color:#00ff99;


font-size:45px;


}



h3 {


color:#00ccff;


font-size:28px;


}



p {


font-size:22px;

line-height:1.8;


}




.email {


color:#00ff99;


font-size:25px;


text-decoration:none;


}





footer {


padding:30px;


background:#030711;


border-top:2px solid #31506b;


}





@keyframes floating {


0% {

transform:translateY(0);

}


50% {

transform:translateY(-15px);

}


100% {

transform:translateY(0);

}


}





@keyframes appear {


from {

opacity:0;

transform:translateY(40px);

}


to {

opacity:1;

transform:translateY(0);

}


}




@media(max-width:700px){


.title {

font-size:45px;

}



nav {

flex-direction:column;

gap:10px;

}



}