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

body{
background:#0f172a;
color:#e2e8f0;
line-height:1.6;
}

header{
background:#020617;
padding:30px;
text-align:center;
border-bottom:2px solid #1e40af;
}

header h1{
color:#3b82f6;
font-size:32px;
}

nav{
margin-top:15px;
}

nav a{
color:#93c5fd;
text-decoration:none;
margin:0 10px;
font-weight:bold;
}

nav a:hover{
color:white;
}

main{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

section{
background:#020617;
padding:30px;
margin-bottom:30px;
border-left:4px solid #3b82f6;
border-radius:6px;
}

section h2{
color:#60a5fa;
margin-bottom:15px;
}

footer{
text-align:center;
padding:20px;
border-top:1px solid #1e293b;
color:#64748b;
}


/* Tablet */

@media (max-width:900px){

header h1{
font-size:26px;
}

main{
padding:20px;
}

}


/* Mobile */

@media (max-width:600px){

nav{
display:flex;
flex-direction:column;
gap:10px;
}

section{
padding:20px;
}

}