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

body{

    background: linear-gradient(135deg,#050816,#0b1026,#111c44);
    color: white;
    min-height: 100vh;
    padding: 40px;

}

main{

    max-width: 1100px;
    margin: auto;

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

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 25px;

    padding: 40px;

    backdrop-filter: blur(12px);

    box-shadow: 0px 0px 30px rgba(0,229,255,0.15);

}

h1{

    text-align: center;

    font-size: 3rem;

    margin-bottom: 25px;

    color: #00e5ff;

    text-shadow: 0px 0px 20px #00e5ff;

}

h2{

    margin-top: 40px;

    margin-bottom: 15px;

    color: #00e5ff;

    border-left: 5px solid #00e5ff;

    padding-left: 12px;

}

h3{

    margin-top: 20px;

    margin-bottom: 10px;

    color: #90caf9;

}

p{

    line-height: 1.8;

    color: #e0e0e0;

    margin-bottom: 20px;

    font-size: 1.05rem;

}

hr{

    border: none;

    height: 1px;

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

    margin: 35px 0;

}

pre{

    background: #0a0f1f;

    color: #00ffcc;

    padding: 20px;

    border-radius: 15px;

    overflow-x: auto;

    border: 1px solid rgba(0,229,255,0.3);

    margin-bottom: 20px;

    box-shadow: 0px 0px 15px rgba(0,229,255,0.1);

}

ul{

    margin-left: 25px;

    margin-bottom: 20px;

}

ul li{

    margin-bottom: 12px;

    color: #eceff1;

}

a{

    display: inline-block;

    margin-top: 30px;

    text-decoration: none;

    color: white;

    background: linear-gradient(90deg,#00e5ff,#2979ff);

    padding: 14px 24px;

    border-radius: 12px;

    transition: 0.3s;

    font-weight: bold;

}

a:hover{

    transform: scale(1.05);

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

}

@media(max-width:768px){

    body{

        padding: 20px;

    }

    main{

        padding: 25px;

    }

    h1{

        font-size: 2rem;

    }

}