:root {

    --bg:#1d1d1d;
    --panel:#292929;

    --text:#f4f4f4;

    --blue:#18A8E1;

    --blue2:#33c5ff;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Verdana,Arial,sans-serif;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background-image:
        radial-gradient(circle at top,#333 0%,#1d1d1d 60%);
}

.container{

    text-align:center;

    padding:50px;

    max-width:900px;

}

.logo{

    width:180px;

    image-rendering:auto;

    margin-bottom:25px;

    transition:transform .3s ease;

}

.logo:hover{

    transform:rotate(-8deg) scale(1.05);

}

h1{

    font-size:4em;

    letter-spacing:6px;

    margin-bottom:15px;

    color:white;

    text-shadow:
        0 0 10px rgba(24,168,225,.4);

}

.tagline{

    font-size:1.2em;

    color:#cccccc;

    margin-bottom:45px;

}

nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

nav a{

    text-decoration:none;

    color:white;

    background:var(--panel);

    border:2px solid var(--blue);

    padding:15px 30px;

    border-radius:8px;

    transition:.25s;

    min-width:160px;

}

nav a:hover{

    background:var(--blue);

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 0 20px rgba(24,168,225,.6);

}

footer{

    margin-top:60px;

    color:#999;

    font-size:.95em;

    line-height:1.8;

}

.system{

    margin-top: 20px;
    color: #18A8E1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9em;
    line-height: 1.4;

}

.copyright{

    margin-top: 20px;
    color: #777;
    font-size: 0.85em;

}