/* ==========================================
   NIBBLER AI
   style.css
   ========================================== */

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

body{

    background:#050505;
    color:#7CFC00;

    font-family:Consolas, Monaco, monospace;

    background-image:
        radial-gradient(circle at top,#0d0d0d,#050505);

    line-height:1.6;

}

/* ========================= */

.container{

    width:95%;
    max-width:1500px;

    margin:auto;

    padding:30px;

}

/* ========================= */

.hero{

    width:100%;

    border:2px solid #00ff66;

    border-radius:15px;

    box-shadow:
        0 0 20px #00ff66,
        0 0 60px rgba(0,255,0,.15);

    margin-bottom:35px;

}

/* ========================= */

h1{

    text-align:center;

    font-size:4.5em;

    color:#7CFC00;

    text-shadow:
        0 0 10px #00ff66,
        0 0 20px #00ff66;

}

h2{

    text-align:center;

    color:#99ff99;

    margin-bottom:20px;

}

h3{

    color:#7CFC00;

    margin-bottom:15px;

    border-bottom:1px solid #00ff66;

    padding-bottom:10px;

}

/* ========================= */

.quote{

    margin:40px auto;

    max-width:1000px;

    padding:20px;

    background:#101010;

    border:1px solid #00ff66;

    border-radius:10px;

    text-align:center;

    font-size:1.4em;

    box-shadow:0 0 15px rgba(0,255,0,.2);

}

/* ========================= */

.grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(350px,1fr));

    gap:25px;

    margin-top:30px;

}

/* ========================= */

.panel{

    background:#101010;

    border:1px solid #00ff66;

    border-radius:12px;

    padding:25px;

    transition:.3s;

    box-shadow:

        0 0 10px rgba(0,255,0,.15);

}

.panel:hover{

    transform:translateY(-5px);

    box-shadow:

        0 0 20px rgba(0,255,0,.4);

}

/* ========================= */

.status p{

    margin:8px 0;

}

.features ul{

    list-style:none;

}

.features li{

    padding:10px;

    border-bottom:1px solid #222;

}

.features li:last-child{

    border:none;

}

/* ========================= */

.message{

    margin-top:40px;

    padding:30px;

    border:2px dashed #00ff66;

    border-radius:12px;

    text-align:center;

    background:#111;

    box-shadow:

        inset 0 0 20px rgba(0,255,0,.1);

}

/* ========================= */

footer{

    text-align:center;

    margin-top:60px;

    color:#777;

    font-size:.9em;

}

/* ========================= */

#clock{

    font-size:2.5em;

    color:#00ff66;

}

#greeting{

    color:white;

    font-size:1.3em;

}

#assessment{

    color:#99ff99;

}

#mood{

    color:#00ff66;

    font-size:2em;

}

/* ========================= */

.cursor::after{

    content:"_";

    animation:blink 1s infinite;

}

/* ========================= */

@keyframes blink{

0%{
opacity:1;
}

50%{
opacity:1;
}

51%{
opacity:0;
}

100%{
opacity:0;
}

}

/* ========================= */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#00aa44;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#00ff66;

}

/* ========================= */

a{

    color:#7CFC00;

    text-decoration:none;

}

a:hover{

    color:white;

}

/* ========================= */

button{

    background:#101010;

    color:#7CFC00;

    border:1px solid #00ff66;

    padding:12px 20px;

    font-family:inherit;

    cursor:pointer;

    border-radius:8px;

    transition:.3s;

}

button:hover{

    background:#00ff66;

    color:black;

    box-shadow:

        0 0 15px #00ff66;

}

/* ========================= */

@media(max-width:900px){

h1{

    font-size:3em;

}

.hero{

    margin-bottom:20px;

}

.container{

    padding:15px;

}

.quote{

    font-size:1.1em;

}

.panel{

    padding:20px;

}

#clock{

    font-size:2em;

}

}