/* ===================================
   GLOBAL
=================================== */

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

body{
    display:flex;
    background:#0f172a;
    color:#ffffff;
    min-height:100vh;
}


/* ===================================
   SIDEBAR
=================================== */

.sidebar{

    width:250px;
    height:100vh;
    position:fixed;
    background:#111827;
    padding:30px 20px;
    border-right:1px solid rgba(255,255,255,.08);

}


.logo{

    margin-bottom:40px;

}


.logo h2{

    font-size:28px;

}


.logo span{

    color:#38bdf8;

}



nav{

    display:flex;
    flex-direction:column;
    gap:15px;

}


nav a{

    text-decoration:none;
    color:#cbd5e1;
    padding:14px 18px;
    border-radius:12px;
    transition:.3s;

}


nav a:hover,
nav .active{

    background:#1e293b;
    color:#38bdf8;

}


/* ===================================
   MAIN
=================================== */

.main{

    flex:1;
    margin-left:250px;
    padding:35px;

}


.header{

    margin-bottom:35px;

}


.header h1{

    font-size:34px;
    margin-bottom:8px;

}


.header p{

    color:#94a3b8;

}



/* ===================================
   DOCUMENTATION CARDS
=================================== */


.doc-card{

    background:#1e293b;
    padding:30px;
    border-radius:20px;
    margin-bottom:30px;
    transition:.3s;

}


.doc-card:hover{

    transform:translateY(-4px);

}



.doc-card h2{

    color:#38bdf8;
    margin-bottom:20px;

}


.doc-card h3{

    margin-top:20px;
    margin-bottom:10px;

}


.doc-card p{

    color:#cbd5e1;
    line-height:1.8;

}



.doc-card ul{

    padding-left:25px;

}


.doc-card li{

    color:#cbd5e1;
    margin:12px 0;

}



/* ===================================
   POMODORO STEPS
=================================== */


.steps{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-top:25px;

}


.steps div{

    background:#334155;
    padding:20px;
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:15px;
    color:#e2e8f0;

}


.steps span{

    width:35px;
    height:35px;
    border-radius:50%;
    background:#38bdf8;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-weight:600;

}



/* ===================================
   TECHNOLOGY TAGS
=================================== */


.tech{

    display:flex;
    flex-wrap:wrap;
    gap:15px;

}


.tech span{

    background:#334155;
    padding:12px 20px;
    border-radius:30px;
    color:#38bdf8;
    border:1px solid rgba(56,189,248,.3);

}



/* ===================================
   VERSION CARD
=================================== */


.version{

    background:#1e293b;
    padding:30px;
    border-radius:20px;
    text-align:center;
    margin-top:20px;
    border-top:4px solid #38bdf8;

}


.version h2{

    color:#38bdf8;
    margin-bottom:12px;

}


.version p{

    color:#cbd5e1;

}



/* ===================================
   SCROLLBAR
=================================== */


::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-thumb{

    background:#38bdf8;
    border-radius:20px;

}



/* ===================================
   RESPONSIVE
=================================== */


@media(max-width:900px){


    .sidebar{

        display:none;

    }


    .main{

        margin-left:0;
        padding:20px;

    }


}



@media(max-width:600px){


    .header h1{

        font-size:28px;

    }


    .doc-card{

        padding:20px;

    }


    .steps{

        grid-template-columns:1fr;

    }


    .tech span{

        width:100%;
        text-align:center;

    }

}