/* =========================================
   MyLikith Responsive System
========================================= */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

.container,
.dashboard-container,
.section{

width:min(1400px,95%);

margin:auto;

}

/* Tablets */

@media (max-width:1024px){

.hero{

padding:140px 30px 80px;

}

.hero-content{

grid-template-columns:1fr;

gap:50px;

text-align:center;

}

.hero-left{

align-items:center;

}

.stats{

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.novels-grid{

grid-template-columns:repeat(2,1fr);

}

.category-grid{

grid-template-columns:repeat(2,1fr);

}

.card-grid{

grid-template-columns:repeat(2,1fr);

}

.top-dashboard-grid{

grid-template-columns:1fr;

}

}


/* Mobile */

@media (max-width:768px){

body{

overflow-x:hidden;

}

.hero{

padding:120px 20px 60px;

min-height:auto;

}

.hero h1{

font-size:54px;

line-height:1.1;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.stats{

grid-template-columns:1fr;

}

.novels-grid{

grid-template-columns:1fr;

justify-items:center;

}

.category-grid{

grid-template-columns:1fr;

}

.card-grid{

grid-template-columns:1fr;

}

.top-dashboard-grid{

grid-template-columns:1fr;

}

.my-novel-card{

grid-template-columns:1fr;

text-align:center;

}

.my-novel-cover{

margin:auto;

}

.actions{

justify-content:center;

flex-wrap:wrap;

}

}


/* Small Phones */

@media (max-width:480px){

.hero h1{

font-size:42px;

}

.section-title{

font-size:34px;

}

.stat h2{

font-size:36px;

}

.novel-card{

width:100%;

}

.writer-card{

width:100%;

}

button{

width:100%;

}

input,
select,
textarea{

font-size:16px;

}

}

/* ===========================
   Mobile Navbar
=========================== */

.menu-toggle{

display:none;

background:none;

border:none;

color:#fff;

font-size:32px;

cursor:pointer;

}

@media(max-width:900px){

.navbar{

padding:15px 20px;

position:relative;

}

.nav-links{

position:fixed;

top:82px;

right:-100%;

width:300px;

height:calc(100vh - 82px);

background:rgba(10,12,25,.97);

backdrop-filter:blur(25px);

display:flex;

flex-direction:column;

align-items:flex-start;

padding:30px;

gap:6px;

transition:.35s;

z-index:99999;

border-left:1px solid rgba(255,255,255,.08);

}

.nav-links.active{

right:0;

}

.nav-links li{

width:100%;

list-style:none;

}

.nav-links a{

display:block;

width:100%;

padding:16px 20px;

border-radius:12px;

font-size:17px;

font-weight:600;

text-align:left;

transition:.25s;

}

.nav-links a:hover{

background:rgba(124,58,237,.18);

color:#fff;

}

.auth-buttons{

display:none;

}

.menu-toggle{

display:block;

margin-left:auto;

}

.logo{

max-width:180px;

}

}